uniapp视频播放器

微信小程序使用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 = domif (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 H5this.$ownerInstance.callMethod(name, args);// #endif// #ifdef H5this[name](args);// #endif},// 判断如果是ios的话设置全屏 把导航栏高度设置为0 然后把状态栏关掉就可以展示全屏了fullscreenChange(e) {this.fullScreen = e;this.$emit('fullScreenChange', e)var platform = uni.getSystemInfoSync().platform// #ifdef APP-VUEif (this.fullScreen) {if (platform == 'ios') {let pages = getCurrentPages()let page = pages[pages.length - 1];this.currentWebview = page.$getAppWebview();let titleNView = this.currentWebview.getStyle().titleNViewif (titleNView.height != 0) {this.tempTitleNView = {...titleNView}}titleNView.height = 0titleNView.autoBackButton = falsethis.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.webkitExitFullscreenif (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.hqwc.cn/news/380.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CLO-GitHub网站注册登录

一、GitHub GitHub是一个面向开源及私有软件项目的托管平台,仅支持Git作为唯一的版本库格式进行托管。 二、登录官网 网站:https://github.com/ 2.1 注册Sign up Enter your Email(输入邮箱地址)->Continue-> ->Create a…

长尾关键词有什么作用?要怎么用?

长尾关键词很多的网站都会忽略其存在,其实你不要小看长尾关键词,他将带给网站的流量也是极其可观的,所说比不上那些重点关键词的流量,但是对提升网站的权重还是有着重要的作用。 长尾关键词有什么用?长尾关键词的3…

蓝桥杯专题-试题版-【数列排序】【数列特征】【特殊的数字】【特殊回文数】

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例点击跳转>软考全系列点击跳转>蓝桥系列 👉关于作者 专注于Android/Unity和各种游…

ES-工作原理

前言 ​ 搜索引擎是对数据的检索,而数据总体分为两种:结构化数据和非结构化数据。而对于结构化数据,因为他们具有特定的结构,所以一般都是可以通过关系型数据库MySQL/oracle的二维表的方式存储和搜索,也可以建立索引。…

低代码——前端开发人员的利器

作为前端开发人员,我们时刻追求着更高效、更灵活的开发方式,以满足日益增长的业务需求和用户体验要求。近年来,低代码开发平台逐渐崭露头角,成为我们探索的新领域。低代码为我们提供了一种新的开发方式,将我们从繁琐的…

【Spring Cloud Sleuth 分布式链路跟踪】 —— 每天一点小知识

💧 S p r i n g C l o u d S l e u t h 分布式链路跟踪 \color{#FF1493}{Spring Cloud Sleuth 分布式链路跟踪} SpringCloudSleuth分布式链路跟踪💧 🌷 仰望天空,妳我亦是行人.✨ 🦄 个人主页——微风撞见云…

响应式数据大屏开发rem、%、vh/vm

前言 响应式数据大屏开发rem、%、vh/vm 我们在开发数据大屏的时候难免会需要解决响应式问题 ,那么响应式是什么呢? 响应式:响应式布局是元素随着屏幕发生宽高大小变化 盒子布局发生变化 通俗的来说: 自适应:元素随着…

HTTP调用:你考虑到超时、重试、并发了吗?

今天,我们一起聊聊进行 HTTP 调用需要注意的超时、重试、并发等问题。 与执行本地方法不同,进行 HTTP 调用本质上是通过 HTTP 协议进行一次网络请求。网络请求必然有超时的可能性,因此我们必须考虑到这三点: 首先,框架…

Storm forming 风雨欲来 | 经济学人20230325版社论高质量双语精翻

本期精翻为2023年3月25日《经济学人》周报封面文章:《风雨欲来》(Storm forming)。 Storm forming 风雨欲来 As video games grow, they are eating the media 随着电子游戏的发展,它们正在蚕食媒体 The games business has lesso…

对rabbitmq进行压测

添加rabbitmq依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-amqp</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactI…

【STM32】F103 总线结构

一、总线的概念二、STM32的总线结构2.1 STM32的总线矩阵2.2 STM32的存储器映射2.3 STM32的外设寄存器 一、总线的概念 总线是连接多个部件的信息传输线&#xff0c;是各部件共享的传输介质。总线是一种电路&#xff0c;它是CPU、RAM、ROM、输入、输出等设备传递信息的公共通道…

PHP 论坛系统mysql数据库web结构apache计算机软件工程网页wamp

一、源码特点 PHP 论坛系统 是一套完善的web设计系统&#xff0c;对理解php编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为PHP APACHE&#xff0c;数据库为 mysql5.0&#xff0c;使用php语言开发。 下载链接…