HTML5 多媒體

5.5 音頻

5.5.1 基本語法

src 指定當前播放的音頻文件碰辅，controls播放控制器夕凝，loop歌曲循環(huán)，autoplay自動播放 (chrome66之后被禁止)主流瀏覽器已經關閉了自動播放芥映，需要js觸發(fā)才行溅话，preload 預加載，如果使用了autoplay這個屬性preload就失效了盅称。

<audio src="xxxx.mp3" controls="controls" loop="loop" autoplay="autoplay">
 您的瀏覽器不支持html5的audio標簽
</audio>

5.5.2 Audio支持格式有：

Firefox：支持 Ogg Vorbis和WAV

Opera ：支持Ogg Vorbis和WAV

Safari ：支持MP3肩祥，AAC格式，和MP4

Chrome ：支持Ogg Vorbis缩膝，MP3混狠，WAV，AAC和MP4

Internet Explorer 9+ ：支持MP3疾层，AAC格式将饺，和MP4

IOS ：支持MP3，AAC格式痛黎，和MP4

Android ：支持AAC和MP3

Audio 不光是一個HTML標簽予弧，它還是一個window對象。既然是對象湖饱，那就有方法和屬性掖蛤。

5.5.3 對象的常用屬性和方法

currentTime，獲取當前播放時間
duration井厌，獲取歌曲的總時間
play蚓庭，播放

    audio.addEventListener("play",() => {});
    audio.onplay = () => {}

pause，暫停
loadstart旗笔，開始加載
durationchange彪置，時長數據變化
loadedmetadata，元數據已加載
progress蝇恶，加載中
canplay拳魁，可以播放
canplaythrough，邊緩沖邊播放
play()撮弧，播放歌曲
pause()潘懊，暫停歌曲
load()姚糊，重新加載歌曲

5.5.4 Audio.js

以前的Audio瀏覽器是不能直接播放的，如果需要播放一個音頻需要借助一個flash插件授舟。后來有了Audio.js的出現后救恨，播放音頻不用依賴flash插件了。flash是使用as來編寫的释树，它和JavaScript有點相像肠槽，但是有一些門檻，在此基礎上奢啥，出現了很多的Audio插件秸仙，audio插件做了兩件事情，一件是舊版的瀏覽器兼容（http://kolber.github.io/audiojs/）桩盲，第二件是美化自定義了瀏覽器的外觀寂纪。

  // 加載audio.js
<script src="/audiojs/audio.min.js"></script>
// 靜態(tài)加載
<script>
 audiojs.events.ready(function() {
 const as = audiojs.createAll();
 });
</script>
// 動態(tài)加載
<audio style="display:none" src="./music.mp3" preload="auto" />

5.5.5代碼演示

  <div id="msg"></div>
    <div>
        <button onclick="autoPlay(this)">暫停</button>
        <button onclick="audioMuted(this)">靜音</button>
        <button onclick="aduioPlus()">增加音量</button>
        <button onclick="aduioVSub()">減少音量</button>
    </div>
    <script>
        let media = new Audio("./CityofSky.mp3");

        var msg = document.querySelector('#msg')

        media.onloadstart = function(){
            msg.innerHTML = "開始加載音樂"
        }
        media.onprogress = function(){
            msg.innerHTML = "準備播放音樂"
            media.play()
        }

        media.onplay = function(){
            msg.innerHTML = "正在播放中"
            msg.innerHTML += "當前音量：" + Math.floor(media.volume * 100) + "%"
        }

        media.onended = function(){
            msg.innerHTML = "音樂播放結束"
        }

        function autoPlay(btn){
            if(media.paused || media.ended){
                media.play()
                btn.innerText = "暫停"
            }else{
                media.pause()
                btn.innerText = "播放"
            }
        }
        // 靜音
        function audioMuted(btn){
            if(media.muted){
                media.muted = false;
                btn.innerText = "靜音"
            }else{
                media.muted = true;
                btn.innerText = "取消靜音"
            }
        }

        // 增加音量
        function aduioPlus(){
            if(media.volume <= 0.9){
                media.volume += 0.1;
            }
        }

        // 減少音量
        function aduioVSub(){
            if(media.volume >= 0.1){
                media.volume -= 0.1;
            }
        }

        media.onvolumechange = function(){
            msg.innerHTML = "當前音量：" + Math.floor(media.volume * 100) + "%"
        }
    </script>

5.6 視頻

5.6.1 基本語法

