vue项目引入videojs做视频直播等

vue项目引入videojs做视频直播等

video.js是什么

Video.js是专为HTML5世界打造的网络视频播放器。
https://videojs.com/

使用方式 npm

npm install --save-dev video.js

使用方式

main.js 全局配置（也可以在页面中直接使用，此处进行里了全局引入）

import Video from 'video.js'
import 'video.js/dist/video-js.css'
import 'videojs-flash'
Vue.prototype.$_video = Video;

页面中使用

<video
        :id="playId"
      >
        <source :src="url" type="application/x-mpegURL" id="target" />
</video>

实例化
this.$_video(this.playId, { poster: "", controls: "true" }, function () {
        this.on("play", function () {
          console.log("正在播放");
        });
        //暂停--播放完毕后也会暂停
        this.on("pause", function () {
          console.log("暂停中");
        });
        // 结束
        this.on("ended", function () {
          console.log("结束");
        });
});

组件离开后记得销毁实例，否则会出现冲突，造成下一个视频播放不出来

beforeDestroy() {
    this.$_video(this.playId).dispose();
},

更多功能请参考官网