html5のvideo(ビデオ)要素の解析

この記事で共有した内容は、HTML5 のビデオ (video) 要素の分析に関するもので、困っている友人が参考になれば幸いです。

HTML5ビデオ背景の使用

これまで、Webページ上にビデオを表示することを目的とした標準はまだありませんでした。現在、ほとんどのビデオは Flash などのプラグインを介して表示されます。ただし、すべてのブラウザに同じプラグインがあるわけではありません。 HTML5 では、video 要素を通じてビデオを含める標準的な方法を指定しています。

ブラウザでサポートされているビデオ形式

現在、video 要素は、Ogg、MPEG4、WebM の 3 つのビデオ形式をサポートしています。これらの 3 つの形式に対するブラウザのサポートは次のとおりです。

IE 5.0+5.0+6.0 +Ogg 形式は、Theora ビデオ エンコーディングと Vorbis オーディオ エンコーディングを備えた Ogg ファイルであり、MPEG4 形式は、H.264 ビデオ エンコーディングと AAC オーディオ エンコーディングを備えた MPEG 4 ファイルですmp4 形式はこの形式に属し、WebM 形式は VP8 ビデオ エンコーディングと Vorbis オーディオ エンコーディングを備えた WebM ファイルです。

Firefox	Opera	Chrome	Safari	オッグ	いいえ3.5+10.5+
いいえ		MPEG 4	9.0+	いいえ	いいえ
3.0+		WebM	いいえ	4.0+	10.6+
いいえ

video 要素を使用してビデオ再生を実装します

video 要素の control 属性は、 の間に挿入されるコンテンツです。示されているように、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 を使用してビデオを操作します

カスタム ボタンを使用して、controls 属性の再生、一時停止、およびビデオ サイズの制御を実装します。

<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形式に変換）

1.まずffmpegをダウンロードし、URL www.ffmpeg.org (オープンソースURL)を入力し、windowsと入力してファイルのWindowsバージョンをダウンロードします。

2. ffmpeg 圧縮ファイル (ffmpeg-20180803-5aeb3b0-win32-static.zip を例にします) を解凍し、ffmpegbin ディレクトリ (G: mydeveloperapplicationhbuilderhtml5ffmpeg-20180803-5aeb3b0-win32-staticbin) へのパスを追加します。環境変数のパス。

3. 環境変数を設定した後、DOS コマンド フォームに ffmpeg と入力して、実行できるかどうかをテストします。
4. DOS コマンド ウィンドウで、mp4 ビデオ ファイルが存在するディレクトリに切り替え、最後に ffmpeg -i 1.mp4 -acodec libvorbis 1.ogg と入力します (ここでは、1.mp4 を 1.ogg に置き換えます)。

5.ffmpegの詳細なコマンド。

おすすめの関連記事:

HTML5 と Internet+ を組み合わせて 3D トンネルを実現 (コード付き)

H5 のキャンバス、ドラッグ アンド ドロップ イベント、オーディオとビデオのコード例

以上がhtml5のvideo(ビデオ)要素の解析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。