video全屏播放属性(videoview设置全屏)

video适配android和ios全屏显示设置的属性

效果要求 ：按住按钮视频全屏播放，松开暂停；

iOS；

video id="video" style=" object-fit: fill" preload="auto"? x-webkit-airplay="true" playsinline="true" x5-video-player-type="h5" x5-video-orientation="h5" x5-video-player-fullscreen="true" preload="auto" width=100%; height=100%;? src="图片地址" /video

效果预览

android

video id="video2" style=" object-fit: fill" preload="auto" autoplay="autoplay" playsinline="true" webkit-playsinline="true" x-webkit-airplay="allow" airplay="allow" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portrait"? width=100%; height=100%; src="图片地址"? /video

Android上不能像苹果一样在浏览器里内嵌播放视频，会加载一个视频播放器全屏播放；

效果预览

相关属性介绍 点击这里

object-fit介绍 点击这里

怎么自定义VideoPlayer的全屏行为

首先，VideoPlayer是支持全屏播放的，注意播放器的右下角有一个控制全屏状态的按钮，点击之后，视频就进入全屏状态，而播放条会位于稍微靠底部的位置，并且过一段时间后就会自动隐藏。再次点击全屏按钮，或按ESC键，即可退出全屏状态，恢复之前的默认状态。

uniapp中控制videojs视频播放器全屏以及退出全屏切换的另一种思路

1.播放器外层容器定义动态样式，播放器本身增加动画

2.定义变量记录当前是否处于全模式

3.切换全屏方法

4.页面样式控制的相关计算属性

5.部分css样式

VIDEO显示层级高的解决方式及VIDEO的参数设置

在需要显示遮盖视频框video的时候

给div设置?宽?高、overflow:hidden;将video放到上面的div里，并设置position:absolute;top:-100000px;?给置出去div，它就看不见了

在需要显示video时，再设置回position和top的值就行了

我测试了，可以用，我在手机端就这么用的

video src="" controls="controls" x5-playsinline="" playsinline="true" webkit-playsinline="true" x-webkit-airplay="true" x5-video-player-type="h5" x5-video-player-fullscreen="" x5-video-orientation="portraint"/video

各个属性的参考如下：

controls="controls"

x5-playsinline=""? ? ？？？？？

playsinline="true"

webkit-playsinline="true"

x-webkit-airplay="true"

x5-video-player-type="h5"? ?

x5-video-player-fullscreen=""

x5-video-orientation="portraint"

videox5-video-orientation="landscape|portrait"/? 旋转（横屏|竖屏）

注: 此属性只在声明了 x5-video-player-type="h5" 情况下生效

一：设置playsinline不全屏播放

video? ? ? id="videoplay"src={[require("./../../assets/laterImg/westlake.mp4")]}playsInline={true}//react项目中警告，所以把true用{}包起来了webkit-playsinline="true"//兼容iosx5-playsinline="true"//兼容安卓/

二：设置 x5-video-player-fullscreen 全屏方式

video id="videoplay"src="xxx"x5-video-player-type="h5"x5-video-player-fullscreen="true"/

注意：需要重新监听resize事件监听窗口大小变化

window.onresize=function(){videoplay.style.width=window.innerWidth+"px";videoplay.style.height=window.innerHeight+"px";}

ios video怎么禁止自动全屏

最近做一个移动端微信页面项目，在微信页面中有视频播放，但是需要禁止IOS的自动全屏播放（前提必须使用video标签）。

如：

在iPhone safari 点击视频会弹出播放器进行全屏播放。

在网上看了看别人给出的答案，引用如下：

可以在 video 标签上加一个 “webkit-playsinline” 属性 ，如下：

当然在iOS APP中使用网页视频，是可以禁止全屏播放的，方法如下：

前端将video标签加入属性webkit-playsinline，如：video id="player" width="480" height="320" webkit-playsinline；

Obj-C中，添加配置：webview.allowsInlineMediaPlayback = YES;