vue的h5页面中使用视频播放插件

Posted 2023-03-18

参考技术A

h5项目中需要做视频课程播放,在网上搜了一下对应的插件,发觉xg-player西瓜播放器用起来不错.当然也踩了一些坑.
**西瓜播放器官方地址: ** http://h5player.bytedance.com/
西瓜播放器githuab官网: https://github.com/bytedance/xgplayer-vue

因为自己做的是个老项目,freemarker模板语法写的(总之是旧时代那种,你知道jsp就名字了),但是我想用自己的方式开发,所以在里面用了vue.

功能:

官网写的老的切换方式:
(1)先销毁视频,

(2)然后重新创建player实例

(3)启动播放器,播放视频

我写完了之后重新整理笔记,看到官网有更好的api切换视频,暂时还没有试过.

项目中的课程播放要比这个demo复杂的多,涉及到视频播放,图文播放,视频图文的切换播放

功能:

开始想的是获取课程列表,然后前台筛选判断应该播放哪一项,但是考虑到加载分页时会影响当前播放的视频,所以分页列表和正在播放视频分成了两个接口,并且前台需要处理的只是逻辑判断,不需要遍历操作整个列表,简化了查询匹配课程播放的问题.

在视频播放中需要监听视频的暂停,继续,结束状态.

vue使用vue-dplayer播放m3u8格式的视频——播放m3u8格式视频

播放m3u8格式视频方式二： vue使用vue-dplayer播放m3u8格式的视频

• 1、安装依赖
• 2、页面引入插件（这里我是页面单独引入，减少项目体积）
• 3、页面中的使用
• 4、常见问题
• • 4.1 首次打开视频弹出框报：The element or ID supplied is not valid. (videojs)错误
  • 4.2 禁用视频右键菜单
• 5、实现过程
• 6、实现.m3u8格式视频播放方法

播放器在拿到XXX.m3u8视频地址后，会去请求拿到分片数据资源，也就是一大串的.ts文件列表，然后依次去请求这些.ts文件（当然这些是播放器内部自己实现的）

1、安装依赖

    npm i vue-dplayer -S // 视频播放器插件
    npm i hls.js -S  // 播放hls流插件

2、页面引入插件（这里我是页面单独引入，减少项目体积）

import Hls from "hls.js"; 
import VueDPlayer from "vue-dplayer";
import "vue-dplayer/dist/vue-dplayer.css";

3、页面中的使用

<template>
  <div class="myVideo">
    <d-player id="dplayer" ref="player" class="dplayer video-box" :options="optionsPlayer"></d-player>
  </div>
</template>

