uniapp视频播放器(h5+app)

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

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

  • 官方的video播放器在app上不友好,有以下功能不支持。
  1. @loadedmetadata、@controlstoggle不支持导致只能手写控制层。

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

  1. 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

在这里插入图片描述

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

    通过ref拿到video实例

videoCTX = this.$refs.video

全屏和取消全屏事件

  // 全屏/退出全屏
  fullOrExitScreen() {
    if (this.fullScreenStatus) {
      videoCTX.exitFullScreen()
    } else {
      videoCTX.requestFullScreen()
    }
  },

3. 设置手势操作

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

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

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

touchStart时存储首次的坐标点

this.oldTouchs = e.changedTouches[0]

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

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

在这里插入图片描述

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

在这里插入图片描述

然后再touchEnd设置video进度

在这里插入图片描述

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

在这里插入图片描述

  1. 亮度调节也是一样的 算出滑动的距离后通过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原格式

在这里插入图片描述

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

    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. 通过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或者其他您认为合适的值
  }

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>
  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
  }

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/584697.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

集成框架 -- OSS

前言 接入oss必须有这两个文档基础 使用STS临时访问凭证访问OSS_对象存储(OSS)-阿里云帮助中心 前端上传跨域 正文 sts前后端通用&#xff0c;开通图示 AliyunSTSAssumeRoleAccess 后端实现代码 public static void main(String[] args) {String regionId "cn-ha…

Oracle 表分区

1.概述 分区表就是将表在物理存储层面分成多个小的片段&#xff0c;这些片段即称为分区&#xff0c;每个分区保存表的一部分数据&#xff0c;表的分区对上层应用是完全透明的&#xff0c;从应用的角度来看&#xff0c;表在逻辑上依然是一个整体。 目的&#xff1a;提高大表的查…

2024年北京市中小学生信息学能力测评活动BCSP-X小学低年级组初赛测试题(模拟题)

一、单项选择&#xff08;共 15 题&#xff0c;每题 2 分&#xff0c;共计 30 分&#xff0c;每题有且仅有一个正确选项&#xff09; 不可以作为c中的变量名的是&#xff08; &#xff09;。 A. I以下loveChinaB. I_loveChinaC. I_love_ChinaD. i_loveChina 在体育课上&#xf…

teamOS协作通知,我的新晋办公搭子,完美把控项目动态,再也不担心错过协作变更了,谁也不能背着我偷偷内卷

有没有碰到过这样的情况&#xff0c;在企业网盘中建了新项目的协作组&#xff0c;和团队成员一起做项目&#xff0c;正常来说应该是能更好的完成工作。 但是现实就是&#xff0c;项目文件修改了&#xff0c;如果不用微信或者其他方式发个通知&#xff0c;团队成员往往都不知道…

selenium 4.x 入门(环境搭建、八大元素定位)

背景 Web自动化测现状 1. 属于 E2E 测试 2. 过去通过点点点 3. 好的测试&#xff0c;还需要记录、调试网页的细节 一、selenium4.x环境搭建 一键搭建 pip3 install webdriver-helper 有建议要 1.0.1 版本的&#xff0c;但本人按上面的是可以正常使用&#xff08;看…

计算机科学与技术就业方向和前景怎么样

计算机科学与技术专业的就业方向极为广泛&#xff0c;方向可以是软件开发与工程、网络与信息安全、数据科学与大数据分析等&#xff0c;几乎渗透到现代社会的每一个角落。以下是上大学网 &#xff08;www.sdaxue.com)对计算机科学与技术专业一些主要的就业方向及其前景分析&…

【Redis 开发】Redis哨兵

哨兵 作用和原理服务状态监控选举新的master 搭建哨兵集群RedisTemplate的哨兵模式 作用和原理 Redis提供了哨兵机制来实现主从集群中的自动故障恢复&#xff1a; 哨兵也是一个集群 监控&#xff1a;会不断检查master和slave是否按预期工作自动故障恢复&#xff1a;如果mast…

基于FPGA的数字信号处理(2)--什么是定点数?

在实际的工程应用中&#xff0c;往往会进行大量的数学运算。运算时除了会用到整数&#xff0c;很多时候也会用到小数。而我们知道在数字电路底层&#xff0c;只有「高电平1」和「低电平0」的存在&#xff0c;那么仅凭 0和1 该如何表示小数呢&#xff1f; 数字电路中&#xff0…

SpringBoot实现图片上传(个人头像的修改)

