和 標籤

1、<video>基本格式：

 <video width=" " heigh="" src=""> </video>

2、<video>支持的格式：通常爲mp3 和 mp4

 

3、source標籤用法

做用：source標籤能夠連接不一樣的視頻文件，瀏覽器將使用 第一個可識別的格式,內容爲source標籤失效時的提醒

<video width="320" height="240" controls autoplay>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的瀏覽器不支持video標籤
</video>

4、<video>對應的屬性

• controls 屬性 在視頻元素的底部展現一個元素自帶的控制條工具。
• loop 屬性 視頻結束後將從新開始播放。
• poster 屬性 將在視頻文件播放前顯示圖片。

---

• utoplay 屬性 一旦視頻就緒立刻開始自動播放。
• preload 屬性 是否在頁面加載後載入視頻。
• 可能值 ：
• auto （默認） :  當頁面加載後載入整個視頻
• metadata :  只加載播放文件的基本信息 （如：尺寸、持續時間、第一幀信息、曲目列表等）
• none :  當頁面加載後不載入視頻

這兩個移動端不支持，由於耗費流量

---

其餘不經常使用的屬性：

• duration 整個媒體文件的播放時長，以s爲單位。 
• currentTime 以s爲單位返回從開始播放到如今所用的時間。在播放過程當中，設置currentTime來進行搜索。並定位到媒體文件的特定位置。 
• ended 若是媒體文件已經播放完畢，則返回true 
• paused 若是媒體文件當前被暫停，則返回true 
• startTime 返回最先的播放起始時間，通常是0.0，除非是緩衝過的媒體文件，而且一部份內容已經不在緩衝區 
• error 在發生了錯誤的狀況下返回的錯誤代碼 
• currentSrc 以字符串形式返回當前正在播放或已加載的文件。對應於瀏覽器在source元素中選擇的文件 
• muted 爲音頻文件設置靜音或者消除靜音，或者檢測當前是否爲靜音

 

5、video經常使用事件

• load ( ) 方法 用於加載媒體文件。
• pause ( ) 方法 暫停正在播放中的媒體文件。
• play ( ) 方法 播放加載完成的文件。
• canPlayType ( ) 方法 用來測試瀏覽器是否支持指定的媒體類型。
• 該方法返回3個可能值：
• 空字符串：表示瀏覽器不支持此種媒體類型
• maybe：表示瀏覽器可能支持此種媒體類型
• probably：表示瀏覽器肯定支持此種媒體類型
• timeupdate 事件
• 在媒體文件播放過程當中，若是播放位置發生變化，就會觸發該事件。 結合多媒體元素的「currentTime」與「duration」屬性，能夠動態顯示媒體文件播放的當前時間與總量時間。

事件總集合：

• play 當多媒體元素開始播放媒體文件時觸發
•  pause 當多媒體元素停止播放媒體文件時觸發
• ended 當媒體文件播放結束時觸發
• error 當媒體文件在加載過程當中出現錯誤時觸發
• progress 當媒體元素正在讀取媒體文件時觸發
• emptied 當媒體元素播放一個未知或異常的媒體文件時觸發
• waiting 當媒體元素正在等待加載下一幀播放數據時觸發
• loadedmetadata 當多媒體元素加載完成時間與總字節數時觸發
• playing 當媒體元素正在播放媒體文件時觸發
• volumechange 當多媒體元素音量大小改變或啓動靜音時觸發

 

6、<audio>標籤格式：

    <audio  src=""> </audio>