TShopping

 找回密碼
 註冊
搜索
查看: 1684|回復: 0

[分享] HTML5視頻<video>/音頻<audio>的用法介紹

[複製鏈接]
發表於 2017-2-9 02:59:58 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk  
HTML5裡引入的新標記<audio>和<video>實現了HTML對視頻播放和音頻播放的原生支持,有了這種原生的HTML5視頻播放器/音頻播放器,能將視頻/音頻嵌入到了網頁中。
如何嵌入視頻和音頻
在網頁裡嵌入HTML5音頻播放器和視頻播放器的方法非常簡單:
  1. <video src="http://www.netyea.com/~j/theora_testsuite/320x240.ogg" controls autoplay loop>
  2.   Your browser does not support the <code>video</code> element.
  3. </video>
複製代碼

上面這個例子顯示瞭如何播放一個視頻文件,並露出視頻播放控制按鈕。
下面這個例子是在HTML網頁裡嵌入音頻audio的方法:
  1. <audio controls autoplay loop src="/test/audio.ogg">
  2. <p>Your browser does not support the <code>audio</code> element.</p>
  3. </audio>
複製代碼

這裡的src屬性裡可以填入一個音頻/視頻的URL,也可以是一個本地的文件。
  1. <audio src="audio.ogg" controls autoplay loop>
  2. <p>Your browser does not support the <code>audio</code> element </p>
  3. </audio>
複製代碼

下面是<audio>和<video>兩個標記上控制屬性的含義:

  • controls : 顯示標準的HTML5     視頻/音頻播放器控制條、控制按鈕。
  • autoplay : 讓文件自動播放。
  • loop : 讓文件循環播放。
  1. <audio src="audio.mp3" preload="auto" controls></audio>
複製代碼

這裡的preload屬性是用來緩存大體積文件的。它有三個可選值:

  • "none" 不緩存
  • "auto" 緩存
  • "metadata" 只緩存文件元信息
為了能夠兼容各種瀏覽器對不同媒體類型的支持,我們可以用多個<source>元素來提供多個不同的媒體類型。例如:
  1. <video controls>
  2.   <source src="foo.ogg" type="video/ogg">
  3.   <source src="foo.mp4" type="video/mp4">
  4.   Your browser does not support the <code>video</code> element.
  5. </video>
複製代碼

支持Ogg格式視頻流的瀏覽器可以播放Ogg文件。如果不支持,可以播放MPEG-4文件。查看各種瀏覽器對各種媒體類型的支持情況,請查看這裡
我們還可以指定播放使用的解碼器(codecs); 這樣就可以更精確的讓瀏覽器如何播放提供的視頻:
  1. <video controls>
  2.   <source src="foo.ogg" type="video/ogg; codecs=dirac, speex">
  3.   Your browser does not support the <code>video</code> element.
  4. </video>
複製代碼

上面,我們指定了這個視頻需要使用Dirac 和Speex 解碼器。如果瀏覽器支持Ogg 格式,但沒有指定的解碼器,那麼,視頻將不會被加載。
如果沒有提供type屬性,則瀏覽器會向服務器詢問媒體類型,看看是否支持;如果不支持,瀏覽器將會去檢查下一個source屬性。

用JavaScript控制視頻/音頻播放
一旦視頻文件正確的嵌入到了HTML網頁裡,我們就可以使用JavaScript裡控制它的部分,獲取它的播放信息。比如,用JavaScript啟動視頻播放:
  1. var v = document.getElementsByTagName("video")[0];
  2. v.play();
複製代碼

用JavaScript可控制HTML5視頻播放器實現播放、暫停、快進,快退、音量等。
  1. <audio id="demo" src="audio.mp3"></audio>
  2. <div>
  3.   <button onclick="document.getElementById('demo').play()">播放</button>
  4.   <button onclick="document.getElementById('demo').pause()">暂停</button>
  5.   <button onclick="document.getElementById('demo').volume+=0.1">降低音量</button>
  6.   <button onclick="document.getElementById('demo').volume-=0.1">提高音量</button>
  7. </div>
複製代碼


停止下載視頻文件
雖然我們可以使用pause()方法裡讓視頻文件停止播放,但瀏覽器並未停止下載媒體文件,除非它達到了一定的緩存量。
下面是讓瀏覽器如何停止下載視頻文件的方法:
  1. var mediaElement = document.getElementById("myMediaElementID");
  2. mediaElement.pause();
  3. mediaElement.src='';
  4. //或
  5. mediaElement.removeAttribute("src");
複製代碼

通過刪除src屬性(或者設置為空值),這樣就能停止文件的網絡下載。

