標籤的特性

之前的網頁視頻

 

過去尚未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秒處就會中止。