html5 webkit-playsinline干啥用的

Posted 2023-03-09

html5 webkit-playsinline这个属性是ios 10中设置可以让视频在小窗内播放，也就是不是全屏播放的video标签的一个属性。例如：

<video id="videoALL" 

src="video/01.mp4"

poster="images/1.jpg" /*视频封面*/

preload="auto"

webkit-playsinline="true" playsinline="true"  /*IOS微信浏览器支持小窗内播放/

style="object-fit:fill">

</video>

扩展资料

html5中video标签的常用属性介绍：

1、poster="images/1.jpg"

属性规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。如果未设置该属性，则使用视频的第一帧来代替。

2、preload="auto"

属性规定在页面加载后载入视频。

3、webkit-playsinline和playsinline

视频播放时局域播放，不脱离文档流 。这个属性需要嵌入网页的APP比如WeChat中UIwebview 的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES，才能生效。

4、x5-video-orientation

声明播放器支持的方向，可选值landscape 横屏, portraint竖屏。默认值portraint。无论是直播还是全屏H5一般都是竖屏播放，但是这个属性需要x5-video-player-type开启H5模式

5、x5­-video­-player­-fullscreen

全屏设置。它又两个属性值，ture和false，true支持全屏播放，false不支持全屏播放。

参考技术A 用html5的video方式播放视频时，在ipad上是默认原来大小的，而在iphone上是默认全屏播放的。
HTML里video必须加上webkit-playsinline属性
<video id="video" controls="controls" webkit-playsinline="true">
<source src="test.mp4" type="video/mp4" />
Your browser does not support HTML5 video.
</video>本回答被提问者采纳