【兼容性记录】video标签在 IOS 和安卓中的问题

业务需求背景：由于业务中涉及到有视频播放的内容，所以就使用了 video 标签去做，但是 video 标签在 ios 设备和安卓设备中的默认行为不一致，故记录下解决方法（折中办法）。

ios 自动全屏

ios 设备点击播放视频会自动进入全屏（弹层播放），而安卓不会

这个比较好处理，有对应的属性设置，只需要在 video 标签中添加即可和安卓保持一致。

playsinline：告诉支持它的浏览器（包括现代的 iOS Safari）在网页内部播放视频。
webkit-playsinline：旧版本的 iOS Safari 添加的特殊属性，作用与 playsinline 相同

html 复制代码

<video webkit-playsinline playsinline src="xxx" />

ios 设备中无视频头帧

ios 设备没有预览图的情况下不会展示视频头帧，播放前video标签背景是透明的，而安卓自动展示头帧

这是因为 ios 的保护机制：如果 video 标签未开始播放时不会去加载视频的，所以就没有头帧图。解决方法有几种，一种是设置video poster属性：在页面加载的时候获取视频的首帧图，然后将这个图赋值给poster。另外一种就是简单封装一下，这个问题就 over 了，唯一的缺点就是需要写额外的逻辑。

html 复制代码

<!-- 方式一 -->
<video width="100%" controls accept-ranges content-length poster="xxx.png" src="xxx.mp4">

<!-- 方式二 -->
<div class="video-container">
  <div class="video">
      <div class="play-overlay">  
        <button class="play-button"></button>  
      </div>
	  <!-- content-length：提供了文件大小信息，帮助浏览器管理下载过程 -->
      <!-- accept-ranges：允许浏览器分段请求 -->
      <video width="100%" controls accept-ranges content-length src="xxx.mp4">   
    </video>
    <img class="video-cover-image" src="xxx.jpg" />  
  </div>
</div>
<script>
// 为所有的 video-container 增加点击事件监听
document.querySelectorAll('.video-container .play-button').forEach(function(playButton) {
  playButton.addEventListener('click', function() {
    let videoContainer = this.closest('.video-container');
    videoContainer.querySelector('.play-overlay').style.display = 'none';
    videoContainer.querySelector('.video img').style.display = 'none';
    let video = videoContainer.querySelector('video')
    video.play();
  });
});
</script>

安卓设备全屏后退出页面位置出现偏移

安卓设备播放视频后点击全屏，然后点击退出按钮后页面位置会发生偏移(只遇到过向下移的情况)

这个问题来来回回折腾了一两天后面直接将方案改了：网页上点击播放按钮后页面出现一个弹出层进行播放

html 复制代码

<a href="javascript:;" class="video_btn" data-mp4="xxx.mp4"></a>
<script>
document.body.addEventListener('click', function(event) {
  if (event.target.matches('.video_btn')) {
    const item = event.target;
    let mp4 = item.getAttribute('data-mp4')
    // 将 mp4 地址赋值给弹出层的video标签
    let html =`<div class="pop_video_bg"></div>
			    <div class="pop_video" style="display: block;">
			    	<div id="pop_vv">
			    	<div style="position:relative;left:0;top:0;display:inline-block;width:100%;max-height:100%">
			    		<video controls controlslist="nodownload" src="xxx.mp4" loop="false" width="100%" height="100%" disablepictureinpicture autoplay style="background-color: black;">
			    			<source src="xxx.mp4" type="video/mp4">
			    		</video>
			    	</div>
			    </div>
			   <div class="close_pv"></div>
			  </div>`
  }
  // 将html放入body中
  ...
});
</script>

如倩女幽魂类似

【兼容性记录】video标签在 IOS 和 安卓中的问题

ios 自动全屏

ios 设备中无视频头帧

安卓设备全屏后退出页面位置出现偏移

【兼容性记录】video标签在 IOS 和安卓中的问题