现在如果要在页面中使用ビデオ标签、需要考虑三种情况、支持ogg theora Chrome)はサポートしていません(IE6、7、8)。さて、ビデオタグの使用、ビデオオブジェクトが使用できるメディア属性と方法、メディアイベントなど、技術レベルのHTML 5ビデオを理解しましょう。
ビデオラベルの使用ビデオタグには、SRC、ポスター、プリロード、オートプレイ、ループ、コントロール、幅、高さ、およびその他の属性、および内部で使用されるラベル<source>が含まれています。 <source>ラベルに加えて、ビデオタグには、指定されたビデオを再生できないときに返されるコンテンツを含めることもできます。
(1)SRC属性とPOSER属性SRC属性が何をするかを想像できますか。 <img>ラベルと同様に、この属性はビデオのアドレスを指定するために使用されます。ポスター属性は、現在のビデオデータが無効なときに表示(プレビュー図)を表示する画像を指定するために使用されます。無効なビデオデータは、ビデオがロードされている可能性があり、これがビデオアドレスのエラーである可能性があります。
<ビデオ幅= 658高さ= 444 src = http://www.youname.com/images/first.mp4ポスター= http://www.youname.com/images/first.png toplay> </video>(2)プリロード属性
この属性は、この属性を使用して、ビデオが事前にロードされているかどうかを定義することもできます。 3つのオプションの値があります:なし、メタデータ、自動。この属性が使用されていない場合、デフォルトは自動化されます。
<ビデオ幅= 658高さ= 444 src = http://www.youname.com/images/first.mp4ポスター= http://www.youname.com/images/first.png toplay preoad = none> </video >
なし:プリロードなし。この属性値を使用すると、ページプロデューサーはユーザーがこのビデオを期待していないか、HTTP要求を削減していると考えている可能性があります。
メタデータ:部分的なプリロード。この属性値を使用して、ページプロデューサーは、ユーザーがこのビデオを期待していないが、ユーザーにいくつかのメタデータ(サイズ、最初のフレーム、トラックリスト、期間などを含む)を提供すると考えています。
Auto:すべてのプリロード。
(3)オートプレイ属性名前に依存する別の属性は目的を知っています。 Autoplay属性は、ビデオが自動的に再生されるかどうかをビデオを設定するために使用されます。これはブール属性です。それが現れるとき、それは自動再生を意味します。つまり、それは再生されません。
<ビデオ幅= 658高さ= 444 src = http://www.youname.com/images/first.mp4ポスター= http://www.youname.com/images/first.png toplay preoad = none> </video >
HTMLのブール属性の値は真実ではなく偽ではないことに注意してください。正しい使用法は、ラベルでこの属性を使用すると、この時点では価値がないか、その値は彼の名前に等しいということです(ここでは、<ビデオオートプレイ />または<Video Autoplay = autoplay />を再生することです。 );この属性がラベルで使用されていない場合、それはfalseを意味します(自動再生は<ビデオ />)。
(4)ループ属性<ビデオ幅= 658高さ= 444 src = http://www.youname.com/images/first.mp4ポスター= http://www.youname.com/images/first.pngトップレイループ=ループ> </ビデオ/ビデオ>
ループ属性がビデオが循環されているかどうかを指定するためにも使用されることは明らかです。これもブール属性です。
(5)コントロール属性<ビデオ幅= 658高さ= 444 src = http://www.youname.com/images/first.mp4ポスター= http://www.youname.com/images/first.png </video>
コントロール属性は、ブラウザに示すために使用され、ページプロデューサーがスクリプトを使用して再生コントローラーを生成しないことを示し、ブラウザは再生コントロールバーを使用する必要があります。
コントロールバーには、Play Pause Control、Play Progress Control、Volume Controlなどを含める必要があります。
各ブラウザのデフォルトの再生コントロールバーは、インターフェイスで異なります。ブラウザの奇妙な問題のため、FirefoxとSafariのビデオラベルは正常ではないため、これら2つはオンラインでスクリーンショットしか見つけることができません。
(6)幅の属性と高さの属性ユニバーサル属性はラベルに属しているため、これを言う必要はありません。
(7)ソースタグ<ビデオ幅= 658高さ= 444ポスター= http://www.youname.com/images/firs/png autoplay = autoplay preload = none controls> <source s> <source s rc = http://www.youname。 com/images /firtst.ogv/> <source src = http://www.youname.com/images/first.ogg/> </video>
ソースラベルは複数のオプションを指定するために使用されます(オーディオタグにはこのラベルも含めることができるため、ビデオの代わりにメディアを使用します)(ブラウザは最終的に1つのみを選択できます)SRC属性を使用する場合。
ブラウザは、ソースラベルで指定されたビデオを再生できるかどうかを検出できます(ビデオ形式がサポートされていない場合、ビデオが存在しない場合など)。この方法は、主に異なるブラウザに使用されます。ソースタグ自体は意味を意味するものではなく、単独で表示することはできません。
このラベルには、SRC、タイプ、メディアの3つの属性が含まれています。
SRC属性:ビデオラベルと同じメディアのアドレスを指定するために使用されます。
タイプ属性:SRC属性指定されたメディアのタイプを説明するために使用され、ブラウザがメディアを取得する前にそのようなメディア形式をサポートするかどうかを判断するのに役立ちます。
メディアの属性:メディアがメディアで使用される場所を説明するために使用され、デフォルト値がすべて設定されていない場合、すべてのメディアをサポートすることを意味します。 <style>ラベルのメディア属性を思いますか?同じ。
(8)完全な例<ビデオ幅= 658高さ= 444ポスター= http://www.youname.com/images/firs/png autoplay = autoplay preload = none controls> <source s> <source s rc = http://www.youname。 com/images /firtst.ogv/> <source src = http://www.youname.com/images/first.ogg/> </video>
このコードでは、このビデオのプレビューはポスターの属性値であり、ブラウザのデフォルトのメディアコントロールバーを表示し、ビデオのメタデータ、円形再生、幅900ピクセル、240ピクセルのエッセンスの高さ
最初のソースラベルのビデオアドレス、SRC属性値、ビデオカテゴリはoggビデオ、ビデオコーディングデコーダーは理論、オーディオコーディングデコーダーはvorbis、再生メディアはディスプレイですアドレスはもうビデオアドレスが疲れなくなっていません。 IEと互換性がある場合は、最後のソースラベルの後にフラッシュプレーヤーのラベルセットを追加するか、少しJavaScriptコードを使用できます。
要約します上記は、Xiaobianによって紹介されたHTML Webページにビデオを挿入する方法の要約です。 VEVBウーリンのウェブサイトへのご支援ありがとうございます!