uniapp视频播放器（h5+app）_uniapp video @controlstoggle

关于uniapp视频播放器遇到的一些问题，mark下。

中途遇到了很多问题，如果有相同的伙伴遇到了类似的，欢迎交流

• 官方的video播放器在app上不友好，有以下功能不支持。

1. @loadedmetadata、@controlstoggle不支持导致只能手写控制层。

2. 不支持外挂字幕，因为video在app上运行时，是采用的ijkplayer库来实现的，ijkplayer目前也不支持外挂字幕

3. 使用subNVues或者cover-view来自定义绘制视频界面覆盖（因为cover-view不支持嵌套，所以最后采用使用subNVues）

4. video在h5需要播放时采用的是html的video标签，但是不支持m3u8格式，最后采用的是dplayer播放器+hls来实现的m3u8播放（也可以通过m3u8格式转换后再进行播放）

我这边的想要的是自定义绘制视频界面，这样做的话就需要将video原有的control相关的功能重写（播放、暂停、快进、快退、全屏、音量等），全屏和非全屏两套样式，通过官方提供的uni.createVideoContext(videoId, this)可以获取到video的实例，然后通过实例调用video的api，比如play、pause等。

最终我这边实现后的播放器支持以下功能：

1. app端自定义界面，播放、暂停、快进、快退、全屏、音量、选集、倍速、清晰度切换、手势（快进、后退、亮度调节、音量调节）。
2. h5采用的是dplayer播放器+hls支持m3u8格式播放。
3. 支持外挂字幕（SRT通过）
   下面说下具体的实现和遇到的问题：

1. 配置subNVues子窗体

1. 这里注意的一点是path路径是从根目录开始的，不是对应的父窗体的相对路径。

2. 文件格式一定是要nvue格式。

   配置完之后子窗体就会在对应的页面上显示。

2.配置video播放界面

1. 因为我们需要自定义界面所以video的controls需设置为false

2. 全屏和非全屏后界面有些许差异，比如全屏后才可以选集等其他功能，那需要设计出两套样式。

   通过ref拿到video实例

videoCTX = this.$refs.video
1

全屏和取消全屏事件

  // 全屏/退出全屏
  fullOrExitScreen() {
    if (this.fullScreenStatus) {
      videoCTX.exitFullScreen()
    } else {
      videoCTX.requestFullScreen()
    }
  },
1
2
3
4
5
6
7
8

3. 设置手势操作

手势操作分为向上向下向左向右四个方位

• 向左向右：快进、后退
• 屏幕左侧上下滑动：亮度调节
• 屏幕右侧上下滑动：音量调节

使用touchStart、touchMove、touchend来实现此功能

touchStart时存储首次的坐标点

this.oldTouchs = e.changedTouches[0]
1

我这边定义的touchType为三种类型，currentTime进度、luminance亮度、volume音量

1. 首先先判断是否为上下滑动，如果上下的话就只能是亮度和音量调节，接着获取屏幕的宽度，判断手势移动的x坐标是否大于屏幕宽度的1/2，如果是就为音量调节，否则为亮度调节。

2. 如果为进度条的话则先保存当前进度，视频暂停，通过x轴移动的距离计算出当前进度，然后通过video的seek方法跳转到当前进度。

然后再touchEnd设置video进度

3. 音量调节也是一样的 算出滑动的距离后通过plus.device.setVolume设置

4. 亮度调节也是一样的 算出滑动的距离后通过plus.screen.setBrightness设置

4. 配置字幕

1. 如果是VVT格式可以采用video中track标签实现，.vtt 格式文件属于 Web Video Text Tracks Format（WebVTT），是一种基于文本 UTF-8 编码的格式，为 Web 媒体元素提供字幕数据文件。WebVTT 的 MIME 格式是 text/vtt。
2. 我这边项目中是用的是SRT格式的，但是video无法解析出来，所以想到的办法是将SRT字幕格式转换成js可以解析的json格式。

下面是SRT原格式

3. 通过以下函数将数据转换为数组

   createSrtArr(srt) {
      let arr = srt.split(/\n\n|\r\r|\r\n\r\n/)
      let result = []
      arr.forEach(item => {
        let srtObj = {}
        let containArr = item.split(/\n/)
   
        if (containArr[1]) {
          //此处正则用于取出00:00:00，213 --> 00:00:00，213这种结构，防止可能存在于此行的x，y坐标对后续处理造成影响
          var reg = /^(\d{2}):(\d{2}):(\d{2})[\.,](\d{1,3}) --\> (\d{2}):(\d{2}):(\d{2})[\.,](\d{1,3})/g
          let regResult = reg.exec(containArr[1])
          if (regResult) {
            let timeSplit = regResult[0].split(' --> ')
            srtObj.from = this.getSeconds(timeSplit[0])
            srtObj.to = this.getSeconds(timeSplit[1])
            //这里的两个replace主要是将srt中可能携带的font标签转化为易用的span，当时遇到了如果是font标签的话没办法继承父元素的字体大小的问题，题外话：本次字母字体大小采用了媒体查询进行设置
            srtObj.htmlText = containArr.slice(2).join(`\n`).replace(/\<font/g, '<span').replace(/\<\/font/g,
              '</span')
            result.push(srtObj)
          }
        }
      })
      return result
    }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24

转换后的数据格式如下

4. 通过currentTime时长和获取到的subtitlesArray字幕数组获取到对应时间的字幕。

  getSubtitle(currentTime, arr) {
      let left = 0;
      let right = arr.length - 1;
      while (left <= right) {
        let mid = Math.floor((left + right) / 2);
        if (currentTime >= arr[mid].from && currentTime <= arr[mid].to) {
            return arr[mid].htmlText;
        } else if (currentTime < arr[mid].from) {
            right = mid - 1;
        } else {
            left = mid + 1;
        }
    }
    return null; // 如果未找到匹配的时间段，则返回null或者其他您认为合适的值
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

PS: 这个里有注意事项，因为我这边是需要兼容h5和app端，通过时长获取到的字幕数据有可能携带标签，所以需要富文本展示，h5和app上均需要做处理。

  <!-- #ifdef H5 -->
		<view class="subtitles" v-html='subtitles'></view>
	<!-- #endif -->
	<!-- #ifdef APP-PLUS -->
		<rich-text class="subtitles" :nodes="nodes" :style="videoBox">
	<!-- #endif -->
	</rich-text>
1
2
3
4
5
6
7
8

  const res = this.getSubtitle(value,this.subtitlesArray) || ''
  if (this.subtitlesArray.length) {
    // #ifdef APP-PLUS
    this.nodes[0].children[0].text =res
    // #endif
    // #ifdef H5
    this.subtitles = res
    // #endif
  }
1
2
3
4
5
6
7
8
9

这里先简单记录下，因为时间有限，代码已上传到线上，有需要的伙伴可以下载下来参考下。传送门