1.多媒體元素的基本屬性
1.1元素格式
<video>:用于電影或者其他視頻流柒莉，
? ? ? ?height和width只對該屬性有效；
? ? ? ? controls:控制視頻播放條是否出現(xiàn)戚哎，存在于dom中挪凑，可以通過js進(jìn)行訪問
? ? ? ? poster：設(shè)置視頻在開始播放前的圖片
? ? ? ? networkState:可以獲取視頻加載過程中的各個狀態(tài)?
? ? ? ? ?狀態(tài)值：
error: 可以獲取視頻播放的錯誤信息,使用和networkState相似
? ? ? ? ? ?<video id="videoId" src="" ?onError="video_error(this)" controls="true" poster="">
? ? ? ? ? js中：var errorIndex = e.error.code;
<audio>:用于音樂或者其他音頻流? controls:控制音樂播放器是否出現(xiàn)
1.2.其他屬性
? 1.2.1 readyState
1.2.2 currentTime startTime duration
currentTime：可讀寫屬性括改，返回文件的當(dāng)前播放時間，可以修改該屬性使其指向所修改的事件
startTime：只讀屬性，返回多媒體元素開始播放的事件，默認(rèn)為0
duration：返回媒體文件總體播放時間梗脾，隨著播放的進(jìn)程一直變化
1.2.3 ? played ? paused ended
played:可以獲取文件已經(jīng)播放完成的時間段；返回一個TimeRanges對象
paused：返回是否處于暫停狀態(tài);
ended: 返回當(dāng)前文件播放是否已經(jīng)結(jié)束盹靴；
<video src=“shipin.mp4” autoplay="true" onPlaying="paying(this)">
js:? function paying(e){
? ? ? ? ? ?alert(e.ended);
? ? ? }
1.2.4 ?preload ? ?autoplay ?loop
? ? preload：表示頁面打開是否進(jìn)行預(yù)加載炸茧；有一下3個可選屬性
? ? ? ? ? ? ? ? ? ?none：不進(jìn)行先期播放文件的加載 帆疟；?
? ? ? ? ? ? ? ? ? ?metadata：表示只加載播放文件基本信息；
? ? ? ? ? ? ? ? ? ?auto：表示需要將播放文件進(jìn)行預(yù)加載宇立，默認(rèn)值是auto；
? ? autoplay：true\false ? 自動播放
? ?loop： ?是否進(jìn)行循環(huán)播放 ? true/false
1.2.5 ? defaultPlaybackRate ? ? ?playbackRate
? ? defaultPlaybackRate:返回媒體文件默認(rèn)的播放速率,默認(rèn)為1 自赔；也可以修改該屬性值
? ? ?playbackRate:返回當(dāng)前播放的文件的播放速率妈嘹，可以修改，即快進(jìn)慢進(jìn)的效果
1.2.6 ?volume ? ?muted?
? ? ? volume:媒體元素播放的音量绍妨，范圍是0-1
? ? ? muted ： 是否設(shè)置為靜音
2.多媒體元素常用方法
1.播放時的方法 ? load() ? pause(); ?play();
2.canPlayType?
? ?檢測瀏覽器是否支持該類型文件：
? canPlayType(type)返回三個值：
? ? ? ? ? ? ? ? ? ?空字符：表示瀏覽器不支持該類型的媒體文件
? ? ? ? ? ? ? ? ? ?maybe：表示瀏覽器可能支持該類的文件
? ? ? ? ? ? ? ? ? Probably：表示瀏覽器支持該類的文件
3.媒體文件的重要事件
1.播放時候的事件
2.timeupdate方法
function ?progress(e) {
? ? ? ? ? ? ?var strCurrTime=RuleTime(Math.floor(e.currentTime/60),2) +":"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? +RuleTime(Math.floor(e.currentTime%60),2);
? ? ? ? ? var strEndTime=RuleTime(Math.floor(e.duration/60),2) +":"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? +RuleTime(Math.floor(e.duration%60),2);
? ? ? ? ? document.getElementById("spanTimeTip").innerHTML=strCurrTime+"/"+strEndTime;
}
function ?RuleTime(num,n){
? ? ? var len= num.toString().length;
? ? ?while(len<n){
? ? ? ? ? num ="0"+ num;
? ? ? ? ? len++;
? ? ? }
? ? ?returnnum;
}
<video ?id="vdoMain" ?src="shipin.mp4" ?autoplay="true" ?controls="true"
? ? ? ? ? ? onmouseout="v_move(0)"onmouseover="v_move(1)"
? ? ? ? ? ?onplaying="v_playing()"onpause="v_pause()"onloadstart="v_loadstart()"
? ? ? ? ?onended="v_ended()"poster="haha.jpg"
? ? ? ? ? style="height:300px;width:400px;"
? ? ? ? ? ontimeupdate="progress(this)">你的瀏覽器不支持視頻</video>
<p>
<span ?id="spanTip" ?style="height:40px;width:100px;background-color:#2d2d2d;color:#ffffff;" ></span>
<span ?id="spanTimeTip" ?style="height:40px;width:100px;background-color:#2d2d2d;color:#ffffff;"></span>
</p>
3.其他事件
