vue3 + video.js 加载多种视频流(HLS、FLV、RTMP、RTSP)封装开箱及用，发布npm

vue3 + video.js 加载多种视频流(HLS、FLV、RTMP、RTSP)封装开箱及用，发布npm

提示：这里兼容了rtmp数据流，但是前提需要下载支持flash插件的浏览器

---

---

前言

上一偏我们使用vue3和vite封装了一个audio插件发布npm官网，这里我们将封装一个视频video插件并发布npm供大家参考

---

提示：下面不涉及新建项目和打包npm流程，需要的请看上一篇
vue3 + vite自定义封装vue+audio ，并发布到npm详情介绍

封装组件

一. 用video.js实现视频播放

1. 安装video.js插件,这里我们使用的是在index.html中引入的本地css

      //引入video插件
    <script src="/public/static/js/video.min.js"></script>
    <script src="/public/static/js/videojs-contrib-hls.min.js"></script>
    //如果需要播放rtmp直播流，需安装一下插件
    <script src="/public/static/js/videojs-flash.min.js"></script>
    //引入键盘控制video插件
    <script src="/public/static/js/videojs.hotkeys.min.js"></script>
   

   2. 在组件代码里使用

     <template>
          <div class="videoBox">
             <video id="myVideoBig"
                class="video-js vjs-default-skin vjs-big-play-centered"
                loop="loop"
                :poster="posterSrc"
                 data-setup=''
                 muted="muted"
                 style="object-fit: fill; width: 100%; height: 100%">
             <source :src="videoSrc"
                 ref="videos"
                 id="source"
                :type="format" />
             <p class="vjs-no-js">不支持播放</p>
             </video>
           </div>
       </template>     

video的class “vjs-big-play-centered” 播放按钮默认在左上角，会遮挡，不过这个是可以根据参数修改的，只需要给video标签加一个class（vjs-big-play-centered）就可以居中显示了

3. 定义常用video.js 配置项

• autoplay：true/false 播放器准备好之后，是否自动播放 【默认false】
• controls：true/false 是否拥有控制条 【默认true】，如果设为false， 界面上不会出现任何控制按钮，启动视频播放的唯一方法是使用autoplay 属性或通过Player API
• height: 视频容器的高度，字符串或数字（以像素为单位），比如： height: 300 或者 height: ‘300px’
• width: 视频容器的宽度, 字符串或数字（以像素为单位）
• loop : true/false 视频播放结束后，是否循环播放
• muted : true/false 是否静音
• poster: 播放前显示的视频画面，播放开始之后自动移除。通常传入一个URL
• language: “zh-CN”
• errorDisplay :是否显示错误提示
• fluid : 跟随外层容器变化大小，跟随的是外层宽度
• controlBar: 是否显示控制条，设为false不渲染控制条DOM元素，只设置controls为false虽然不展示，但是存在
• notSupportedMessage ：允许覆盖Video.js无法播放媒体源时显示的默认信息
• techOrder：定义Video.js技术首选的顺序 [‘html5’, ‘flash’]
• plugins：放插件的地方是否支持热键
  • hotkeys：过键盘按键来控制视频播放的功能
    • volumeStep： 0.1 调整音量的步长
    • seekStep: 5, 快进/快退的时间（秒）
    • fullscreenKey:(event, player)=>{} 监听键盘按键
• preload: 预加载
  • ‘auto’：立即开始加载视频（如果浏览器支持）。某些移动设备不会预加载视频，以保护用户的带宽/数据使用。
  • ‘metadata’：仅加载视频的元数据，其中包括视频的持续时间和尺寸等信息。有时，元数据将通过下载几帧视频来加载。
  • ‘none’：不要预加载任何数据。浏览器将等待用户点击“播放”开始下载。
• children: Array | Object 可选子组件 从基础的Component组件继承而来的子组件，数组中的顺序将影响组件的创建顺序

这里我们设置一个变量储存videojs使用的配置项以便后期批量使用

const videoParameter = ref({
   
  autoplay: isautoplays.value, // 是否自动播放
  language: "zh-CN",
  controls: iscontrols.value, // 是否显示控制为false时用户不可以与之交互控件
  preload: "auto", // 自动加载 预加载 建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
  errorDisplay: true,// 错误展示
  fluid: true, // 跟随外层容器变化大小，跟随的是外层宽度
  controlBar: iscontrolBar.value,
  // textTrackDisplay: false,  // 不渲染字幕相关DOM
  // 是否支持热键|过键盘按键来控制视频播放的功能
  plugins: