uniapp视频播放器

news2024/11/18 5:52:11

微信小程序使用hic-video-player
app(android和ios)使用好用视频播放器注:用的是旧版本的这个组件

在这里插入图片描述
在这里插入图片描述
目前只有app中支持竖屏横批选集
android视频全屏是通过


	beforeDestroy() {
			// #ifdef APP-VUE
			// 页面关闭时关闭沉浸模式
			if (uni.getSystemInfoSync().platform == "ios") {
				plus.navigator.setFullscreen(false);
			}
			plus.screen.lockOrientation(this.options.generallyDirection);
			// #endif
		},
	// 部分代码
	launchFullscreenRender() {
			if (document.fullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || document
					.webkitFullscreenElement  || this.container && this.container.style.position == 'fixed') {
					return
				}
		let dom = document.getElementById('yingbing-video' + this.videoPhoneNormalProp.dataId) || {}
		var rfs = dom.requestFullscreen || dom.mozRequestFullScreen || dom.msRequestFullscreen || dom
				.webkitRequestFullscreen
		// 通过获取视频video所在的标签 向浏览器申请该标签全屏展示
		// 然后通过plus.screen.lockOrientation来设置屏幕旋转方向
		if (typeof rfs != 'undefined' && rfs) {
			dom.addEventListener('fullscreenchange', this.fullscreenchanged);
			dom.addEventListener('mozfullscreenchange', this.fullscreenchanged);
			dom.addEventListener('msfullscreenchange', this.fullscreenchanged);
			dom.addEventListener('webkitfullscreenchange', this.fullscreenchanged);
			rfs.call(dom)
		} else {
		// 如果不支持全屏api就使用css设置标签全屏展示 可以设置page-meta中的style来防止触摸穿透
			this._fullscreenerror(dom)
		}
	},
	_fullscreenerror(dom) {
		this.container = dom
		if (dom) {
				dom.style.position = 'fixed';
				dom.style.background = '#000';
				dom.style.left = 0;
				dom.style.right = 0;
				dom.style.bottom = 0;
				dom.style.top = 0;
				dom.style.width = '100vw';
				dom.style.height = '100vh';
				dom.style.zIndex = 9999999;
				this.fullscreenchanged()
			
			}
		},
		fullscreenchanged(event) {
				if (document.fullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || document
					.webkitFullscreenElement || this.container && this.container.style.position == 'fixed') {
					this.triggerMethod('fullscreenChange', true)
				} else {
					this.triggerMethod('fullscreenChange', false)
				}
			},
		triggerMethod(name, args) {
				// #ifndef H5
				this.$ownerInstance.callMethod(name, args);
				// #endif
				// #ifdef H5
				this[name](args);
				// #endif
			},
		// 判断如果是ios的话设置全屏 把导航栏高度设置为0 然后把状态栏关掉就可以展示全屏了
		fullscreenChange(e) {
				this.fullScreen = e;
				this.$emit('fullScreenChange', e)
				var platform = uni.getSystemInfoSync().platform

				// #ifdef APP-VUE
				if (this.fullScreen) {
					
					if (platform == 'ios') {
						let pages = getCurrentPages()
						let page = pages[pages.length - 1];
						this.currentWebview = page.$getAppWebview();
						let titleNView = this.currentWebview.getStyle().titleNView
						if (titleNView.height != 0) {
							this.tempTitleNView = {
								...titleNView
							}
						}
						titleNView.height = 0
						titleNView.autoBackButton = false
						this.currentWebview.setStyle({
							titleNView: titleNView
						})
						plus.navigator.setFullscreen(true);
					}
					// console.log(this.options.fullScreenDirection)
					// portrait-primary 竖屏
					// landscape-primary 横屏
					plus.screen.lockOrientation(this.options.fullScreenDirection);
				} else {
					if (platform == 'ios') {
						// console.log(this.currentWebview )
						// console.log(this.currentWebview.videoFullscreen )
						this.currentWebview.setStyle({
							titleNView: this.tempTitleNView
						})

						plus.navigator.setFullscreen(false);
					}
					// plus.orientation.clearWatch(wo)
					plus.screen.lockOrientation(this.options.generallyDirection);
				}
				// #endif
			},
			exitFullscreenRender() {
				if (document.fullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || document
					.webkitFullscreenElement) {
					const cfs = document.exitFullscreen || document.mozCancelFullScreen || document.msExitFullscreen ||
						document.webkitExitFullscreen
					if (typeof cfs != 'undefined' && cfs) {
						cfs.call(document)
					}
				} else {
					if (this.container && this.container.style.position == 'fixed') {
						this.container.style.position = 'relative';
						this.container.style.width = '100%';
						this.container.style.height = '100%';
						this.container.style.top = 'inherit';
						this.container.style.left = 'inherit';
						this.container.style.right = 'inherit';
						this.container.style.bottom = 'inherit';
						this.container.style.zIndex = 'inherit';
						this.container.style.transform = 'inherit';
						this.fullscreenchanged()
						// this._cssfullscreenchange();
					}
				}
			},
	

需要注意的是ios使用设置屏幕锁定方向时需要设置一些信息
在这里插入图片描述

小程序只支持设置倍速

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【FFmpeg实战】解复用实战

原文链接:https://blog.csdn.net/u014078003/article/details/128554153 1.封装格式相关函数 avformat_alloc_context():负责申请一个AVFormatContext结构的内存,并进行简单初始化,这个函数可以不用手动调用,内部会自动调用。avf…

【无标题】NXP i.MX 6ULL工业核心板硬件说明书( ARM Cortex-A7,主频792MHz)

1 硬件资源 创龙科技SOM-TLIMX6U是一款基于NXP i.MX 6ULL的ARM Cortex-A7高性能低功耗处理器设计的低成本工业级核心板,主频792MHz,通过邮票孔连接方式引出Ethernet、UART、CAN、LCD、USB等接口。核心板经过专业的PCB Layout和高低温测试验证&…

怎么才能提高自动化测试的覆盖率,华为大佬教你一招!

前言 自动化测试一直是测试人员的核心技能,也是测试的重要手段之一。尤其是在今年所谓的互联网寒冬的行情下,各大企业对测试人员的技术水平要求的很高,而测试人员的技术水平主要集中在三大自动化测试领域,再加测试辅助脚本的编写…

智慧园区能源管理系统建设方案

随着能源资源的日益紧缺和环境保护意识的不断提高,智慧园区能源管理系统建设成为了当前能源管理的热点话题。智慧园区能源管理系统是一种集成化的能源管理平台,可以实现对园区内各种能源的实时监测、分析和管理,从而达到优化能源配置、提高能…

Python 学习之NumPy(一)

文章目录 1.为什么要学习NumPy2.NumPy的数组变换以及索引访问3.NumPy筛选使用介绍筛选出上面nb数组中能被3整除的所有数筛选出数组中小于9的所有数提取出数组中所有的奇数数组中所有的奇数替换为-1二维数组交换2列生成数值5—10,shape 为(3,5)的二维随机浮点数 NumP…

对一大厂游戏测试员的访谈实录,带你了解游戏测试

今天采访了一个在游戏行业做测试的同学,他所在的游戏公司是做大型多人在线角色扮演类的游戏,类似传奇游戏。他所在的公司目前有1200多人,是上市公司,目前游戏产品在国内海外都有市场。 因为我是一个对游戏无感的人,所…

【C++ 程序设计】第 7 章:输入/输出流

目录 一、流类简介 二、标准流对象 三、控制I/O格式 (1)流操纵符 (2)标志字 四、调用cout的成员函数【示例一】 五、调用 cin 的成员函数 (1)get() 函数 (2)getline()…

高考选什么专业好?适合考公务员的10大热门专业,了解一下!

高考是人生的分水岭,它是青春和未来的交汇处。高考成绩的优劣将对考生未来的发展产生深远的影响。作为学生们人生中重要的一站,高考不仅考验着学生的学业能力,也考验着他们的心理素质和思维能力。 高考结束后,众多考生面临的一个重…

FFmpeg视频转码参数详解

1 固定码率因子crf(Constant Rate Factor) 固定码率因子(CRF)是 x264 和 x265 编码器的默认质量(和码率控制)设置。取值范围是 0 到 51,这其中越低的值,结果质量越好,同…

阿里云docker启动xxljob,部署自己的定时任务

本次安装版本xxl-job-admin:2.3.0 一:创建xxl-job数据库的各种表 作者官方地址 下载sql执行 二:docker拉取xxl-job镜像 docker pull xuxueli/xxl-job-admin:2.3.0 三:docker启动xxl-job服务 docker run -e PARAMS"--spring.datasour…

用C语言实现经典游戏——贪吃蛇

目录 1.游戏实现思想 (1)定义蛇对象 (2)食物对象 (3)分数: (4)初始化蛇 (5)初始化食物 (6)修改控制台光标位置 &…

Spring Data JPA 报 HOUR_OF_DAY: 0 -> 1异常的解决过程和方案

在进行数据查询时,控制台报了Caused by: com.mysql.cj.exceptions.WrongArgumentException: HOUR_OF_DAY: 0 -> 1异常,查询得知:这是由于查mysql库,转换类型为datetime类型的字段引起的。 网上的解决方案有多种,大…

坐标系转换QGIS插件GeoHey

最近要将面要素(GCJ02火星坐标系)转WGS84,用程序转太麻烦了,找了半天没找到合适的。 插件非常好用!!! 在QGIS中,由极海(GeoHey)团队提供GeoHey Toolbox插件…

Linux_清理docker容器的log

最近发现服务器硬盘空间满了,就排查了一番,发现有docker容器的log文件占用太多,所以要做一下清理。 首先是要找到docker容器log文件的储存位置。 1、首先在执行了一下 df -Th 命令,发现根目录满了。 2、然后去到根目录下&#xff…

Android项目中接入 Lint代码规范

一、概述 Android Studio 提供了一个名为 Lint 的代码扫描工具,可帮助开发者发现并更正代码结构质量方面的问题,并且无需您实际执行应用,也不必编写测试用例。系统会报告该工具检测到的每个问题并提供问题的描述消息和严重级别,以便开发者可以快速确定需要优先进行的关键改…

Linux下vim的常见命令操作(快速复查)

目录 前言1、Vim常用操作1.1、环境参数1.2、方向1.3、插入命令1.4、定位命令1.5、删除命令1.6、复制和剪切命令1.7、替换和取消命令1.8、搜索和搜索替换命令1.9、保存和退出命令1.10、其他命令1.11、可视模式 前言 本篇文章不面向新手,全文几乎都是命令,…

【Redis】多级缓存之缓存数据同步策略与Canal

目录 一、数据同步策略 1.设置有效期 2.同步双写 3.异步通知 二、Canal 三、监听Canal 一、数据同步策略 缓存数据同步的常见方式有三种: 1.设置有效期 给缓存设置有效期,到期后自动删除。再次查询时更新,他简单、方便,但…

H5学习 (一)--创建工程

文章目录 一、下载安装VS Code二、创建新文件1. 使用cmd N,创建一个文件2. 点击 Select a language,改变文件的编码类型3. 选择HTML 语言模式4. 输入 !按回车键,就会自动生成一个HTML模版5. 右击项目,选择 “Open In Default Bro…

交叉熵、Focal Loss以及其Pytorch实现

交叉熵、Focal Loss以及其Pytorch实现 本文参考链接:https://towardsdatascience.com/focal-loss-a-better-alternative-for-cross-entropy-1d073d92d075 文章目录 交叉熵、Focal Loss以及其Pytorch实现一、交叉熵二、Focal loss三、Pytorch1.[交叉熵](https://pyto…

浅谈商业智能BI的过去、现在和未来

互联网的大发展也在引领各行各业的改变,包括商业智能BI,商业智能BI就是在数字化时代下飞速发展的。商业智能BI与互联网发展的同时,人工智能、大数据、区块链、云计算等新一代信息化、数字化技术也开始进行加速商业智能BI发展及应用&#xff0…