问题描述：
h5页面内使用video标签播放视频，会自动全屏；且不能自动播放的问题
两种情况：
一、普通浏览器内
1> 解决全屏播放的问题方案：
标签内添加属性：
webkit-playsinline="true"
x-webkit-airplay="true"
playsInline={true}
x5-playsinline="true"
x5-video-orientation="portraint"
案例如下：
/* 标签内 添加 以下几个属性*/
<video id="video1"
muted //静音
webkit-playsinline="true"
x-webkit-airplay="true"
playsInline={true}
x5-playsinline="true"
x5-video-orientation="portraint"
width="100%"
autoPlay={true}
>
<source id="source1" src={`${home}?playsinline=1`} type="video/mp4"></source>
</video>2> 解决不能自动播放情况
如上代码案例中添加 muted 静音属性，同时，使用js控制
var myVideo=document.getElementById("video1");
try {
myVideo.play();
} catch (error) {
console.log("video被阻止了,需要手动触发按钮或别的事件，和用户有交互后 ，再调用play()")
}
二、在app客户端内嵌入h5页面
1>解决全屏播放的问题方案（h5和客户端都需要处理）
首先h5页面上需要在音频资源后添加?playsinline=1 参数，然后客户端配合修改视频播放的默认配置，如下图所示：
<video id="video1" >
<source id="source1" src={`xxxxxxxx.mp4?playsinline=1`} type="video/mp4"></source>
</video>
app修改如图上标记位置或者代码中修改 configuration.allowsInlineMediaPlayback = true;
（具体代码在哪问app相关人员）文章来源：https://www.toymoban.com/news/detail-462204.html
三、多个视频播放，需要预加载，减少卡顿情况，视频加载完成前可以先添加一个封面进行缓冲文章来源地址https://www.toymoban.com/news/detail-462204.html
到了这里，关于h5使用video标签解决自动全屏问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
