在HTML5出現之前，要在網頁中播放多媒體，需要借助Flash插件。浏覽器在安裝Flash插件後才能播放多媒體。使用HTML5提供的新标簽<audio>和<video>可以很友善地在網頁中播放音頻和視訊。

1、HTML5音頻

HTML5提供了在網頁中播放音頻的标準，支援<audio>标簽的浏覽器可以不依賴其他插件播放音頻。

1）audio标簽

在HTML5中，可以使用<audio>标簽定義一個音頻播放器，文法如下。

<audio src="音頻檔案">...</audio>

src屬性用于指定音頻檔案的URL。<audio>标簽支援的音頻檔案類型包括.wav、.mp3和.ogg等。

<audio>和</audio>之間的字元串指定目前浏覽器不支援<audio>标簽時顯示的字元串。

在HTML檔案中定義一個audio标簽，用于播放music.wav，代碼如下。

<!DOCTYPE html>
<html >

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>

    <h1>Audio标簽的例子</h1>
    <audio src="music.wav" controls>
        您的浏覽器不支援audio标簽。
    </audio>

    <script>
    </script>

</body>

</html>

controls屬性指定在網頁中顯示控件，如播放按鈕等。

提示：不同浏覽器的音頻播放器控件的外觀也不盡相同，Internet Explorer 8 及其之前版本不支援<audio>标簽。

除了前面用到的src和controls屬性，<audio>标簽還包括如下主要屬性。

除了src和controls外，<audio>标簽還包括的主要屬性

屬性	值	具體描述
autoplay	True或false	如果是true，則音頻在就緒後馬上播放
end	數值	定義播放器在音頻流中的何處停止播放，預設會播放到結尾
loop	True或false	如果是true，則音頻會循環播放
loopend	數值	定義在音頻流中循環播放停止的位置，預設為end屬性的值
loopstart	數值	定義在音頻流中循環播放的開始位置，預設為start屬性的值
playcount	數值	定義音頻片段播放多少次，預設為1
start	數值	定義播放器在音頻流中開始播放的位置，預設從開頭播放

2）播放背景音樂

播放背景音樂時通常不需要顯示播放控件，是以在定義<audio>标簽時，可以将controls屬性設定為false（或不使用controls屬性）。播放背景音樂時需要自動循環播放，是以在定義<audio>标簽時，可以将autoplay屬性和loop屬性設定為true。

在HTML檔案中定義一個<audio>标簽，用于播放背景音樂music.wav，代碼如下。

<!DOCTYPE html>
<html >

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>

    <h1>播放背景音樂的例子</h1>
    <audio src="music.wav" autoplay loop>
        您的浏覽器不支援audio标簽。
    </audio>

    <script>
    </script>

</body>

</html>

3）設定替換音頻源

<audio>标簽支援.wav、.mp3和.ogg等多種類型的音頻檔案，但是并不是所有浏覽器都支援每種類型的音頻檔案。如果隻指定一種類型的音頻檔案，則很可能在使用某些浏覽器時不能正常播放。

在<audio>标簽中，可以使用<audio>标簽指定多個要播放的音頻檔案。文法如下。

<audio>
    <source src="音頻檔案1">
    <source src="音頻檔案2">
    <source src="音頻檔案3">
    ……
</audio>

改進上面介紹的播放背景音樂的代碼，增加替換音頻源music.mp3，代碼如下。

<!DOCTYPE html>
<html >

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>

    <h1>播放背景音樂的例子</h1>
    <audio src="music.wav" controls>
        <source src="music.wav">
        <source src="music.mp3">
        您的浏覽器不支援audio标簽。
    </audio>

    <script>
    </script>

</body>

</html>

4）使用JavaScript語言通路audio對象

除了使用預設的播放器控制播放音頻外，還可以在JavaScript程式中操作audio對象，進而實作更靈活的控制。

（1）檢測浏覽器是否支援<audio>标簽

在JavaScript程式中操作audio對象之前，通常需要檢測浏覽器是否支援<audio>标簽。如果支援，則可以對audio對象進行操作。

可以通過window.HTMLAudioElement屬性判斷浏覽器是否支援<audio>标簽。如果window.HTMLAudioElement等于true，則表示浏覽器支援<audio>标簽，否則表示不支援。

