79. 基于Vue的视频播放器

79. 基于Vue的视频播放器

功能：自定义播放器样式，可播放，可快进，可后退

audio的常用的属性

• controls 。如果声明了该属性，浏览器将提供一个包含声音，播放进度，播放暂停的控制面板，样式由浏览器决定。
• currentTime。当前音频已播放时长。
• duration。当前音频总时长。
• preload。预加载，这是一个枚举属性，none表示不做预加载，metadata表示会对元数据(比如音频时长)做预加载，auto表示会尝试对元数据以及音频柳做完全预加载。
• src。音频文件的地址。
• playbackRate。播放速度。网上常见的1x,1.5x,0.5x播放速度就是利用该属性实现的。

audio的常用的事件

• loadedmetadata。表示音频元数据已经被加载，我们一般在这里通过event.target.duration获取音频总时长。
• canplay。这个事件会在loadedmetadata之后触发，表示音频可以被播放了。
• canplaythrough。这个事件会在canplay之后触发，表示浏览器认为不出意外的话音频可以被播到最后。
• play。表示音频已开始播放。
• pause。表示音频已暂停播放。
• ended。表示播放完了最后一帧。
• error。表示播放出错，可能是音频文件地址无效，或者音频格式不支持。
• timeupdate。表示正在播放中，播放过程中会被频繁触发，一般在这里通过event.target.currentTime来实时获取已播放时长。

audio的常用的方法

• play。播放音频。此方法会返回一个Promise对象。不需要音频数据已经加载到能够播放的状态。如果录音文件地址可用，会走到fulfilled状态；如果录音文件地址不可用或者缺失，会走到rejected状态；
• pause。暂停音频。返回值和行为均与play一样。

部分场景

1，显示音频时长如何实现？

答：监听loadedmetadata,通过event.target.duration取出音频总时长，因为音频总时长单位为秒，所以一般情况下都会有一个秒转换为时分秒格式的需求，而且一般情况下还要补0，实现如下：

formatTime:function(time) {
        time = +time
        let min = Math.floor((s % 3600) / 60);
        let sec = Math.floor(s % 60);

        min = min < 10 ? `0${min}` : min;
        sec = sec < 10 ? `0${sec}` : sec;

        return `${min}:${sec}`;
    }

2，如何动态获取当前播放百分比？

答：监听timeupdate事件，通过event.target.currentTime / event.target.duration来计算百分比。

源码

视图

<div class="m-audio">
            <div class="audio">
                <span class="time">{
  {currentTime?currentTime:'00:00'}}</span>
                <van-slider 
                button-size="0.16rem" 
                class="slider" 
                v-model="value" 
                @change="changeXm" 
                @drag-start="dragStart"
                @drag-end="dragEnd" 
            />
                <span class="time">{
  {duration?duration:'00:00'}}</span>
            </div>
            <div class="controls">
                <img @click="retreat" class="wrap" :src="tempImg + '/left.png'">
                <img v-if="!playStatue" @click="playAudio" class="play" :src="tempImg + '/play.png'">
                <img v-else @click="playAudio" class="play" :src="tempImg + '/pause.png'">
                <img @click="speed" class="wrap" :src="tempImg + '/right.png'">
            </div>
            <audio 
                ref="audio"
                src="http://mp32.9ku.com/upload/128/2020/04/17/1003659.mp3" 
                @loadedmetadata="loadedmetadataXm"
                @timeupdate="timeupdateXm"
                :preload="true"
                >

            </audio>