html5播放視頻文件代碼

⑴ 怎樣實現 html5 多個視頻在同一個<video>標簽上播放

new個video，指定播放列表的第一個視頻路徑為src。監聽end事件，回調裡面把video的src改成列表的下一個，再play

代碼示例：

varvList=['視頻地址url1','url2','...'];//初始化播放列表
varvLen=vList.length;//播放列表的長度

varcurr=0;//當前播放的視頻
varvideo=newVideo();
video.addEventListener('end',play);
play();

functionplay(e){
video.src=vList[curr];
video.load();//如果短的話，可以載入完成之後再播放，監聽canplaythrough事件即可
video.play();

curr++;
if(curr>=vLen)curr=0;//播放完了，重新播放
}

可以實現html5 播放多個視頻。一個接一個的播放

⑵ 在HTML5中，視頻應如何播放

實現網頁在線視頻播放的幾種方法主要有三種：使用HTML5的video標簽，使用Flash插件，以及使用HTML5的canvas元素和JavaScript。

首先，HTML5的video標簽是最簡單和最常見的方式。你只需在HTML代碼中添加一個video標簽，然後通過src屬性指定視頻文件的路徑。

例如：您的瀏覽器不支持Video標簽。

這段代碼會在支持的瀏覽器中顯示一個視頻播放器，用戶可以點擊播放、暫停等控制按鈕。如果瀏覽器不支持video標簽，就會顯示標簽內的文字。

其次，Flash插件是早期的網頁視頻播放解決方案，但由於其安全性和性能問題，現在已經逐漸被HTML5取代。使用Flash需要安裝插件，而且並非所有瀏覽器都支持，所以它的應用范圍已經越來越小。

最後，HTML5的canvas元素和JavaScript可以實現更復雜的視頻播放控制，比如視頻濾鏡、實時視頻處理等。這需要較高的編程技巧，但可以實現更多的創新和定製化功能。例如，你可以使用canvas的drawImage方法將視頻幀繪制到canvas上，然後通過JavaScript控制播放和暫停。

總的來說，這三種方法各有優缺點，你可以根據具體的需求和情況選擇適合的方法。如果你只需要簡單的視頻播放功能，那麼HTML5的video標簽是最方便的選擇。如果你需要更多的控制和定製化功能，那麼可以考慮使用canvas和JavaScript。而Flash由於其局限性，現在已經不推薦使用。

⑶ html5如何實現自動播放視頻

我們使抄用html5的video標簽，可以不依賴於任何第三方的插件或控制項，直接在瀏覽器中實現視頻播放功能。

註：html5的video標簽目前只支持播放.mp4、.ogg、.webm等幾種格式的視頻文件，暫不支持其他格式的視頻文件。此外，不同的html5瀏覽器支持的視頻文件格式也略有不同，這種狀況可能會在未來的html5中得以改善。

⑷ html中怎麼實現自動播放視頻與音樂文件

HTML5中的video和audio標簽中有一個autoplay屬性，添加這個屬性後就會在文件載入完成以後自動播放。具體代碼如下：

video：

<videoautoplay="autoplay">
<sourcesrc="視頻路徑"/>
</video>

audio：

<audioautoplay="autoplay">
<sourcesrc="視頻路徑"/>
</audio>

除此屬性外還有如下屬性：

height：設置視頻播放器的高度。

loop：如果出現該屬性，則當媒介文件完成播放後再次開始播放。

URL：要播放的視頻的 URL。

⑸ 如何使用html5播放視頻

1、<video src="hangge.mp4" controls></video>1

2，通過width和height設置視頻窗口大小
<video src="hangge.mp4" controls width="400" height="300"></video>1

3，預載入媒體文件
設置preload不同的屬性值，可以告訴瀏覽器應該怎樣載入一個媒體文件：
（1）值為auto：讓瀏覽器自動下載整個文件
（2）值為none：讓瀏覽器不必預先下載文件
（3）值為metadata：讓瀏覽器先獲取視頻文件開頭的數據塊，從而足以確定一些基本信息（比如視頻的總時長，第一幀圖像等）
<!-- 用戶點擊播放才開始下載 --><video src="hangge.mp4" controls preload="none"></video>12

4，自動播放
（1）使用autoplay屬性可以讓瀏覽器載入完視頻文件後立即播放。
<video src="hangge.mp4" controls autoplay></video>1

（2）如果啟用自動播放，可以將播放器設置為muted狀態。這樣自動播放時會靜音，防止用戶厭煩。用戶需要的話可以點擊播放器揚聲器圖標重新打開聲音。
<video src="hangge.mp4" controls autoplay muted></video>1

5，循環播放
使用loop屬性讓視頻播放結束時，再從頭開始播放。
<video src="hangge.mp4" controls loop></video>1

6，設置替換視頻的圖片（封面圖片）
通過poster屬性可以設置，瀏覽器在下面三種情況下會使用這個圖片：
（1）視頻第一幀未載入完畢
（2）把preload屬性設置為none
（3）沒有找到指定的視頻文件
<video src="hangge.mp4" controls poster="hangge.png"></video>1

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">
</video>1234

（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>
</video>1234567891011

（3）也有人優先使用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>