在網頁中定義一個按鈕，單擊此按鈕時，會檢測浏覽器是否支援<audio>标簽。定義按鈕的代碼如下。

<button id="check" onclick="check();">檢測浏覽器是否支援audio标簽</button>

單擊按鈕check将調用check()函數。定義check()函數的代碼如下。

<script type="text/javascript">
    function check() {
        if (window.HTMLAudioElement) {
            alert("您的浏覽器支援<audio>标簽");
        }
        else {
            alert("您的浏覽器不支援<audio>标簽");
        }
    }
</script>

（2）在JavaScript程式中獲得audio對象

在JavaScript程式中有以下兩種方法可以獲得audio對象。

（1）使用new關鍵字建立audio對象，例如：

media = new audio("music.wav");

（2）首先在HTML網頁中定義一個Audio标簽，然後調用document.getElementById()函數獲得對應的audio對象。例如，定義audio标簽的代碼如下。

<audio id="audio1" src="music.wav" autoplay loop>
    您的浏覽器不支援audio标簽。
</audio>

擷取對應audio對象的代碼如下。

var media = document.getElementById('audio1');

（3）audio對象的屬性

audio對象的常用屬性

屬性	具體描述
currentTime	設定或傳回音頻檔案開始播放的位置，傳回值以“秒”為機關
duration	傳回播放音頻的長度
src	音頻檔案的URL
volume	設定或傳回音頻檔案的音量
networkState	目前的網絡狀态。0表示尚未初始化，1表示正常但沒有使用網絡，2表示正在下載下傳資料，3表示沒有找到資源
paused	是否暫停
ended	是否結束
autoPlay	是否自動播放
loop	是否循環播放
controls	是否顯示預設控制條
muted	是否靜音

示範currentTime屬性的使用。

在網頁中定義一個<audio>标簽，代碼如下。

<audio id="audio1" src="music.wav" controls>您的浏覽器不支援audio标簽。</audio>

定義一個“快進”按鈕，定義按鈕的代碼如下。

<button id="foward" onclick="foward();">快進</button>

單擊按鈕foward将調用foward()函數。定義foward()函數的代碼如下。

<script>
    function foward() {
        if (window.HTMLAudioElement) {
            var media = document.getElementById('audio1');
            media.currentTime += 1;
        }
    }
</script>

程式首先通過window.HTMLAudioElement判斷浏覽器是否支援<audio>标簽，如果支援，則擷取<audio>對象media，然後将media.currentTime加1。

再定義一個“倒回”按鈕，定義按鈕的代碼如下。

<button id="rewind" onclick="rewind();">倒回</button>

單擊按鈕rewind将調用rewind()函數。定義rewind()函數的代碼如下。

<script>
    function rewind() {
        if (window.HTMLAudioElement) {
            var media = document.getElementById('audio1');
            media.currentTime = 0;
        }
    }
</script>

（4）audio對象的方法

audio對象的常用方法

方法	具體描述
canPlayType	是否能播放指定格式的資源
load	加載src屬性指定的資源
play	播放
pause	暫停

在網頁中定義一個按鈕，單擊此按鈕時，會播放music.wav。定義按鈕的代碼如下。

<button id="play" onclick="playAudio();">播放</button>

單擊按鈕play将調用playAudio()函數。定義playAudio()函數的代碼如下。

<script>
    function playAudio() {
        if (window.HTMLAudioElement) {
            media = new Audio("music.wav");
            media.controls = false;
            media.play();
        }
    }
</script>

改進上述代碼，播放音頻後，将“播放”按鈕改成“暫停”按鈕，單擊“暫停”按鈕後，暫停播放，并将按鈕改為“播放”按鈕。

在網頁中定義一個音頻播放器，代碼如下。

<audio id="audio1" src="music.wav">您的浏覽器不支援audio标簽。</audio>

定義“播放 / 暫停”按鈕的代碼如下。

<button id="play" onclick="playAudio();">播放</button>

初始時按鈕标題為“播放”，單擊按鈕play将調用playAudio()函數。定義playAudio()函數的代碼如下。

<script>
    function playAudio() {
        if (window.HTMLAudioElement) {
            var media = document.getElementById('audio1');
            var btn = document.getElementById('play');
            if (media.paused) {
                media.play();
                btn.textContent = "暫停";
            } else {
                media.pause();
                btn.textContent = "播放";
            }
        }
    }
