Vue使用videojs做直播

qq_40501683

已于 2022-04-14 10:07:43 修改

阅读量1k

点赞数

文章标签： javascript vue

于 2022-04-14 10:03:27 首次发布

本文链接：https://blog.csdn.net/qq_40501683/article/details/124164784

版权

本文介绍了如何在Vue项目中使用videojs插件进行直播功能的实现。首先，需要安装videojs并选择在vue组件内局部引入。接着，在模板中添加video元素并设置必要的属性，如muted静音。然后，初始化videojs并在data中定义相关配置。在mounted生命周期钩子中进行videojs的初始化。最后，为了增强交互性，还可以在video组件中添加自定义按钮。

摘要由CSDN通过智能技术生成

安装videojs插件

npm i videojs-contrib-hls –save//hls格式需要使用这个
npm i video.js --save

引入插件：
可以在main.js中全局引入也可以在需要使用的vue文件中引入
本文选择的在使用的文件中引入

import videojs from "video.js";
import "video.js/dist/video-js.css";
import "videojs-contrib-hls.js/src/videojs.hlsjs.js";

使用
Template中（必须步骤）
说明：muted//这个是静音

<video
        muted
        class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9"
        autoDisable="false"
        id="videobox"
        preload="auto"
        playsinline="true"
        width="100%"
        ref="videoRef"
        x5-video-orientation="landscape"
      >
        <source id="sourceBox" :src="videoSrc" type="application/x-mpegURL" />
      </video>