<script>
import Hls from "hls.js"; 
import VueDPlayer from "vue-dplayer";
import "vue-dplayer/dist/vue-dplayer.css";
export default 
  components: 
    "d-player": VueDPlayer,
  ,

  data() 
    return 
      optionsPlayer: 
        container: this.$refs.player, //播放器容器
        mutex: false, //  防止同时播放多个用户，在该用户开始播放时暂停其他用户
        theme: "#b7daff", // 风格颜色，例如播放条，音量条的颜色
        loop: false, // 是否自动循环
        lang: "zh-cn", // 语言，'en', 'zh-cn', 'zh-tw'
        screenshot: true, // 是否允许截图（按钮），点击可以自动将截图下载到本地
        hotkey: true, // 是否支持热键，调节音量，播放，暂停等
        preload: "auto", // 自动预加载
        volume: 0.7, // 初始化音量
        playbackSpeed: [0.5, 0.75, 1, 1.25, 1.5, 2, 3], //可选的播放速度，可自定义
        logo: "https://qczh-1252727916.cos.ap-nanjing.myqcloud.com/pic/273658f508d04d488414fd2b84c9f923.png", // 在视频左上角上打一个logo
        video: 
          type: "customHls",
          url: "https://e-sign.dms.t.cn-np.com/files/m3u8_file/c4b94118-3c8d-4410-9987-985c2b44c278/c4b94118-3c8d-4410-9987-985c2b44c278.m3u8", // 播放视频的路径
          customType: 
            customHls: function (video, player) 
              const hls = new Hls();
              hls.loadSource(video.src);
              hls.attachMedia(video);
            ,
          ,
          // quality: [
          // 设置多个质量的视频
          // 
          //   name: "高清",
          //   url:
          //     "https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4",
          //   type: "auto" // 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal' 或 其他自定义类型
          // ,
          // 
          //   name: "标清",
          //   url:
          //     "https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4",
          //   type: "auto"
          // 
          // ],
          defaultQuality: 0, // 默认是高清
          pic: "https://cn.bing.com/th?id=OHR.MeotoIwa_ZH-CN3126370410_1920x1080.jpg&rf=LaDigue_1920x1080.jpg", // 视频封面图片
          thumbnails: "https://cn.bing.com/th?id=OHR.MeotoIwa_ZH-CN3126370410_1920x1080.jpg&rf=LaDigue_1920x1080.jpg", // 进度条上的缩略图,需要通过dplayer-thumbnails来生成
        ,
        // subtitle: 
        //   //字幕
        //   url: "", //字幕网址
        //   color: "#fff", //字幕颜色
        //   fontSize: "20px",
        //   bottom: "40px"
        // ,
        // danmaku: 
        //   // 弹幕
        //   id: "9E2E3368B56CDBB4",
        //   api: "https://api.prprpr.me/dplayer/",
        //   token: "tokendemo", //后端验证令牌
        //   maximum: 1000, //弹幕最大数量
        //   addition: ["https://api.prprpr.me/dplayer/v3/bilibili?aid=4157142"], //其他弹幕
        //   user: "DIYgod", //弹幕用户名
        //   bottom: "15%", //值，例如：10px，10％，即弹幕底部和播放器底部之间的距离，以防止遮挡字幕
        //   unlimited: true //即使弹幕重叠也显示所有弹幕
        // ,
        contextmenu: [
          //  自定义上下文菜单
          // 右键菜单
          
            text: "选项二",
            click: (player) => 
              console.log(player);
            ,
          ,
        ],
        highlight: [
          //进度条上的自定义时间标记
          // 进度条时间点高亮
          
            text: "10M",
            time: 6,
          ,
          
            text: "20M",
            time: 12,
          ,
        ],
      ,
    ;
  ,
;
</script>

<style lang="less" scoped>
.video-box 
  width: 100%;
  max-width: 500px;
  max-height: 500px;

</style>

4、常见问题

4.1 首次打开视频弹出框报：The element or ID supplied is not valid. (videojs)错误

问题： 首次打开视频弹出框报：The element or ID supplied is not valid. (videojs)错误
原因： videojs找不到需要初始化的playerID，页面未找到相应组件

解决方法： 延迟加载。
例如：

1. 使用 this.$nextTick
2. 放在mounted钩子函数里
3. 使用setTimeout
4. …

4.2 禁用视频右键菜单

1. 阻止点击事件

  mounted() 
    // 禁用视频右键
     document.querySelector("#dplayer").oncontextmenu = () => 
       document.querySelector(".dplayer-menu").style.display = "none";
       document.querySelector(".dplayer-mask").style.display = "none";
       return false;
     ;
  ,

2. CSS设置不可见

<style lang="less" scoped>
// 禁用视频右键
::v-deep .dplayer-menu,.dplayer-mask 
  display: none !important;

</style>

5、实现过程

播放器在拿到XXX.m3u8视频地址（索引文件）后，会去请求拿到分片数据资源，也就是一大串的.ts文件列表，然后依次去请求这些.ts文件（当然这些是播放器内部自己实现的）

6、实现.m3u8格式视频播放方法

vue 实现.m3u8格式视频播放的方法有很多，可以看我上两篇博客，都有贴代码实现

1、原生videojs : vue使用原生videojs 播放m3u8格式的视频
2、vue-dplayer : vue使用vue-dplayer 播放m3u8格式的视频
3、dplayer ： dplayer 播放m3u8格式的视频