关于javascript:基于vue的video播放器

52次阅读

共计 3300 个字符，预计需要花费 9 分钟才能阅读完成。

当现有 video 播放器不能满足需要时，须要本人对 video 进行封装。

loadstart: 在视频开始加载时触发，给 currentTime 赋值 (历史播放记录或 0)。
durationchange: 元信息已载入或已扭转，视频的长度产生了扭转。获取到视频长度(duration，并给 currentTime 赋值(历史播放记录或 0))。
playing: 在视频开始播放时触发（不论是首次播放、在暂停后复原、或是在完结后从新开始）。
pause: 播放暂停时触发。
timeupdate: currentTime 扭转, 更新播放进度。解决播放进度条
seeked: 指定播放地位
waiting: 缓冲
ended: 播放完结, 重置状态
WeixinJSBridgeReady: 在微信中应用 video，须要监听 weixinJSBridgeReady 事件, 在回调函数里执行 play() 命令。

HLS(HTTP Live Streaming)由 Apple 提出的直播流协定。IOS 和高版本 Android 都反对 HLS。HLS 次要由.m3u8 和.ts 两种播放文件。HLS 具备高兼容性，高可扩展性，但会直播延时。HLS 协定是将直播流分成一段一段的小段视频去下载播放的，所以假如列表外面的蕴含 5 个 ts 文件，每个 ts 文件蕴含 5 秒的视频内容，那么整体的提早就是 25 秒。
RTMP(Real Time Messaging Protocol)是 Macromedia 开发的一套视频直播协定，当初属于 Adobe。RTMP 基于 flash 无奈在 IOS 的浏览器里播放，然而实时性比 HLS 要好。
HTTP-FLV针对于 FLV 视频格式做的直播散发流，延时低。但挪动端不反对。

论断：HTTP-FLV延时低，优先应用。若设施不反对 HTTP-FLV，应用flv.js。若设施不反对 flv.js，则应用 HLS，但 HLS 提早大。

/** HTML **/
<div class="video">
    <!-- video player -->
    <video
        class="video__player"
        ref="videoPlayer"
        preload="auto"
        :autoplay="options.autoplay"
        :muted="options.muted"
        webkit-playsinline="true"
        playsinline="true"
        x-webkit-airplay="allow"
        x5-video-player-type="h5-page"
        x5-video-orientation="portraint"
        style="object-fit:cover;"
    >
        <source :src="options.src" />
    </video>

    <!-- video poster -->
    <div
        v-show="showPoster"
        class="video__poster"
        :style="{'background-image':'url('+ options.pic +')'}"
    ></div>

    <!-- video loading -->
    <div v-show="showLoading" class="video__Loading">
        <span class="video__Loading-icon"></span>
    </div>

    <!-- video pause -->
    <div @click="handleVideoPlay" class="video__pause">
        <span v-show="!videoPlay" class="video__pause-icon"></span>
    </div>
</div>

/** js**/
props: {
    options: {
        type: Object,
        default: () => {}
    }
},
data() {
    return {
        videoPlay: false, // 是否正在播放
        videoEnd: false, // 是否播放完结
        showPoster: true, // 是否显示视屏封面
        showLoading: false, // 加载中
        currentTime: 0, // 以后播放地位
        currentVideo: {duration: this.options.duration},

    }
},
mounted() {
    this.videoPlayer = this.$refs.videoPlayer;
    this.videoPlayer.currentTime = 0;
    
    this.videoPlayer.addEventListener("loadstart", e => {this.videoPlayer.currentTime = (this.options.playProcess > 0) ? this.options.playProcess : 0;
    });
    
     // 获取到视频长度
    this.videoPlayer.addEventListener("durationchange", e => {
        this.currentVideo.duration = this.videoPlayer.duration;
        // 存在播放历史记录
        this.videoPlayer.currentTime = (this.options.playProcess > 0) ? this.options.playProcess : 0;
    });
    
    this.videoPlayer.addEventListener("playing", e => {
        this.showPoster = false;
        this.videoPlay = true;
        this.showLoading = false;
        this.videoEnd = false;
    });
    
    // 暂停
    this.videoPlayer.addEventListener("pause", () => {
        this.videoPlay = false;
        if (this.videoPlayer.currentTime < 0.1) {this.showPoster = true;}
        this.showLoading = false;
    });
    
    // 播放进度更新
    this.videoPlayer.addEventListener("timeupdate", e => {this.currentTime = this.videoPlayer.currentTime;},
        false
    );

    // 指定播放地位
    this.videoPlayer.addEventListener("seeked", e => {});

    // 缓冲
    this.videoPlayer.addEventListener("waiting", e => {this.showLoading = true;});
    
    // 播放完结
    this.videoPlayer.addEventListener("ended", e => {
        // 重置状态
        this.videoPlay = false;
        this.showPoster = true;
        this.videoEnd = true;
        this.currentTime = this.currentVideo.duration;
    });
    
    // 监听 weixinJSBridgeReady 事件，解决微信不能自动播放。但并不全副实用，加了暂停按钮，手动播放。document.addEventListener('WeixinJSBridgeReady', () => {this.videoPlayer.play();
    }, false);
},
methods: {handleVideoPlay() {if (this.videoPlayer.paused) { // 播放
            if(this.videoEnd) { // 重播
                this.currentTime = 0;
                this.videoPlayer.currentTime = 0;
            }
            this.videoPlayer.play();
            this.videoPlay = true;
        } else { // 暂停
            this.videoPlayer.pause();
            this.videoPlay = false;
        }
    }
}

[参考文章]: