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