html5 video事件怎么用

video有一下屬性

目前創(chuàng)新互聯已為超過千家的企業(yè)提供了網站建設、域名、網站空間、綿陽服務器托管、企業(yè)網站設計、山海關網站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協力一起成長，共同發(fā)展。

src ：視頻的屬性

poster：視頻封面，沒有播放時顯示的圖片

preload：預加載

autoplay：自動播放

loop：循環(huán)播放

controls：瀏覽器自帶的控制條

width：視頻寬度

height：視頻高度

html 代碼：

video id="media" src="" controls width="400px" heigt="400px"/video ?

//audio和video都可以通過JS獲取對象,JS通過id獲取video和audio的對象

獲取video對象：

Media = document.getElementById("media");

Media方法和屬性：

HTMLVideoElement和HTMLAudioElement 均繼承自HTMLMediaElement

Media.error; //null:正常

Media.error.code; //1.用戶終止 2.網絡錯誤 3.解碼錯誤 4.URL無效

//網絡狀態(tài)?

- Media.currentSrc; //返回當前資源的URL

- Media.src = value; //返回或設置當前資源的URL

- Media.canPlayType(type); //是否能播放某種格式的資源

- Media.networkState; //0.此元素未初始化 1.正常但沒有使用網絡 2.正在下載數據 3.沒有找到資源

- Media.load(); //重新加載src指定的資源

- Media.buffered; //返回已緩沖區(qū)域，TimeRanges

- Media.preload; //none:不預載 metadata:預載資源信息 auto:

//準備狀態(tài)?

- Media.readyState;//1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA

- Media.seeking; //是否正在seeking

//回放狀態(tài)

Media.currentTime = value; //當前播放的位置，賦值可改變位置

Media.startTime; //一般為0，如果為流媒體或者不從0開始的資源，則不為0

Media.duration; //當前資源長度 流返回無限

Media.paused; //是否暫停

Media.defaultPlaybackRate = value;//默認的回放速度，可以設置

Media.playbackRate = value;//當前播放速度，設置后馬上改變

Media.played; //返回已經播放的區(qū)域，TimeRanges，關于此對象見下文

Media.seekable; //返回可以seek的區(qū)域 TimeRanges

Media.ended; //是否結束

Media.autoPlay; //是否自動播放

Media.loop; //是否循環(huán)播放

Media.play(); //播放

Media.pause(); //暫停

//視頻控制

Media.controls;//是否有默認控制條

Media.volume = value; //音量

Media.muted = value; //靜音

TimeRanges(區(qū)域)對象

TimeRanges.length; //區(qū)域段數

TimeRanges.start(index) //第index段區(qū)域的開始位置

TimeRanges.end(index) //第index段區(qū)域的結束位置

//相關事件

var?eventTester?=?function(e){

Media.addEventListener(e,function(){

console.log((new?Date()).getTime(),e)

},false);

}

eventTester("loadstart"); //客戶端開始請求數據

eventTester("progress"); //客戶端正在請求數據

eventTester("suspend"); //延遲下載

eventTester("abort"); //客戶端主動終止下載（不是因為錯誤引起）

eventTester("loadstart"); //客戶端開始請求數據

eventTester("progress"); //客戶端正在請求數據

eventTester("suspend"); //延遲下載

eventTester("abort"); //客戶端主動終止下載（不是因為錯誤引起），

eventTester("error"); //請求數據時遇到錯誤

eventTester("stalled"); //網速失速

eventTester("play"); //play()和autoplay開始播放時觸發(fā)

eventTester("pause"); //pause()觸發(fā)

eventTester("loadedmetadata"); //成功獲取資源長度

eventTester("loadeddata"); //

eventTester("waiting"); //等待數據，并非錯誤

eventTester("playing"); //開始回放

eventTester("canplay"); //可以播放，但中途可能因為加載而暫停

eventTester("canplaythrough"); //可以播放，歌曲全部加載完畢

eventTester("seeking"); //尋找中

eventTester("seeked"); //尋找完畢

eventTester("timeupdate"); //播放時間改變

eventTester("ended"); //播放結束

eventTester("ratechange"); //播放速率改變

eventTester("durationchange"); //資源長度改變

eventTester("volumechange"); //音量改變

您的瀏覽器不支持HTML5 VIDEO

html5的video標簽只有部分瀏覽器支持，對于IE只有9.0+以上的版本才支持，所以對于視頻播放要做兼容，下載所需要的源文件：html5media.min.js，flowplayer.controls.swfflowplayer.swf即可解決。詳細步驟：

1、首先下載所需要的源文件：html5media.min.js，flowplayer.controls.swfflowplayer.swf。

2、然后將解壓后的js文檔和swf文檔放在同一目錄下，在head部分引入js文檔，

3、然后在要引入視頻的位置放入video標簽，通常放置在div內

