html5視頻

使用html5視頻背景

直到現在，仍然不存在一項旨在網頁上顯示視頻的標準。今天，大多數視頻是通過插件（比如 Flash）來顯示的。然而，並非所有瀏覽器都擁有同樣的插件。HTML5 規定了一種通過 video 元素來包含視頻的標準方法。

瀏覽器支持的視頻格式

當前，video 元素支持Ogg，MPEG4，WebM三種視頻格式,這三種格式瀏覽器支持情況如下：

Ogg 格式就是 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件，MPEG4格式就是 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件，mp4格式就屬於這個格式，WebM格式就是 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件。

使用video元素實現視頻播放

video元素的control 屬性供添加播放、暫停和音量控制項，<video> 與 </video> 之間插入的內容是供不支持 video 元素的瀏覽器顯示的，source 元素可以鏈接不同的視頻文件，解決瀏覽器相容視頻格式問題，下麵使用了二個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

使用自定按鈕來實現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，輸入網址www.ffmpeg.org(開源網址），進入windows中進行下載windows版本的文件。

2.解壓ffmpeg壓縮文件（以ffmpeg-20180803-5aeb3b0-win32-static.zip為例），再環境變數path中增加ffmpegbin目錄的路徑（G:\mydeveloperapplication\hbuilder\html5\ffmpeg-20180803-5aeb3b0-win32-static\bin）。

3.環境變數設置好後，然後在DOS命令窗體中鍵入ffmpeg，測試是否可運行。

4. 在DOS命令窗體中 切換到mp4視頻文件就在的目錄，最後鍵入ffmpeg -i 1.mp4  -acodec  libvorbis 1.ogg(這裡是將1.mp4裝換成1.ogg）。

5.ffmpeg詳細命令，請參賽https://www.cnblogs.com/dwdxdy/p/3240167.html，https://www.cnblogs.com/dwdxdy/p/3240167.html。