html5中video（影片）元素的分析

這篇文章給大家分享的內容是關於html5中video（影片）元素的分析，有一定的參考價值，有需要的朋友可以從參考一下，希望對你有所幫助。

使用html5影片背景

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

瀏覽器支援的影片格式

目前，video 元素支援Ogg，MPEG4，WebM三種影片格式,這三種格式瀏覽器支援情況如下：

格式	#IE	Firefox	Opera	Chrome	#Safari
#Ogg	No	3.5	10.5	5.0	No
#MPEG 4	9.0	#No	No	5.0	3.0
#WebM	No	4.0	10.6	6.0	No

# 

 

 

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

使用video元素實現視訊播放

video元素的control 屬性供添加播放、暫停和音量控件， 之間插入的內容是供不支援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為例），再環境變數path5\ffmpegbin目錄的路徑（G:\mydeveloperapplication\ilder\html5\ffmpegbin -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詳細命令。

相關文章推薦：

HTML5結合網路實現的3D隧道（附程式碼）

H5中​​畫布、拖曳事件以及音視頻的程式碼實例

#

以上是html5中video（影片）元素的分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！