src源，controls播放控制器赌结，loop 循環(huán)播放捞蛋，autoplay 自動播放，height柬姚，width拟杉，寬度和高度，在Audio里面不能指定伤靠，但是在Video里面是可以的捣域，muted 靜音，poster 預覽圖（當視頻沒有播放或者正在加載時展示給用戶的一張圖片宴合，為了交互的友好性）焕梅，preload 預加載，和autoplay一塊時失效卦洽。

<video
 src="xxxx.mp4"
 controls="controls"
 loop="loop"
 autoplay="autoplay"
>
 您的瀏覽器不支持html5的video標簽
</video>

5.6.2 video對象

常用的屬性和方法：

currentTime贞言，獲取當前播放時間
duration，獲取歌曲的總時間
play阀蒂，播放

    video.addEventListener("play",() => {});
    video.onplay = () => {}

pause该窗，暫停
loadstart，開始加載
durationchange蚤霞，時長數據變化
loadedmetadata酗失，元數據已加載
loadeddata，當前幀的數據已加載昧绣，無法播放下一幀
progress规肴，加載中
canplay，可以播放
canplaythrough ，邊緩沖邊播放
play()拖刃，播放視頻返回一個promise
pause() 删壮，暫停視頻
load() ，重新加載視頻

5.6.3 視頻格式與流媒體

video支持的視頻的格式主要有三種：MP4兑牡、ogg央碟、webm。

流媒體是指采用流式傳輸的方式在Internet播放的媒體格式(流媒體格式video標簽是不支持的)均函。流媒體又叫流式媒體亿虽，它是指商家用一個視頻傳送服務器把節(jié)目當成數據包發(fā)出，傳送到網絡上苞也。用戶通過解壓設備對這些數據進行解壓后经柴，節(jié)目就會像發(fā)送前那樣顯示出來。

典型的流媒體格式：rtmp墩朦、rtsp、flv都是流媒體的傳輸協(xié)議翻擒。

rtmp 是Adobe公司提供的一個流媒體協(xié)議氓涣，使用的是TCP協(xié)議，穩(wěn)定性好rtsp 是Netscape網景公司提供的一種協(xié)議陋气，使用的是UDP協(xié)議劳吠，實時性好flv 是蘋果公司提出的一個流媒體的一個協(xié)議，也是使用的TCP協(xié)議巩趁，把整個視頻流切割成一段一段的m3u8文件

5.6.4 Video.js

<link  rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>

const player = videojs('video', options, function onPlayerReady() {
    this.play();
    this.on('ended', function() {
        videojs.log('播放結束');
    });
});

5.6.5 代碼演示

  <video src="./課前操.mp4" id="media" style="width: 800px; height: 600px;"></video>
    <div id="msg"></div>
    <div>
        <button onclick="videoPlay(this)">暫停</button>
        <button onclick="videoMuted(this)">靜音</button>
        <button onclick="videoPlus()">增加音量</button>
        <button onclick="videoVSub()">減少音量</button>
        <button onclick="videoFull()">全屏</button>
    </div>
    <script>
        let media = document.getElementById('media')

        // 添加視頻封面
        media.poster = "./e70aee340e2021c7d89c26f6e12601eee5612d7e_raw.jpg"
        var msg = document.querySelector('#msg')

        media.onloadstart = function(){
            msg.innerHTML = "開始加載視頻"
        }
        media.onprogress = function(){
            msg.innerHTML = "準備播放視頻"
            media.play()
        }

        media.onplay = function(){
            msg.innerHTML = "正在播放中"
            msg.innerHTML += "當前音量：" + Math.floor(media.volume * 100) + "%"
        }

        media.onended = function(){
            msg.innerHTML = "視頻播放結束"
        }

        function videoPlay(btn){
            if(media.paused || media.ended){
                media.play()
                btn.innerText = "暫停"
            }else{
                media.pause()
                btn.innerText = "播放"
            }
        }
        // 靜音
        function videoMuted(btn){
            if(media.muted){
                media.muted = false;
                btn.innerText = "靜音"
            }else{
                media.muted = true;
                btn.innerText = "取消靜音"
            }
        }

        // 增加音量
        function videoPlus(){
            if(media.volume <= 0.9){
                media.volume += 0.1;
            }
        }

        // 減少音量
        function videoVSub(){
            if(media.volume >= 0.1){
                media.volume -= 0.1;
            }
        }

        // 全屏
        function videoFull(){
            // 全屏
            media.requestFullscreen();
        }
        media.onvolumechange = function(){
            msg.innerHTML = "當前音量：" + Math.floor(media.volume * 100) + "%"
        }
    </script>