大多數(shù)的視頻通過插件(例如flash)來播放主慰,然而并非所有的瀏覽器都支持此類插件。HTML5規(guī)定了一種通過video來包含視頻的標(biāo)準(zhǔn)方法禾蚕。但是IE8及以下版本不支持video。
HTML5的video的視頻播放器在項(xiàng)目中經(jīng)常用到,寫篇文章總結(jié)下其基本用法熬苍,本文涉及html5的video標(biāo)簽的屬性、方法和事件。
video標(biāo)簽的屬性:
src:要播放視頻的URL柴底;(src=“URL”)
poster:視頻的封面婿脸,視頻未播放時(shí)顯示的圖片;(poster=“URL”)
controls:是否顯示控件柄驻;(此為bolean值狐树,controls 或 controls=“controls”時(shí)為true,不寫則為false)
loop:是否循環(huán)播放鸿脓;(此為bolean值抑钟,出現(xiàn)時(shí)eg:loop 或 loop=“l(fā)oop”為true,不寫則為false)
autoplay:是否自動(dòng)播放野哭;(同上)
preload:是否預(yù)加載視頻在塔;(none:不預(yù)加載; metadata:部分預(yù)加載虐拓; auto:預(yù)加載)
muted:規(guī)定視頻的音頻輸出應(yīng)該被靜音心俗;(同上)
width:設(shè)置視頻播放器的寬;(注意:屬性不用寫px)
height:設(shè)置視頻播放器的高蓉驹;(注意:屬性不用寫px)
---------------------------------------------------------------------------------------------
video元素的方法和屬性:
首先城榛,獲取video元素如:var oVdo=document.getElementById('video');
oVdo.err; ? ? ? ? ? ? ? ? ? ? 若為null态兴,則為正常狠持;
oVdo.err.code;? ? ? ? ? ? 錯(cuò)誤信息;1:用戶終止瞻润;2:網(wǎng)絡(luò)錯(cuò)誤喘垂;3:解碼錯(cuò)誤;4:URL無效绍撞;
//網(wǎng)絡(luò)狀態(tài)
oVdo.currentSrc; ? ? ? 當(dāng)前URL正勒;
oVdo.src=value; ? ? ? ? 設(shè)置或獲取URL;
oVdo.onload; ? ? ? ? ? ? ?重新加載傻铣;
oVdo.networkState; ? ?網(wǎng)絡(luò)狀態(tài)章贞;0:元素未初始化;1:未使用網(wǎng)絡(luò)非洲;2:正在下載數(shù)據(jù)鸭限;3:未找到資源;
oVdo.canPlayType; ? ?是否能播放某種類型的視頻两踏;
oVdo.preload; ? ? ? ? ? ?auto:預(yù)加載败京; metadata:部分預(yù)加載; none:不預(yù)加載梦染;
oVdo.buffered; ? ? ? ? ?返回已經(jīng)緩沖區(qū)域赡麦;
oVdo.readyState; ? ? ?準(zhǔn)備狀態(tài);
//播放狀態(tài)
oVdo.paused; ? ? ? ? ?視頻是否暫停;true為暫停隧甚,false為播放车荔;
oVdo.ended; ? ? ? ? ? ?視頻是否結(jié)束;
oVdo.autoplay; ? ? ? ?視頻是否為自動(dòng)播放戚扳;
oVdo.loop; ? ? ? ? ? ?視頻是否為循環(huán)播放族吻;
oVdo.play(); ? ? ? ? ? ?播放視頻帽借;
oVdo.pause(); ? ? ? ? 暫停視頻;
oVdo.controls; ? ? 視頻是否有默認(rèn)控制條超歌;
oVdo.volume=value; ?音量砍艾;
oVdo.muted; ? ? ? ? ? ? ?靜音;
//TimeRanges相關(guān)