html5的video在IOS端默认全屏和黑屏问题
最近项目中需要使用video来代替有点复杂的动画(video循环自动播放),遇到了使用过程中的两个坑
ios端默认全屏解决办法
查阅资料说在在video标签加如下属性
<video webkit-playsinline="webkit-playsinline"></video>
无奈测试机是ios10,上面这段代码在iOS8,9下生效
因项目是react工匠,不支持除data-*之外的自定义属性,需在compentDidMount加如下代码
this.videoElement.setAttribute('webkit-playsinline', 'webkit-playsinline');// Fix fullscreen problem on IOS 8 and 9
this.videoElement.setAttribute('playsinline', 'playsinline'); // Fix fullscreen problem on IOS 10
如果项目基于cordova构建,还需在config.xml加如下属性
<preference name="AllowInlineMediaPlayback" value="true" />
对了,行内播放之后还解决了一个问题,可以在video视窗使用定位来增加遮罩等功能
video自动播放黑屏
最开始产品需求是视频加载自动播放并且循环,导致快速切换页面再加载视频经常黑屏很长一段时间才能播放
寻求解决思路:
一. 视频加载前使用loading,对video执行onCanPlay监听remove loading
//react 代码
canPlay() {this.mask.remove();
}<div className="video-wrap"><div className="mask" ref={(node) =>{this.mask = node;}}><div className="loading"><span></span><span></span><span></span></div></div><video autoPlay muted loop poster={this.props.poster} ref={(node) =>{this.videoElement = node;}} onCanPlay={this.canPlay}><source src={this.props.src}></source>Your browser does not support the video tag.</video>
</div>
问题:依然存在黑屏,换成onplay尝试无解
网上说是videoview在加载第二个视频时 默认会释放到第一个视频的资源再加载第二个视频的资源 这个比较耗内存 会出现短暂的黑屏,可通过Web Workers开启多线程操作资源的加载,未尝试,可作为思路
二. 更改需求^ ^
因自动循环播放体验不友好,后期改为手动播放,添加poster,preload='auto'
遂可以解决
playVideo() {this.videoElement.play();this.img.style.display = 'none';
}videoEnded() {this.img.style.display = 'block';
}<div className="video-wrap"><img className="play" src="./img/icon-video-play.png" alt="" ref={(node) =>{this.img=node;}} {...tapOrClick(this.playVideo)}/><video preload="auto" poster={this.props.poster} ref={(node) =>{this.videoElement = node;}} onEnded={this.videoEnded}><source src={this.props.src}></source>Your browser does not support the video tag.</video>
</div>
题外话,查阅相关资料发现,autoplay确实存在不少坑,低版本的chrome for android 也不支持, google developers 建议autoplay和muted一起使用,参考资料:https://developers.google.com/web/updates/2016/07/autoplay
video.play()返回的是个promise,学到了……^_^,文章也解释了为什么移动端不太支持自动循环播放,会导致用户无意识下载很多资源。来源:https://developers.google.com/web/updates/2016/03/play-returns-promise
var playPromise = document.querySelector('video').play();// In browsers that don’t yet support this functionality,
// playPromise won’t be defined.
if (playPromise !== undefined) {playPromise.then(function() {// Automatic playback started!}).catch(function(error) {// Automatic playback failed.// Show a UI element to let the user manually start playback.});
}
重点:相对于web端,还可以使用库video.js,相对于html5的video,video.js功能更全,兼容性更好,也支持循环播放功能。
html5的video在IOS端默认全屏和黑屏问题相关推荐
- (已解决)video标签在ios端默认全屏播放(h5开发)
Video在ios全屏播放 这两天一直在做h5开发,项目马上完结,就是到最后项目上线之后,在ios上面测试,突然发现原来的视频默认全屏播放,这样就有很大的限制,很不利于开发,我这边是已经解决这个问题了 ...
- 微信小程序 video标签 ios不能播放视频或视频黑屏
首先用ios的浏览器打开视频的链接,看通过浏览器是否可以播放,如果可以则说明视频没问题. 注意视频的编码格式,再有就是,如果视频是直接存放在服务器上的,注意给出的视频路径不要存在中文,存在中文在ios ...
- 微信小程序视频组件ios端出现视屏区域黑屏
微信小程序中自定义组件video在ios端会出现从展示页面切到另一个页面上再回到展示页面时会黑屏的情况. 解决思路:在app.js中获取手机类型并定义isApple的全局变量 -> 在vi ...
- IOS应用程序启动显示白屏或黑屏
问题:虚拟机运行程序显示白屏提交到App Store不通过! 1.进行审核时APP Store反馈回来的错误问题. Guideline 2.1 - Performance - App Complete ...
- android AppCompat, splash启动白屏(黑屏)全屏,去掉状态栏,以及splash与虚拟按键遮挡
在做项目是,需要加一个splash,以美化应用,消除app启动等待的乏味 一.使用环境 使用Android Studio activity 继承 AppCompatActivity, 实现splash ...
- IOS重写unity Splash,消除黑屏,播放开场动画视频
IOS重写unity Splash,消除黑屏,自定义开场动画视频,无需破解 此教程只使用于unity5.x系列,2018请看我新发的教程 因为自己使用的unity是免费版,无法去除splash,所以在 ...
- cf不能全屏win7的解决方法_Win10运行DNF全屏后黑屏怎么办|DNF全屏后黑屏解决方法...
DNF是目前还有不少用户在玩的游戏,有使用win10系统的用户,全屏玩DNF这款游戏的时候,出现黑屏,从游戏外取消窗口化或者还原初始配置,已经尝试多种办法,问题都没有得到解决.这篇文章是系统部落给大家 ...
- QOpenGLWidget 全屏显示黑屏解决方案
一.碰到的问题: 用 QOpenGLWidget 显示YUV数据视频时,部分电脑设置全屏时会黑屏. 二. Qt 给出的方案 Fullscreen OpenGL Based Windows When a ...
- iOS端如何实现带UI截屏分享
下载资源文件 1.1 需要开发者 点击这里 来下载分享的demo 1.2 需要 点击这里 下载SDK 导入SDK以及相关文件需要导入下载的SDK资源文件以及UI截屏所需要的6个文件,如下图: 注意:在 ...
最新文章
- APUE(第七章)进程环境
- Dubbo的终端操作方法
- Python基础之:Python中的内部对象
- java dom4j 读取 xml_java使用dom4j读取xml示例
- 初试 spring web mvc
- 聚集索引表插入数据和删除数据的方式是怎样的
- 扒一扒,互联网大厂内部都用什么软件沟通?
- 1688-API接口安全详解
- 有些微信小程序助你提高生活效率!
- 2020年最新中科院期刊分区表
- 新颖的自我介绍_有创意的自我介绍10篇
- 百度 bae php,利用百度BAE搭建免费CDN
- 电线电缆很烫,都有哪些原因
- 基于android物流快递服务系统app
- 电脑插上耳机没有声音
- 缓解 WPF 应用程序中的空域问题
- AtCoder Beginner Contest 249题解(E,F)
- 【引用】行摄云之南(四):滇南大山深处的彝族娃娃--那纯洁的眼神@
- 第一章 概述_TCP-IP
- SSIS中刷新Power BI数据集