HTML5ビデオ:HTMLにビデオを埋め込む方法

HTML5より前は、Webページでビデオを再生するには、Adobe FlashPlayerなどのプラグインを使用する必要がありました。HTML5の導入により、ビデオをページ自体に直接配置できるようになりました。

これにより、Adobe Flash PlayerなどのプラグインはAndroidまたはiOSで機能しないため、モバイルデバイス用に設計されたページでビデオを再生できます。

HTML要素は、Webドキュメントにビデオを埋め込むために使用されます。これには、src属性またはソース要素を使用して表される1つ以上のビデオソースが含まれる場合があります。

ビデオファイルを埋め込むには、次のコードスニペットを追加し、をビデオファイルsrcのパスに変更します。

   Your browser does not support the video element. Kindly update it to latest version. 

この要素は、最新のすべてのブラウザーでサポートされています。ただし、すべてのブラウザが同じビデオファイル形式をサポートしているわけではありません。MP4ファイルは最も広く受け入れられている形式であり、WebMやOggなどの他の形式はChrome、Firefox、Operaでサポートされています。

ほとんどのブラウザでビデオを確実に再生するには、それらをOgg形式とMP4形式の両方にエンコードし、上記の例のように両方を要素に含めることをお勧めします。ブラウザは最初に認識された形式を使用します。

何らかの理由でブラウザがどの形式も認識しない場合は、代わりに「お使いのブラウザはビデオ要素をサポートしていません。最新バージョンに更新してください」というテキストが表示されます。

タグで気づいcontrolsたかもしれません。この要素には、再生エクスペリエンスをカスタマイズするための便利な属性が多数含まれています。

属性

controls

このcontrols属性は、再生/一時停止ボタンや音量スライダーなどのコントロールを表示するかどうかを処理します。

これはブール属性であり、trueまたはfalseのいずれかに設定できることを意味します。trueに設定するには、タグに追加するだけです。タグに存在しない場合はfalseに設定され、コントロールは表示されません。

autoplay

「自動再生」は、trueまたはfalseのいずれかに設定できます。タグに追加してtrueに設定します。タグに存在しない場合は、falseに設定します。trueに設定すると、再生できるように十分な量のビデオがバッファリングされるとすぐに、ビデオの再生が開始されます。多くの人は、自動再生ビデオを破壊的または迷惑だと感じています。したがって、この機能は慎重に使用してください。また、Safari for iOSなどの一部のモバイルブラウザは、この属性を無視することに注意してください。

これは別のブール属性です。含めることでautoplayタグ、埋め込まれたビデオは、すぐにそれを十分にバッファリングしているように再生を開始します。

多くの人が自動再生動画を混乱させたり煩わしく感じたりするので、この機能は慎重に使用してください。また、Safari for iOSなどの一部のモバイルブラウザは、この属性を完全に無視することに注意してください。

poster

poster属性は、ユーザーがクリックするまで、ビデオのショーはそれを再生するというイメージです。

ビデオは高価になる可能性があります

ページに動画を含めるのはこれまでになく簡単になりましたが、YouTube、Vimeo、Wistiaなどのサービスに動画をアップロードして、代わりにコードを埋め込む方がよい場合がよくあります。これは、サーバーコストの観点からも、データプランが限られている場合は視聴者にとっても、動画の配信に費用がかかる可能性があるためです。

独自のビデオファイルをホストすると、帯域幅に問題が発生する可能性があります。これは、読み込みが遅いビデオの途切れを意味する可能性があります。その上、ビデオの再生に関してはブラウザの品質が異なる傾向があるため、視聴者に表示される内容を正確に制御することは困難です。タグが埋め込まれたビデオをダウンロードするのも非常に簡単なので、著作権侵害が心配な場合は、他のオプションを検討することをお勧めします。

そしてそれで、あなたの心のコンテンツにビデオを埋め込んでください。またはそうではない-それはあなたの呼び出しです。