SpringBootlayui实现个人信息头像的更改 该文章适合对SpringBoot&#xff0c;Thymeleaf&#xff0c;layui入门的小伙伴 废话不多说&#xff0c;直接上干货 Springbootlayui实现头像更换 前端公共部分代码 HTML页面代码 <div class"layui-card-header" style&quo…

IP定位技术企业网络安全检测

随着信息技术的飞速发展&#xff0c;网络安全问题日益凸显&#xff0c;成为企业运营中不可忽视的一环。在众多网络安全技术中&#xff0c;IP定位技术以其独特的优势&#xff0c;为企业网络安全检测提供了强有力的支持。本文将深入探讨IP定位技术在企业网络安全检测中的应用及其…

QT学习之读取xml中信息

背景&#xff1a; 我们每次注册后会生成对应的启动码文件&#xff0c;格式如下&#xff0c;启动码最后要在测试工具使用的进行一个验证&#xff0c;验证通过后模块才能使用。所以我希望每次的xml都放在一个文件夹里&#xff0c;等我选择文件夹后&#xff0c;能提取所有xml中的对…

手把手教会西门子PLC代码可视化功能——Prodiag

一、传统的HMI报警方法 在HMI中建立离散量报警&#xff0c;输入报警文本。这种方法的劣势&#xff1a; 1、在PLC程序中需要建立专门报警程序&#xff0c;用于关联HMI中的报警变量 2、需要在HMI文本中输入报警文本 如果程序复杂&#xff0c;报警众多&#xff0c;用这种方法需…

性能监控之prometheus+grafana搭建

前言 Prometheus和Grafana是两个流行的开源工具&#xff0c;用于监控和可视化系统和应用程序的性能指标。它们通常一起使用&#xff0c;提供了强大的监控和数据可视化功能。 Prometheus Prometheus是一种开源的系统监控和警报工具包。它最初由SoundCloud开发&#xff0c;并于…

二分查找法实例

本文是根据数据结构中常常提到的二分法而作的一篇博客&#xff0c;主要通过一个二分法实例进行展开说明&#xff1a; 实例内容 通过一个二分法函数来寻找某个数是否在给定的数组中&#xff1b; 代码展示 # 执行二分查找法的算法函数 # 二分法查找的对象必须是一个有序的集…

尼日利亚光伏储能展

尼日利亚地处热带地区&#xff0c;全年阳光充足&#xff0c;每年日照时间超2600小时(平均每天约7小时)。专家表示&#xff0c;尼日利亚有足够的经济实力和环境条件来开发可再生能源&#xff0c;尤其是太阳能。据世界银行估计&#xff0c;投资太阳能发电厂可为近8000万人提供电力…

短视频交友系统搭建重点,会用到哪些三方服务?

在搭建短视频交友系统时&#xff0c;为了确保系统的稳定性、安全性和用户体验&#xff0c;通常需要用到多种第三方服务。以下是搭建短视频交友系统时可能用到的关键第三方服务&#xff1a; 云服务提供商&#xff1a;如阿里云、腾讯云等&#xff0c;提供稳定、可扩展的服务器资源…

Web前端一套全部清晰 ⑤ day3 列表 表格 表单标签 综合案例

人生是一直向前无法倒退的旅程&#xff0c;所以可以偶尔回头&#xff0c;但一定要往前看 —— 24.4.29 一、综合案例1-体育新闻列表 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport…

优化NGINX性能:使用NGINX_THREADS提高并发处理能力

目录标题 1. 什么是NGINX_THREADS&#xff1f;2. 配置NGINX_THREADS3. 使用NGINX_THREADS处理耗时操作4. 性能调优5. 结论 NGINX作为一个高性能的HTTP和反向代理服务器&#xff0c;在处理高并发请求时表现出色。但随着互联网应用对性能要求的不断提高&#xff0c;深入了解和优化…

AOSP源码开发

AOSP源码开发 Author: cpu_codeDate: 2020-07-11 16:18:27LastEditTime: 2020-07-12 21:08:41FilePath: \note\android_bottom\summary.mdGitee: https://gitee.com/cpu_codeGithub: https://github.com/CPU-CodeCSDN: https://blog.csdn.net/qq_44226094Gitbook: https://923…

【Leetcode每日一题】 综合练习 - 找出所有子集的异或总和再求和(难度⭐)(68)

1. 题目解析 题目链接&#xff1a;1863. 找出所有子集的异或总和再求和 这个问题的理解其实相当简单&#xff0c;只需看一下示例&#xff0c;基本就能明白其含义了。 2.算法原理 算法思路与实现 为了求解给定整数数组的所有子集并将其异或和相加&#xff0c;我们可以采用递…