我們使用html5的video標簽，可以不依賴于任何第三方的插件或控件，直接在瀏覽器中實現視頻播放功能。
創(chuàng)新互聯建站-專業(yè)網站定制、快速模板網站建設、高性價比安仁網站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式安仁網站制作公司更省心,省錢,快速模板網站建設找我們，業(yè)務覆蓋安仁地區(qū)。費用合理售后完善，十余年實體公司更值得信賴。
在了解了video標簽之后，下面我們就使用html5的video標簽來實現視頻播放。
現在，我們打開瀏覽器，看一看具體的效果：
為了更好地兼容各種瀏覽器，你可以為一個video標簽添加多個source子標簽，每個source標簽引用一個不同格式的視頻文件。這樣，html5瀏覽器會自動在這些source標簽中從上到下依次尋找并識別出該瀏覽器可以播放的第一個視頻文件并進行播放，從而實現兼容多個瀏覽器的視頻播放功能。
注：html5的video標簽目前只支持播放.mp4、.ogg、.webm等幾種格式的視頻文件，暫不支持其他格式的視頻文件。此外，不同的html5瀏覽器支持的視頻文件格式也略有不同，這種狀況可能會在未來的html5中得以改善。
您好，推薦您使用div
div????
video?class="Vidage"?preload="metadata"?loop?autoplay????
source?src="videos/bg.mp4"?type="video/mp4"????
/video????
/div
附CSS代碼
.Vidage{
position:?fixed;
right:?0;
bottom:?0;
min-width:?100%;
min-height:?100%;
width:?auto;
height:?auto;
z-index:?-9999;
}
[img]今天在使用video播放本地視頻時，遇到問題，進度條能移動，有聲音，但是沒有圖像。
網上查找了很多資料，各種方法都嘗試了，包括使用video.js插件，也是出現同樣的問題，后來有一篇文章給出了解決方法：
可以使用格式工廠轉換視頻格式，mp4的視頻編碼有三種：MPEG4(DivX),MPEG4(Xvid),AVC(H264)，轉換成AVC(H264)編碼，就能正常播放。
原文地址：
HTML5支持的視頻格式在HTML5中嵌入的視頻格式主要包括ogg、mpeg4、wehm等。
具體介紹如下：
ogg：一種開源的視頻封裝容器，其視頻文件擴展名為ogg，里面可以封裝vobris音頻編碼或者theora視頻編碼，同時ogg文件也能將音頻編碼和視頻編碼進行混合封裝。
mpeg4：目前最流行的視頻格式，其視頻文件擴展名為mp4。
同等條件下，mpeg4格式的視頻質量較好，但它的專利被MPEG－LA公司控制，任何支持播放mpeg4視頻的設備，都必須有一張MPEG－LA頒發(fā)的許可證。
擴展資料：
1、視頻格式是視頻播放軟件為了能夠播放視頻文件而賦予視頻文件的一種識別符號。
2、3GP是一種3G流媒體的視頻編碼格式，主要是為了配合3G網絡的高傳輸速度而開發(fā)的，也是目前手機中最為常見的一種視頻格式。
3、MPEG（運動圖像專家組）是Motion Picture Experts Group 的縮寫，這類格式包括了MPEG－1，MPEG－2和MPEG－4在內的多種視頻格式。
4、AVI，音頻視頻交錯（Audio Video Interleaved）的英文縮寫，AVI這個由微軟公司發(fā)布的視頻格式，在視頻領域可以說是最悠久的格式之一。
5、一種獨立于編碼方式的在Internet上實時傳播多媒體的技術標準，Microsoft公司希望用其取代QuickTime之類的技術標準以及WAV、AVI之類的文件擴展名。
1、video src="hangge.mp4" controls/video1
2，通過width和height設置視頻窗口大小
video src="hangge.mp4" controls width="400" height="300"/video1
3，預加載媒體文件
設置preload不同的屬性值，可以告訴瀏覽器應該怎樣加載一個媒體文件：
（1）值為auto：讓瀏覽器自動下載整個文件
（2）值為none：讓瀏覽器不必預先下載文件
（3）值為metadata：讓瀏覽器先獲取視頻文件開頭的數據塊，從而足以確定一些基本信息（比如視頻的總時長，第一幀圖像等）
!-- 用戶點擊播放才開始下載 --video src="hangge.mp4" controls preload="none"/video12
4，自動播放
（1）使用autoplay屬性可以讓瀏覽器加載完視頻文件后立即播放。
video src="hangge.mp4" controls autoplay/video1
（2）如果啟用自動播放，可以將播放器設置為muted狀態(tài)。這樣自動播放時會靜音，防止用戶厭煩。用戶需要的話可以點擊播放器揚聲器圖標重新打開聲音。
video src="hangge.mp4" controls autoplay muted/video1
5，循環(huán)播放
使用loop屬性讓視頻播放結束時，再從頭開始播放。
video src="hangge.mp4" controls loop/video1
6，設置替換視頻的圖片（封面圖片）
通過poster屬性可以設置，瀏覽器在下面三種情況下會使用這個圖片：
（1）視頻第一幀未加載完畢
（2）把preload屬性設置為none
（3）沒有找到指定的視頻文件
video src="hangge.mp4" controls poster="hangge.png"/video1
7，瀏覽器兼容，如何讓每一個瀏覽器都能順利播放視頻
現在大部分瀏覽器都能支持H.264格式的視頻，但Opera瀏覽器卻一直不支持。我們需要通過后備措施保證每個人都能看到視頻，通常有下面幾種方案：
（1）使用多種視頻格式
video和audio元素有個內置的格式后備系統。我們不使用src屬性，而是在其內部嵌套一組source元素，瀏覽器會選擇播放第一個它所支持的文件。
我們可以添加WebM格式的視頻提供對Opera的支持。
video controls
source src="hangge.mp4" type="video/mp4"
source src="hangge.webm" type="video/webm"
/video1234
（2）添加Flash后備措施（推薦）
上面那個方法不推薦，應為Opera瀏覽器只占不到1%的份額。特意為它把視頻都轉碼一邊太費事。使用Flash作為備用播放方案還是很方便的，同時Flash還能兼容IE8這種連video元素都不支持的老瀏覽器。
這里使用Flowplayer Flash作為備用播放器（本地下載 ：flowplayer-3.2.18.zip）
video controls
source src="hangge.mp4" type="video/mp4"
source src="hangge.webm" type="video/webm"
object id="flowplayer" width="400" height="300"
data="flowplayer-3.2.18.swf"
type="application/x-shockwave-flash"
param name="movie" value="flowplayer-3.2.18.swf"
param name="flashvars" value='config={"clip":"hangge.mp4"}'
/object
/video1234567891011
（3）也有人優(yōu)先使用Flash，而HTML5作為后備措施。
這么做是因為Flash普及率比較高，而HTML5作為后備可以擴展iPad和iPhone用戶
object id="flowplayer" width="400" height="300" data="flowplayer-3.2.18.swf" type="application/x-shockwave-flash"
param name="movie" value="flowplayer-3.2.18.swf"
param name="flashvars" value='config={"clip":"hangge.mp4"}'
video controls
source src="hangge.mp4" type="video/mp4"
source src="hangge.webm" type="video/webm"
/video
/object
重慶分公司
重慶分公司
