錯(cuò)誤太多了
成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè),成都做網(wǎng)站公司-成都創(chuàng)新互聯(lián)公司已向上1000家企業(yè)提供了,網(wǎng)站設(shè)計(jì),網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷等服務(wù)!設(shè)計(jì)與技術(shù)結(jié)合,多年網(wǎng)站推廣經(jīng)驗(yàn),合理的價(jià)格為您打造企業(yè)品質(zhì)網(wǎng)站。
首先video表現(xiàn)要放在body里面
其次width="400"這樣寫就行了
把所有的多余事件多去掉
!DOCTYPE html
html
head
link rel="stylesheet" herf="styles.css"
titleVideo Play/title
/head
body
video id="movies" autoplay="autoplay" width="400" height="300"
source src="越獄兔 第二季 14_clip0.ogv" /
source src="越獄兔 第二季 14_clip0.mp4"/
你的瀏覽器不支持html5
/video
/body
/html
video?autoplay="autoplay"?loop="loop"?src="video.ogg"/video
autoplay:當(dāng)視頻準(zhǔn)備就緒就開(kāi)始播放(不需要完全下載好,只要準(zhǔn)備好了能播的時(shí)候就會(huì)馬上播)
loop:循環(huán)播
new個(gè)video,指定播放列表的第一個(gè)視頻路徑為src。監(jiān)聽(tīng)end事件,回調(diào)里面把video的src改成列表的下一個(gè),再play
代碼示例:
var vList = ['視頻地址url1', 'url2', '...']; // 初始化播放列表
var vLen = vList.length; // 播放列表的長(zhǎng)度
var curr = 0; // 當(dāng)前播放的視頻
var video = new Video();
video.addEventListener('end', play);
play();
function play(e) {
video.src = vList[curr];
video.load(); // 如果短的話,可以加載完成之后再播放,監(jiān)聽(tīng) canplaythrough 事件即可
video.play();
curr++;
if (curr = vLen) curr = 0; // 播放完了,重新播放
}
可以實(shí)現(xiàn)html5 播放多個(gè)視頻。一個(gè)接一個(gè)的播放
在html網(wǎng)頁(yè)中添加視頻過(guò)程如下:
1、如圖,在項(xiàng)目文件中放置mp4格式的視頻,因?yàn)镠5只支持這類視頻,avi格式的不可以。
2、然后在自己的HTML編輯軟件建一個(gè)HTML5的文件,這里就用Hbuilder建立了。
3、然后添加video元素即可插入視頻,最好用autoplay設(shè)置自動(dòng)播放,controls設(shè)置控制欄。
4、source可以連接對(duì)應(yīng)的視頻文件資源,記得視頻資源路徑要寫正確。
5、這樣,等到HTML網(wǎng)頁(yè)加載之后視頻即可自動(dòng)的播放。
6、并且左邊有播放按鈕,視頻進(jìn)度控制條等工具。
7、右邊可以全屏播放,調(diào)節(jié)聲音大小,如果是放在服務(wù)器上面還可以下載喲,非常方便。
最常用的向HTML中插入視頻的方法有兩種,一種是古老的object/object標(biāo)簽,一種是html5中的video/video標(biāo)簽。
前者的兼容性沒(méi)得說(shuō),但是使用起來(lái)不太方便,后者使用起來(lái)很方便,但是兼容性讓人頭疼。
雖然后者兼容性存在很多問(wèn)題,但是因?yàn)槭褂煤芊奖?,符合未?lái)網(wǎng)頁(yè)設(shè)計(jì)發(fā)展的趨勢(shì),因此我們以后者為主要的插入視頻的方法,因?yàn)樗嫒菪缘膯?wèn)題,前者作為輔助。
許多時(shí)髦的網(wǎng)站都提供視頻。HTML5 提供了展示視頻的標(biāo)準(zhǔn)。
檢測(cè)您的瀏覽器是否支持 HTML5 視頻:
Check
Web 上的視頻
直到現(xiàn)在,仍然不存在一項(xiàng)旨在網(wǎng)頁(yè)上顯示視頻的標(biāo)準(zhǔn)。
今天,大多數(shù)視頻是通過(guò)插件(比如 Flash)來(lái)顯示的。然而,并非所有瀏覽器都擁有同樣的插件。
HTML5 規(guī)定了一種通過(guò) video 元素來(lái)包含視頻的標(biāo)準(zhǔn)方法。
視頻格式
當(dāng)前,video 元素支持三種視頻格式:
格式
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 文件
WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件
如何工作
如需在 HTML5 中顯示視頻,您所有需要的是:
video src="movie.ogg" controls="controls" /video
TIY
control 屬性供添加播放、暫停和音量控件。
包含寬度和高度屬性也是不錯(cuò)的主意。
video 與 /video 之間插入的內(nèi)容是供不支持 video 元素的瀏覽器顯示的:
實(shí)例
video src="movie.ogg" width="320" height="240" controls="controls" Your browser does not support the video tag. /video
TIY
上面的例子使用一個(gè) Ogg 文件,適用于Firefox、Opera 以及 Chrome 瀏覽器。
要確保適用于 Safari 瀏覽器,視頻文件必須是 MPEG4 類型。
video 元素允許多個(gè) source 元素。source 元素可以鏈接不同的視頻文件。瀏覽器將使用第一個(gè)可識(shí)別的格式:
實(shí)例
video width="320" height="240" controls="controls" source src="movie.ogg" type="video/ogg" source src="movie.mp4" type="video/mp4" Your browser does not support the video tag. /video
TIY
Internet Explorer
Internet Explorer 8 不支持 video 元素。在 IE 9 中,將提供對(duì)使用 MPEG4 的 video 元素的支持。
video 標(biāo)簽的屬性
屬性
值
描述
autoplay autoplay 如果出現(xiàn)該屬性,則視頻在就緒后馬上播放。
controls controls 如果出現(xiàn)該屬性,則向用戶顯示控件,比如播放按鈕。
height pixels 設(shè)置視頻播放器的高度。
loop loop 如果出現(xiàn)該屬性,則當(dāng)媒介文件完成播放后再次開(kāi)始播放。
preload preload
如果出現(xiàn)該屬性,則視頻在頁(yè)面加載時(shí)進(jìn)行加載,并預(yù)備播放。
如果使用 "autoplay",則忽略該屬性。
src url 要播放的視頻的 URL。
width pixels 設(shè)置視頻播放器的寬度。
經(jīng)測(cè)試,有以下供參考:
代碼如下:
!DOCTYPE?html
html
body
embed?src="intro.wmv"?width="320"?height="240"/
/body
/html
在 IE 11 瀏覽器 + Win10 64位中,運(yùn)行正常:
在 Chrome?中訪問(wèn),會(huì)彈出“另存為”對(duì)話框:
將源代碼修改:
embed?src="intro.wmv"?width="320"?height="240"?type="video/x-ms-wmv"/
瀏覽效果:
1、IE?正常顯示
2、Chrome :該插件不受支持
綜上所述:
1、html 代碼本身沒(méi)問(wèn)題。
2、從截圖看,能顯示播放器框架,說(shuō)明客戶端能正確載入 wmv?播放器。不能播放?wmv?原因,推測(cè)可能是?yi.wmv?不能被播放器正確解析(原因有多種,如 wmv?打包格式、版權(quán)證書限制等)。