ホームページ > 記事 > ウェブフロントエンド > html5のvideo(ビデオ)要素の解析
この記事で共有した内容は、HTML5 のビデオ (video) 要素の分析に関するもので、困っている友人が参考になれば幸いです。
これまで、Webページ上にビデオを表示することを目的とした標準はまだありませんでした。現在、ほとんどのビデオは Flash などのプラグインを介して表示されます。ただし、すべてのブラウザに同じプラグインがあるわけではありません。 HTML5 では、video 要素を通じてビデオを含める標準的な方法を指定しています。
現在、video 要素は、Ogg、MPEG4、WebM の 3 つのビデオ形式をサポートしています。これらの 3 つの形式に対するブラウザのサポートは次のとおりです。
Firefox | Opera | Chrome | Safari | オッグ | いいえ3.5+10.5+ |
---|---|---|---|---|---|
いいえ | MPEG 4 | 9.0+ | いいえ | いいえ | |
3.0+ | WebM | いいえ | 4.0+ | 10.6+ | |
いいえ |
video 要素の control 属性は、39000f942b2545a5315c57fa3276f220 と a6a9c6d3f311dabb528ad355798dc27d の間に挿入されるコンテンツです。示されているように、source 要素は、ブラウザーのビデオ形式との互換性の問題を解決するために、異なるビデオ ファイルをリンクできます。以下では、上記の 5 つのブラウザーでビデオを再生できるようにするために、2 つの source 要素を使用します。簡単なコードは次のとおりです:
<video controls=" controls"> <source src="../videoAudio/1.mp4" type="audio/mp4"></source> <source src="../videoAudio/1.ogg" type="audio/ogg"></source> 该浏览器不支持该格式的视频播放 </video>Dom を使用してビデオを操作します
<video id="view"> <source src="../videoAudio/1.mp4" type="audio/mp4"></source><!--播放多个格式的视频--> <source src="../videoAudio/1.ogg" type="audio/ogg"></source> 该浏览器不支持视频格式 </video> <button onclick="play()">停止/开始</button><button onclick="toSmall()">缩小</button> <button onclick="toBig()">放大</button> <script> var v =document.getElementById("view"); function play(){ if(v.paused){ v.play();//播放 } else{ v.pause();//停止 } } function toSmall(){ v.width=300; v.height=300; } function toBig(){ v.width=500; v.height=500; } </script>ビデオ形式変換(MP4形式をogg形式に変換)
3. 環境変数を設定した後、DOS コマンド フォームに ffmpeg と入力して、実行できるかどうかをテストします。
4. DOS コマンド ウィンドウで、mp4 ビデオ ファイルが存在するディレクトリに切り替え、最後に ffmpeg -i 1.mp4 -acodec libvorbis 1.ogg と入力します (ここでは、1.mp4 を 1.ogg に置き換えます)。
おすすめの関連記事:
HTML5 と Internet+ を組み合わせて 3D トンネルを実現 (コード付き) H5 のキャンバス、ドラッグ アンド ドロップ イベント、オーディオとビデオのコード例
以上がhtml5のvideo(ビデオ)要素の解析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。