</script>

（5）audio對象的事件

audio對象的常用事件

方法	具體描述
loadstart	開始申請資料
progress	正在申請資料
suspend	延遲下載下傳
play	播放時觸發
pause	暫停時觸發
ended	播放結束
volumechange	改變音量

改進上述代碼，當播放完音頻後，将按鈕标題改為“播放”。

在playAudio()函數中添加如下代碼。

media.addEventListener("ended", playend, true);

即指定media對象的ended事件觸發時調用playend()函數。定義playend()函數的代碼如下。

function playend() {
    var btn = document.getElementById('play');
    btn.textContent = "播放";
}

2、HTML5視訊

HTML5提供了在網頁中播放視訊的标準，支援<video>标簽的浏覽器可以不依賴其他插件播放視訊。

1）video标簽

在HTML5中，可以使用<video>标簽定義一個視訊播放器，文法如下。

<video src="視訊檔案">...</video>

src屬性用于指定視訊檔案的URL。<video>标簽支援的視訊檔案格式包括.Ogv、MPEG 4 和 WebM 等。<video>和</video>之間的字元串指定當浏覽器不支援<video>标簽時顯示的字元串。

<video>标簽的主要屬性

屬性	值	具體描述
autoplay	True或false	如果是true，則視訊在就緒後馬上播放
controls	True或false	如果是true，則向使用者顯示視訊播放器控件，如播放按鈕
end	數值	定義播放器在視訊流中的何處停止播放。預設會播放到結尾
height	數值	視訊播放器的高度，機關為像素
loop	True或false	如果是true，則視訊會循環播放
loopend	數值	定義在視訊流中循環播放停止的位置，預設為end屬性的值
loopstart	數值	定義在視訊流中循環播放的開始位置。預設為start屬性的值
playcount	數值	定義視訊片段播放多少次，預設為1
poster	url	在視訊播放之前所顯示的圖檔的URL
src	url	要播放的視訊的URL
start	數值	定義播放器在視訊流中開始播放的位置，預設從開頭播放
width	數值	視訊播放器的寬度，機關為像素

在HTML檔案中定義一個<video>标簽，用于播放指定的線上MP4檔案，代碼如下。

<!DOCTYPE html>
<html >

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>

    <h1>video标簽的例子</h1>
    <video src="video/POPSTAR.mp4" controls>
        您的浏覽器不支援video标簽。
    </video>

    <script>
    </script>

</body>

</html>

與<audio>标簽一樣，在<video>标簽中，也可以使用<source>标簽指定多個要播放的視訊檔案。文法如下。

<video>
    <source src="視訊檔案1">
    <source src="視訊檔案2">
    <source src="視訊檔案3">
    ……
</video>

改進上述代碼，增加替換視訊源，代碼如下。

<!DOCTYPE html>
<html >

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>

    <h1>video标簽的例子</h1>
    <video controls>
        <source src="video/POPSTAR.mp4" type="video/mp4" />
        <source src="video/POPSTAR.ogv" type="video/ogv">
    </video>

    <script>
    </script>

</body>

</html>

2）使用JavaScript語言通路video對象

與音頻處理一樣，除了使用預設的播放器控制播放視訊外，還可以在JavaScript程式中操作video對象。

（1）檢測浏覽器是否支援<video>标簽

在JavaScript程式中操作video對象之前，通常需要檢測浏覽器是否支援<video>标簽。如果支援，則可以對video對象進行操作。

可以通過document.createElement()方法建立一個video對象，如果成功，則表示浏覽器支援<video>标簽，否則表示不支援。

在網頁中定義一個按鈕，單擊此按鈕時，會檢測浏覽器是否支援<video>标簽。定義按鈕的代碼如下。

<button id="check" onclick="check();">檢測浏覽器是否支援video标簽</button>

單擊按鈕check将調用check()函數。定義check()函數的代碼如下。

<script>
    function check() {
        if (supports_video()) {
            alert("您的浏覽器支援video标簽");
        } else {
            alert("您的浏覽器不支援video标簽");
        }
    }
</script>

supports_video()函數用于檢測浏覽器是否支援<video>标簽，代碼如下。