設定播放的時間點定位
我們可以指定視頻從某時某分某秒開始播放,這是通過設置currentTime屬性來實現。
我們可以通過seekable屬性來獲得視頻有效的播放時間範圍。它會返回一個TimeRanges對象,能夠告訴你有效的開始時間和結束時間。
  1. var mediaElement = document.getElementById('mediaElementID');
  2. mediaElement.seekable.start(0); //返回開始時間(秒)
  3. mediaElement.seekable.end(0); //返回結束時間(秒)
  4. mediaElement.currentTime = 122; //定位到第122秒播放
  5. mediaElement.played.end(0);  //返回已經播放的時間長度(秒)
複製代碼

設定播放範圍
當在網頁裡嵌入視頻/音頻文件時,<audio>或<video>元素允許我們提供一些額外的信息來指定播放哪一時間段。實現的方法是在媒體文件後面跟隨(“#”)格式的信息。
它的具體語法是這樣的:
  1. #t=[開始時間][,結束時間]
複製代碼

時間的表示方法可以使用秒數,也可以提供一個”時:分:秒“ 格式的時間(例如2:05:01)。

指定視頻從10秒開始播放,到20秒處結束。
http://www.netyea.com/video.ogg#t=,10.5
指定視頻從頭開始播放到10.5 秒處。
http://www.netyea.com/video.ogg#t=,02:00:00
指定視頻播放2小時。
http://www.netyea.com/video.ogg#t=60
指定視頻從第60秒開始播放,播放到結束。

如要加圖片預覽
  1. <video id="movie" preload controls loop poster="poster.png" width="640" height="360">
  2.   <source src="aaa.mp4" type="video/mp4" />
  3.   <source src="aaa.ogv" type="video/ogg" />
  4.   <source src="aaa.webm" type="video/web" />
  5.   您的瀏覽器不支援HTML 5影片播放標籤<video>格式。
  6.   Your browser doesn't support the <video> tag.
  7. </video>
複製代碼
標籤解釋
  • 首先整個HTML我們是使用<video></video>兩的標籤來包著,前面代表開始,後面代表結束。
  • <video>標籤裡面有幾個屬性,你可以使用,用法如下:
    • autoplay(自動播放):你可以輸入"autoplay"(開啟自動播放)、"" (空白字串,開啟自動播放)、或不輸入(開啟自動播放)。
    • preload(預先載入):你可以輸入"none"(關閉預先載入)、"metadata"(開啟預先載入)、"auto"(自動)、"" (空白字串,開啟預先載入)、或不輸入(開啟預先載入)。
    • controls(控制按鈕):你可以輸入"controls"(開啟控制按鈕)、"" (空白字串,開啟)、或不輸入(開啟)。
    • 瀏覽器預設是沒有其他控制項目的,如果你開啟,你可以提供一些播放控制元件,播放、暂停、定位、音量、全螢幕、字幕(如果可用)、聲道(如果可用),這些可以透過額外的Javascript來完成。
    • loop(播放循環):你可以輸入"loop"(開啟循環)、"" (空白字串,開啟)、或不輸入(開啟)。
    • poster(預覽圖片):用來選擇影片播放前,所顯示的圖片,不能空白,若要使用此屬性則請輸入圖片網址。
    • height(影片高度):請輸入非負的整數,不需輸入單位(px,pixel)。
    • width(影片寬度):請輸入非負的整數,不需輸入單位(px,pixel)。
    • muted(靜音):你可以輸入"muted" (開啟靜音)、"" (空白字串,開啟)、或不輸入(開啟)。
    • src(影片位置):放置影片原始檔的網址,或相對位址。
    所以上面提供的範例意思是「這個影片我要有控制按鈕,要預先載入影片,然後影片結束之後要循環播放,在開始播放之前,顯示預覽圖片,寬是640px,高是360px」。
  • 再來是中間的<source … />標籤,意思是影片的原始檔位置與類型。
    • 檔案位置請用「src="檔案位置"」,這個屬性,如果影片和網站在相同的資料夾,則在「檔案位置」中直接輸入影片檔名(主檔名+副檔名),如果不是,你可以直接輸入網址如<source src="https://…/~.mp4″ />,例如: <source src="https://example/html5-video-tag/Yif-Magic.mp4″ />
    • 類型的選擇請用「type="video/檔案類型"」,例如,如果附檔名是「.mp4」,則類型的選擇請寫「type="video/mp4″」;如果是「.webm」,則寫「type="video/web"」;注意,如果是「.ogv」,則類型的選擇請寫「type="video/ogg“」,不要問我為什麼,因為我也不知道這個地方就會不一樣。如果想知道個多可以上網Google。
  • 再來是針對那些無法播放影片的瀏覽者,告訴他們原因,所以我們在</video>的前面告訴他們:「您的瀏覽器不支援HTML 5影片播放標籤<video>格式。」




 

臉書網友討論
您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2020-11-27 16:20 , Processed in 0.056938 second(s), 21 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表