最近项目中需要使用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功能更全,兼容性更好,也支持循环播放功能。