H5 video移动端小窗关闭

最新推荐文章于 2025-10-15 14:13:20 发布

原创最新推荐文章于 2025-10-15 14:13:20 发布 · 2.8k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html5

video移动端简单处理专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何处理H5视频在移动端的小窗关闭问题，以及提供了自动全屏的解决办法。通过设置autoplay, controls, loop等属性实现视频的自动播放和控制，同时利用object-fit样式控制视频填充方式以达到全屏效果。" 109448085,10091486,Python批量合并文件到一个文本,"['Python编程', '文件操作', '文本处理']

1.兼容：
在这里插入图片描述
2. 代码格式：

<video src="movie.ogg" width="320" height="240" controls="controls">
	你的浏览器无法支持视频格式
</video>

兼容多个浏览器的视频

<video width="320" height="240" controls="controls">
  	<source src="movie.ogg" type="video/ogg">
 	<source src="movie.mp4" type="video/mp4">
	你的浏览器无法支持视频格式
</video>

属性有：
autoplay: autoplay; //准备就绪后马上自动播放
controls|: controls; // 显示可控制的控件，比如播放，进度条等，不同浏览器的控件显示不同
loop：loop；\循环播放，播放结束后重新播放
preload：preload；则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
以及height，width，src等；

案例：

 <video id="videoALL" class="content-video"
  loop controls="controls" autoplay  src="img/demo.mp4" 
  webkit-playsinline="true" playsinline="true"   x5-playsinline="" 
  x-webkit-airplay="allow"
   x5-video-player-type="h5" 
   x5-video-player-fullscreen="true" 
   x5-video-orientation="portraint"
 ></video>

自动全屏的解决办法

**webkit-playsinline="true"** /*这个属性是ios 10中设置可以   让视频在小窗内播放，也就是不是全屏播放*/  
**playsinline属性**：移动端安卓内可以取消全屏弹窗播放，IOS微信浏览器支持小窗内播放
**x-webkit-airplay="allow"**  禁止安卓弹窗播放
**x5-video-player-type="h5"** ：/*启用H5**同层**播放器,是wechat安卓版特性*/
**x5-video-player-fullscreen="true"**  /*全屏设置，  设置为 true 是防止横屏*/
**x5-video-orientation="portraint"**  //声明播放器支持的方向，landscape 横屏, portraint竖屏。默认值portraint

通过object-fit样式可以控制视频通过什么方式填充