ここで、ページ内で video タグを使用したい場合は、Ogg Theora または VP8 をサポートする状況 (これに何も起こらない場合) (Opera、Mozilla、Chrome) と、H をサポートする状況の 3 つの状況を考慮する必要があります。 264 (Safari、IE 9、Chrome)、サポートされていません (IE6、7、8)。さて、ビデオ タグの使用、ビデオ オブジェクトで使用できるメディア属性とメソッド、メディア イベントなど、技術的な観点から HTML 5 ビデオを理解しましょう。この記事では主に HTML にビデオを挿入する方法の概要を紹介します。困っている友達が参考になれば幸いです。
Video タグの使用法
Video タグには、src、poster、preload、autoplay、loop、controls、width、height などのいくつかの属性と、内部で使用されるタグ
(1) src属性とposter属性
src属性が何に使われるかは想像できると思います。 タグと同様に、この属性はビデオのアドレスを指定するために使用されます。 poster属性は、現在のビデオデータが無効な場合に表示する画像(プレビュー画像)を指定するために使用される。無効なビデオ データは、ビデオがロード中であること、ビデオ アドレスが正しくないことなどを意味する可能性があります。
<video width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay"></video>
(2) preload 属性
この属性は、ビデオがプリロードされるかどうかを定義するために使用されます。この属性には、none、metadata、auto の 3 つのオプションの値があります。この属性が使用されない場合、デフォルトは auto です。
<video width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none"></video>
(3) autoplay 属性
も名前を見れば用途が分かる属性です。 Autoplay 属性は、ビデオを自動的に再生するかどうかを設定するために使用されます。これはブール型の属性です。表示されている場合は、自動再生されていないことを意味します。<video width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none"></video>
(4) ループ属性
<video width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" loop="loop"></video>
(5) Controls 属性
<video width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none" controls="controls"></video>
(6) width属性とheight属性
はタグの共通属性なので言うまでもありません。
(7) ソースタグ
<video width="658" height="444" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none" controls="controls"><source src="http://www.youname.com/images/first.ogv" /><source src="http://www.youname.com/images/first.ogg" /></video>