HTML5 多媒体

5.5 音频

5.5.1 基本语法

src 指定当前播放的音频文件，controls播放控制器，loop歌曲循环，autoplay自动播放 (chrome66之后被禁止)主流浏览器已经关闭了自动播放，需要js触发才行，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>
// 静态加载
<script>
 audiojs.events.ready(function() {
 const as = audiojs.createAll();
 });
</script>
// 动态加载
<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 循环播放，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标签是不支持的)。流媒体又叫流式媒体，它是指商家用一个视频传送服务器把节目当成数据包发出，传送到网络上。用户通过解压设备对这些数据进行解压后，节目就会像发送前那样显示出来。

典型的流媒体格式：rtmp、rtsp、flv都是流媒体的传输协议。

rtmp 是Adobe公司提供的一个流媒体协议，使用的是TCP协议，稳定性好rtsp 是Netscape网景公司提供的一种协议，使用的是UDP协议，实时性好flv 是苹果公司提出的一个流媒体的一个协议，也是使用的TCP协议，把整个视频流切割成一段一段的m3u8文件

5.6.4 Video.js

<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" 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>