基于vue的video播放器

当现有video播放器不能满足需求时,需要自己对video进行封装。

video属性

 

src: 视频的URL
poster: 视频封面
currentTime:视频当前播放位置,以秒为单位
duration:视频的时长,以秒为单位
loop:设置视频是否循环播放,值为true/false。当为true时,视频播放结束后,自动返回视频开始的地方。
autoplay: 设置视频是否自动播放,值为true/false。
muted:设置视频的音频默认状态,值为true/false,。当为false时,静音。
webkit-playsinline='true' playsinline='true': 视频在元素区域内播放。防止ios用户视频播放自动全屏
preload='auto': 优先加载视频
x5-video-player-type='h5-page': 启用X5内核同层渲染
x5-video-orientation='portraint': 设置播放器支持的方向,竖屏

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延迟大。

封装video

/** HTML **/
/** 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;
        }
    }
}

[参考文章]:

  1. X5内核视频两种播放形态
  2. H5直播Video标签坑汇总
  3. H5直播入门(理论篇)
  4. 全面进阶 H5 直播

你可能感兴趣的