<video>要素で再生させようと思います
youtubeみたいな感じですyoutube
動画形式(H.264もしくはmpegとか)と拡張子も教えてくれると助かります
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答2件
0
ベストアンサー
2点あります。
- HTML5のvideo要素で再生できる動画の種類
まず、動画の種類というと一つの規格で成り立っていると思われがちですが、実際は「コンテナ」という大枠のフォーマットがあり、その中に指定された「動画コーデック」でエンコードされた動画データと、「音声コーデック」でエンコードされた音声データが入っています。つまり、「コンテナ」「動画コーデック」「音声コーデック」の全てに対応していないと正しく再生されません。また、「コンテナ」によっては入れることができる「動画コーデック」と「音声コーデック」が決まっています。
現在は次の二つが主流です。
MP4形式
コンテナ: MP4
動画コーデック: H.264
音声コーデック: AAC または MP3
拡張子: .mp4 (他にも拡張フォーマットが存在し、拡張子が異なる場合があります)
対応ブラウザ: ほぼ全て。ただし、FirefoxなどについてはOS側にデコーダが入っている必要がある。
※ MP4自体は他のコーデックも利用可能ですが、ブラウザ側が全てに対応しているわけではありません。
WebM形式
コンテナ: WebM
動画コーデック: VP9 または VP8
音声コーデック: Vorbis
拡張子: .webm
対応ブラウザ: ChromとFirefoxなど、IE未対応、Microsoft EdgeはVP9に対応予定
対応ブラウザはWikipedia: video要素を参考にするといいでしょう。Youtubeなどは二つ形式を両方とも用意して、どのブラウザでも再生できるようにしているようです。
※ IE8以下はvideo要素自体に対応していないので、いずれも再生できません。
- video要素だけで再生すると素っ気ない
Youtubeなどを見て貰うとわかりますが、動画の下部に再生ボタンとか音量ボタンがあると思います。あれはvideo要素が用意しているのではなく、別途ボタンを作成し、JavaScriptを使って動画の動きを制御しています。つまり、video要素だけでは素っ気ない動画再生画面しか表示されず、Youtubeみたいにはならないと言うことです。
そこでどうするかというとJavaScriptなどとセットになったビデオプレーヤーのフレームワークを使います。tozjp さんが紹介しているページにある各ビデオプレーヤーがまさしくそれです。これらのビデオプレイヤーを自分のサイトのHTMLに埋め込むことでYoutubeのように再生できると言うことです。中にはvideo要素に対応していないブラウザの場合はFlashPlayerを使って再生するといった物もあります。
以上になりますが、まずは、MP4かWebMのどちらかで動画を作成してみて、Google Chrome(両方に対応している)でどう表示されるかを見てみるのがいいのではないでしょうか?そのあと、お好みのビデオプレイヤーを組み込めばいいかなと思います。もちろん、JavaScriptなどを駆使して自分でカスタマイズされた再生ボタンなどを作ることもできますが、それなりの知識が必要になります。
投稿2015/11/04 23:33
総合スコア21733
0
まだ漠然とした段階のようなので、まずはスタート地点を探しましょう。
JW PLAYERを使用したことがありますが、何年も前なので今はもっと有力な選択肢があるかもしれません。ただ、 JW PLAYER は歴史が長いだけあって、古いブラウザを含めて対応範囲は広いと思います。
使った当時は IE8 にも対応していた記憶があります。
※他のプレイヤーがそうでないと言っているわけではありません。
単に、他のものはわからないので、上記サイトの紹介文などを参考に一つ決めるといいと思います。
10個に選ばれたくらいですから、極端な地雷はない…と信じます。
決めてしまえばあとは使い方の問題なので、どうしてもわからなければ (強調) またここで質問するなりで回答は得られやすいと思います。
投稿2015/11/04 02:49
総合スコア790
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/11/05 01:07
2015/11/05 10:47
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/11/05 01:07