4、width:為視頻播放寬度，height：為視頻播放高度，如果視頻大笑適中這里可以不設置，播放器會自動加載視頻的原始大小。

如果視頻原始大小太大，但不清楚比例，可以只設置高度或者寬度。另外一個設置為auto自動適應，這樣視頻不會變形。

如果想要視頻自動播放，可在video標簽中加入autoplay標簽。

5、src為視頻源文件的路徑，poster為視頻播放前顯示的圖片。為播放切換的自然，這里可以設置成視頻播放的第一個畫面截圖。

preload：為預加載視頻，設置為auto代表自動加載。

source標簽可以省略，但是video標簽內的src屬性不能省略，如果省略，在IE瀏覽器中會報錯。

所以最后精簡后的源碼可以如下圖所示這樣。

6、如果調試過程中，其他瀏覽器沒有問題，但是ie總是有問題的話，清空ie瀏覽器的緩存再調試。清空緩存步驟如下，先找到Internet工具

7、進入后，點擊瀏覽歷史下面的刪除按鈕。

8、清除如下內容即可，完成后，再用IE刷新頁面。

HTML5里video標簽支持哪些格式的視頻文件？

一共支持三種格式: Ogg、MPEG4、WebM。

HTML5是構建Web內容的一種語言描述方式。HTML5是互聯網的下一代標準，是構建以及呈現互聯網內容的一種語言方式．被認為是互聯網的核心技術之一。HTML產生于1990年，1997年HTML4成為互聯網標準，并廣泛應用于互聯網應用的開發(fā)。

HTML5是Web中核心語言HTML的規(guī)范，用戶使用任何手段進行網頁瀏覽時看到的內容原本都是HTML格式的，在瀏覽器中通過一些技術處理將其轉換成為了可識別的信息。

HTML5在從前HTML4.01的基礎上進行了一定的改進，雖然技術人員在開發(fā)過程中可能不會將這些新技術投入應用，但是對于該種技術的新特性，網站開發(fā)技術人員是必須要有所了解的。

HTML5 是HyperText Markup Language 5 的縮寫，HTML5技術結合了 HTML4.01 的相關標準并革新，符合現代網絡發(fā)展要求，在 2008 年正式發(fā)布。HTML5 由不同的技術構成，其在互聯網中得到了非常廣泛的應用，提供更多增強網絡應用的標準機。

與傳統(tǒng)的技術相比，HTML5 的語法特征更加明顯，并且結合了SVG的內容。這些內容在網頁中使用可以更加便捷地處理多媒體內容，而且 HTML5中還結合了其他元素，對原有的功能進行調整和修改，進行標準化工作。HTML5 在 2012 年已形成了穩(wěn)定的版本。

HTML5中 使用video標簽 播放本地視頻

1、新建一個html文件，命名為test.html，用于介紹如何使用video控制視頻。

2、在test.html頁面，使用button標簽創(chuàng)建四個按鈕，分別是播放/暫停、大、中、小，用于控制視頻的播放效果。同時，使用video標簽創(chuàng)建一個視頻。

3、給每個按鈕綁定onclick點擊事件，當按鈕被點擊時，分別執(zhí)行相應的函數來控制視頻的播放效果。

4、使用document.getElementById()獲得視頻對象，創(chuàng)建“播放/暫停”的playPause()函數，使用play()方法控制視頻的播放，使用pause()控制視頻的暫停。

5、創(chuàng)建makeBig（）函數，當點擊"大"按鈕時，使視頻以寬度560px來播放視頻。

6、創(chuàng)建makeNormal()函數與makeSmall()函數，當點擊“中”按鈕時，使視頻以寬度420px來播放視頻，當點擊“小”按鈕時，使視頻以寬度320px來播放視頻。

7、在瀏覽器打開test.html文件，測試js控制視頻播放的效果。

html5 video是什么？

video 標簽是 HTML 5 的新標簽，video 標簽定義視頻，比如電影片段或其他視頻流。，記得實戰(zhàn)幫有一個課酬專門是介紹video 標簽的

html5 video標簽的用法

HTML 5 video 標簽

定義和用法

video 標簽定義視頻，比如電影片段或其他視頻流。

提示和注釋

提示：可以在開始標簽和結束標簽之間放置文本內容，這樣老的瀏覽器就可以顯示出不支持該標簽的信息。

屬性

實例

!--?一段簡單的?HTML5?視頻：--

video?src="movie.ogg"?controls="controls"您的瀏覽器不支持?video?標簽。/video

網頁標題：videohtml5,html的video標簽
文章位置：http://chinadenli.net/article25/dsehpci.html

成都網站建設公司_創(chuàng)新互聯，為您提供網站設計、電子商務、網站設計公司、域名注冊、微信公眾號、小程序開發(fā)

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