第五节：video标签的特性，你全都掌握了吗？
最近太忙，沒及時更新教程，加了私人微信號的同學也問，下一章節講什么，怎么不更新了，不好意思，讓大家久等了。
還有同學反饋：上兩章節的篇幅太長了。我也覺得確實有點長了，不適合碎片化時間去閱讀。以后我會控制一下文章內容量，非常感謝大家的反饋。
?
讓我們繼續投入到學習吧！
?
今天的章節也不難，我們要講video元素，相信大家對它不會陌生。
?
以前的網頁視頻
過去還沒有HTML5的時候，我們處理網頁視頻的時候，都是通過Flash插件來實現的，然而，并非所有瀏覽器都有同樣的插件。
現在有了HTML5帶來的video元素，開發者能夠很方便地將視頻資源嵌入到HTML文檔中。
video標簽的用法
<video>標簽：定義視頻，比如電影片段或其他視頻。
? ?<video src="movie.mp4"></video>
就這么簡單的一行代碼，你就可以將你的視頻文件引入到了HTML文檔中。其中屬性src跟img標簽的src作用一致：指定資源的文件路徑。
不支持video標簽的瀏覽器
也許你會問，<video> 標簽怎么說也是HTML5的新特性，老的瀏覽器不支持的情況下要怎么處理？也很簡單：
? ?<video src="movie.mp4">
??? ? ? 瀏覽器太老啦，該換了！
? ?</video>
可以在標簽之間放置一句話，這樣老的瀏覽器就可以顯示出不支持該標簽的信息。
（IE8就不支持video）
當然，除了可以是文本內容，也可以是其他的html代碼。
?
如何處理3種視頻格式
<video> 元素支持三種視頻格式： MP4, WebM, 和 Ogg。但是，不同的瀏覽器對視頻格式的支持也不一致。如何能更好地處理這種情況呢？看：
? ?<video>
??? ? ? <source src="movie.mp4" type="video/mp4">
??? ? ? <source src="movie.ogg" type="video/ogg">
??? ? ? 瀏覽器太老啦，該換了！
? ?</video>
我們利用<source>標簽為<video>標簽定義視頻文件資源，這樣瀏覽器會自動選擇一個它所支持的視頻格式類型來展示，忽略其他類型，是不是覺得瀏覽器相當的機智。
?
而<source>標簽的type屬性是用于規定媒體資源的 MIME 類型。它的值有：
video/ogg
video/mp4
video/webm
video標簽的屬性
接下來，我們繼續學習<video>標簽幾個很實用的屬性。
autoplay 屬性：規定視頻加載完畢后就開始播放。
? ?<video autoplay></video>
給<video>標簽添加autoplay屬性即可，這種寫法是簡寫。你可以這樣寫：
? ?<video autoplay="autoplay"></video>
但是我們建議用簡寫，更加簡潔，下面的屬性介紹，我們都會用簡寫的形式表示。
?
controls屬性:向用戶顯示控件，比如播放按鈕。
? ?<video controls></video>
加上了controls屬性，我們看看效果：
可以看到，視頻下方出來了一些控件欄，點擊控件可以對視頻進行操作：播放/暫停、進度、聲音、全屏顯示等，十分方便。?
loop 屬性: 使視頻自動重復播放。
? ?<video loop></video>
這個好理解，視頻播放結束后會自動重新播放。
?
muted屬性：規定視頻靜音播放。
? ?<video muted></video>
?
poster 屬性：視頻播放之前顯示的圖片。
? ?<video poster="poster.png"></video>
poster屬性的值是該圖片的所在路徑。我們來看看效果：
（我是個gif圖，加載慢，怪我咯）
在視頻加載和播放之前，我們顯示的都是poster圖片（我放了“web前端教程”公眾號的logo）的內容。直到用戶點擊播放的時候，才會顯示視頻的內容。
?
preload 屬性：規定是否在頁面加載后載入視頻。
? ?<video preload="auto"></video>
它的值有：
auto - 當頁面加載后載入整個視頻
metadata - 當頁面加載后只載入元數據
none - 當頁面加載后不載入視頻
?
height屬性：設置視頻播放器的高度。
? ?<video height="100"></video>
width屬性：設置視頻播放器的寬度。
? ?<video width="100"></video>
利用height和width屬性，可以模擬全屏展示效果。
JavaScript中的video對象
除了通過標簽屬性來控制視頻文件以外， HTML5的 video 對象提供可以用于通過JavaScript 控制播放的方法、屬性以及事件。
播放 / 暫停
video 對象提供了paused屬性、play( )方法和pause()方法供我們使用。
paused屬性可以獲取當前視頻是否處于暫停狀態，如果是，返回true。如果正在播放，則返回false。
? ?var v = document.getElementById('video');
? ?//當前是否暫停
? ?v.paused;
?
調用pause( )方法，會使視頻立即處于暫停狀態。
? ?//暫停
? ?v.pause();
?
調用play( )方法，視頻則會繼續播放，十分簡單。
? ?? ?//播放
? ?v.play();
音量控制
通過video對象的volume屬性來控制音量。
? ?v.volume += 0.1;
volume的值范圍在0~1之間，值越大，聲音越大，反之，聲音越小。
seekable 屬性
video對象還有一個seekable 屬性，它會返回用戶在視頻中可尋址的時間范圍。什么意思呢？我們來試一下看。
獲取視頻開始播放的時間位置，默認是0秒位置。
? ?v.seekable.start(0);
?
獲取視頻播放結束的時間點，一般來說也就是這個視頻的播放時長。
? ?v.seekable.end(0);
利用這兩個特性，就可以計算出視頻的總播放時長是多少了。也就是上面說的可尋址的時間范圍（很簡單的一個概念，硬是說成可尋址時間范圍這么陌生抽象）。
獲取和控制播放時間
獲取視頻已播放了的時間長度。
? ?v.played.end(0)
如果視頻從0秒處開始播放，播放了4秒，那么上面得到的結果就是：4 。
?
設置視頻當前的播放時間。
? ?v.currentTime = 5;
這樣，視頻的播放時間就會跳至5秒的位置，然后繼續播放。倘若你設置的時間大于視頻的總時長，就會被跳到視頻的最后位置。
URL控制播放范圍
除了通過屬性和JavaScript來控制視頻之外，我們還有一種方式來操控視頻。是什么呢？比較有趣。
?
在<video>指定視頻文件的URI的時候，可以選擇性地加入一些額外信息來指定視頻播放的起始時間和結束時間。比如：我們要設置視頻的播放開始時間在3秒的位置，結束時間在7秒的位置，那么，我們可以這樣做：
?<video src="movie.mp4#t=3,7"></video>
格式為： #t=startTime,endTime。這樣，視頻就會在3秒的位置開始播放，播放至7秒處就會停止。
<audio>標簽和<video>標簽很相似，本來想在這一章節一并講解，但是這樣做的話篇幅太長，只好留在下一章節再一起學習。
本節收獲
使用<video>實現網頁視頻播放
舊版瀏覽器不支持<video>標簽的處理方式
自定義一個視頻的控件，實現播放/暫停、重播、靜音、音量調節、播放進度調節、全屏顯示等。
總結
以上是生活随笔為你收集整理的第五节：video标签的特性，你全都掌握了吗？的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 云炬创业政策学习笔记20210115
- 下一篇： html中添加背景音乐的标签,添加背景音