function supports_video() {
    return !!document.createElement('video').canPlayType;
}

（2）在JavaScript程式中獲得video對象

與audio對象不同，video對象在任何情況下都是可見的。是以不需要使用new關鍵字建立video對象。

一般在需要HTML網頁中定義一個<video>标簽，然後調用document.getElementById()函數擷取對應的audio對象。例如，定義<video>标簽的代碼如下。

<video id="video1" src="video/POPSTAR.mp4" controls>您的浏覽器不支援video标簽。</video>

擷取對應video對象的代碼如下。

var media = document.getElementById('video1');

（3）video對象的屬性

video對象的常用屬性

屬性	具體描述
autoplay	設定或傳回是否在加載完成後随即播放音頻/視訊
controls	設定或傳回是否顯示視訊控件
currentSrc	傳回目前視訊的URL
currentTime	設定或傳回視訊檔案開始播放的位置，傳回值以“秒”為機關
duration	傳回播放音頻在某秒上的播放的長度
ended	是否結束
height	視訊的高度
loop	是否循環播放
muted	是否靜音
networkState	目前的網絡狀态。0表示尚未初始化，1表示正常但沒有使用網絡，2表示正在下載下傳資料，3表示沒有找到資源
paused	是否暫停
played	是否已播放
preload	設定或傳回視訊是否應該在頁面加載後進行加載
src	設定或傳回視訊元素的目前來源
volume	設定或傳回視訊檔案的音量
videoWidth	原始視訊的寬度
videoHeight	原始視訊的高度
width	視訊的寬度

width屬性和videoWidth屬性的使用。

在網頁中定義一個<video>标簽，代碼如下。

<video id="video1" src="video/POPSTAR.mp4" controls>您的浏覽器不支援video标簽。</video>

定義一個“小”按鈕，定義按鈕的代碼如下。

<button id="MakeSmall" onclick="MakeSmall();">小</button>

單擊按鈕MakeSmall将調用MakeSmall()函數。定義MakeSmall()函數的代碼如下。

<script>
    function supports_video() {
        return !!document.createElement('video').canPlayType;
    }
    function MakeSmall() {
        if (supports_video()) {
            var media = document.getElementById('video1');
            media.width = media.videoWidth/2;
        }
    }
</script>

程式将media.width設定為原始視訊寬度的一半（media.videoWidth/2）。

再定義一個“正常”按鈕，定義按鈕的代碼如下。

<button id="normal" onclick="MakeNormal();">正常</button>

單擊按鈕normal将調用MakeNormal()函數。定義MakeNormal()函數的代碼如下。

function MakeNormal() {
    if (supports_video()) {
        var media = document.getElementById('video1');
        media.width = media.videoWidth;
    }
}

程式将media.width設定為原始視訊寬度（media.videoWidth）。

最後定義一個“大”按鈕，定義按鈕的代碼如下。

<button id="Big" onclick="MakeBig();">大</button>

單擊按鈕Big将調用MakeBig()函數。定義MakeBig()函數的代碼如下。

function MakeBig() {
    if (supports_video()) {
        var media = document.getElementById('video1');
        media.width = media.videoWidth*2;
    }
}

程式将media.width設定為原始視訊寬度的兩倍（media.videoWidth*2）。

（4）video對象的方法

video對象的常用方法

方法	具體描述
canPlayType	能否播放指定格式的資源
load	加載src屬性指定的資源
play	播放
pause	暫停

定義一個<video>标簽，用于播放指定的MP4檔案。單擊視訊畫面則播放視訊，再次單擊則會暫停播放。

<!DOCTYPE html>
<html >

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>

    <video id="video1" src="video/POPSTAR.mp4" controls>您的浏覽器不支援video标簽。</video>

    <script>
        var media = document.getElementById('video1');
        if (media.paused) {
            media.play();
        } else {
            media.pause();
        }
    </script>

</body>

</html>

（5）video對象的事件

video對象的常用事件

方法	具體描述
canplay	當浏覽器可以播放音頻/視訊時
loadeddata	當浏覽器已加載視訊的目前幀時
loadstart	開始申請資料
progress	正在申請資料
suspend	延遲下載下傳
play	播放時觸發
pause	暫停時觸發
ended	播放結束
volumechange	改變音量
waiting	當視訊由于需要緩沖下一幀而停止

