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

最新推荐文章于 2024-03-13 15:13:02 发布

原创最新推荐文章于 2024-03-13 15:13:02 发布 · 653 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #html5 #npm #node.js

这篇博客介绍了如何在Vue项目中利用video.js库创建视频直播功能。首先，通过npm安装video.js及相关依赖，然后在main.js中全局引入并配置。在页面中，创建video元素并指定源，实例化video.js，监听播放、暂停和结束事件。当组件销毁时，要记得释放video.js实例，避免资源冲突。

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();
},

更多功能请参考官网