第五节: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中添加背景音乐的标签,添加背景音