在網頁中定義兩個視訊播放器，當播放視訊1時，暫停視訊2；當暫停視訊1時，播放視訊2。

<!DOCTYPE html>
<html >

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>

    <video id="video1" src="video/POPSTAR.mp4" controls>您的浏覽器不支援video标簽。</video>
    <video id="video2" src="video/POPSTAR.mp4" controls>您的浏覽器不支援video标簽。</video>

    <script>
        function register() {
            var media1 = document.getElementById('video1');

            media1.addEventListener("play", pauseVideo2, true);
            media1.addEventListener("pause", playVideo2, true);
        }
        function pauseVideo2() {
            var media2 = document.getElementById('video2');
            media2.pause();
        }
        function playVideo2() {
            var media2 = document.getElementById('video2');
            media2.play();
        }
        window.addEventListener("load", register, true);
    </script>

</body>

</html>

3、視訊播放插件video.js

Video.js是一個基于HTML5的視訊播放器插件。

Video.js插件的使用方法很簡單，首先可以使用下面的語句線上引用video.js腳本。

<script src="http://vjs.zencdn.net/5.8.8/video.js"></script>

如果希望在IE8中支援video.js播放器，則還需要使用下面的語句引用video.js腳本。

<script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>

然後再使用下面的語句引用樣式表檔案。

<link rel="stylesheet" href="http://vjs.zencdn.net/5.8.8/video-js.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >

使用video.js插件的方法很簡單，隻需要在網頁中定義一個class="video-js"的video元素。例如：

<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" poster="images/picture.jpg" 
data-setup="{}">
    <source src="video/POPSTAR.mp4" type="video/mp4" >
    <source src="video/POPSTAR.mp4" type="video/mp4">
    <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to a web browser that
        <a href="http://videojs.com/html5-video-support/" target="_blank" rel="external nofollow"  target="_blank">supports HTML5 video</a>
    </p>
</video>

參數說明如下。

preload：是否預加載視訊，auto表示自動預加載。
width：播放器寬度。
poster：封面圖。
source：視訊源。
type：視訊格式。

視訊播放插件Video.js的使用。網頁代碼如下。

<!DOCTYPE html>
<html >

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <link rel="stylesheet" href="http://vjs.zencdn.net/5.8.8/video-js.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
    <script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>

    <video id="my-video" class="video-js" controls preload="auto" width="640" height="264" poster="images/lurennvzhu.jpg" data-setup="{}">
        <source src="video/POPSTAR.mp4" type="video/mp4" >
        <source src="video/POPSTAR.mp4" type="video/mp4">
    </video>

    <script src="http://vjs.zencdn.net/5.8.8/video.js"></script>
    <script>
    </script>

</body>

</html>

播放多媒體1、HTML5音頻2、HTML5視訊3、視訊播放插件video.js

1、HTML5音頻

1）audio标簽

2）播放背景音樂

3）設定替換音頻源

4）使用JavaScript語言通路audio對象

（1）檢測浏覽器是否支援<audio>标簽

（2）在JavaScript程式中獲得audio對象

（3）audio對象的屬性

（4）audio對象的方法

（5）audio對象的事件

2、HTML5視訊

1）video标簽

2）使用JavaScript語言通路video對象

（1）檢測浏覽器是否支援<video>标簽

（2）在JavaScript程式中獲得video對象

（3）video對象的屬性

（4）video對象的方法

（5）video對象的事件

3、視訊播放插件video.js

繼續閱讀

十大酷炫屌的圖像懸停特效

一個小小的移動web版音樂播放器

前後端分離之跨域問題

Docker - Dockerfile之ADD、COPY、WORKDIR、USER、EXPOSE指令詳解

Compile workrave under windows &ndash; My exprience 在Windows上編譯Workrave

門戶通專訪草根站長九天狼：做站貴在堅持

何為全棧工程師？你是否應該成為一名全棧工程師？

tabpanel 使用問題

為什麼把CSS放頭部，script放下面

jQuery練習一. 選擇器練習二. DOM操作練習三. 事件練習

CSS之折疊菜單

web開發之前後端渲染

403 Forbidden，You don't have permission to access / on this server.Forbidden

配置網頁内容通路

layui多任務上傳添加進度條