【兼容性记录】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>

倩女幽魂类似

相关推荐
coldriversnow1 分钟前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o2 分钟前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic1 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā1 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年2 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder2 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727573 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
比格丽巴格丽抱3 小时前
flutter项目苹果编译运行打包上线
flutter·ios
长亭外的少年3 小时前
Kotlin 编译失败问题及解决方案:从守护进程到 Gradle 配置
android·开发语言·kotlin
SoaringHeart3 小时前
Flutter进阶:基于 MLKit 的 OCR 文字识别
前端·flutter