html5のvideo(ビデオ)要素の解析-H5 チュートリアル-php.cn

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

不言

リリース： 2018-08-06 11:09:24

オリジナル

4354 人が閲覧しました

この記事で共有した内容は、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	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 に置き換えます)。