我用html5的video标签做的视频页面,在iphone上测试的时候视频都是全屏的,怎么才能不全屏?

html-css016

我用html5的video标签做的视频页面,在iphone上测试的时候视频都是全屏的,怎么才能不全屏?,第1张

虽然有的网页设置了自动全屏,但是点了“x”之后退出了全屏并且视频播放停下来了,点击播放时又全屏了,但是我们可以退出全屏并继续播放,具体方法:在全屏页用两指缩小手势(不是下滑或点“x”,即刻退出全屏并继续播放视频。如果是的,请采纳。

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不支持全屏播放。

HTML5网页在电脑端和手机端都全屏显示的步骤如下:

1、打开HTML5网页代码。

2、在网页头部加上新代码,让网页的宽度自适应设备的宽度。代码如下:

<meta name="viewport" content="width=device-width

initial-scale=1.0

maximum-scale=1.0

minimum-scale=1.0

user-scalable=no" />

3、在输入代码完成后,把图片包括图片DIV 的宽度设置成百分之百即可。