社区首页 >专栏 >html5的video在IOS端默认全屏和黑屏问题

html5的video在IOS端默认全屏和黑屏问题

空空云

发布于 2018-09-27 03:48:12

5.7K00

代码可运行

文章被收录于专栏：大前端_Web大前端_Web

运行总次数：0

代码可运行

最近项目中需要使用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.
  });
}