防止视频在移动页面上全屏播放

最近，有必要在公司的项目中本地播放视频. 我们都知道，HTML5中有一个特殊的标记视频来嵌入视频. 但是，此视频标签具有许多属性，许多学生可能对此不太熟悉. 让我们知道它:

在网页中嵌入HTML5视频播放器的方法非常简单:

<video
    controls
    autoplay
    loop
    preload="auto"
    poster="img/popup-img.png"
    webkit-playsinline="true"
    playsinline="true"
    x5-video-player-type="h5"
    x5-video-player-fullscreen="true"
    x-webkit-airplay="allow" 
    x5-video-orientation="portraint"
    style="object-fit:fill">
        <source src="./img/WeChatSight125.mp4" type="video/mp4">
        <source src="./img/WeChatSight125.ogg" type="video/ogg; codecs=dirac, speex">
        <p>你的浏览器不支持 <code>video</code> 标签.</p>
</video>

poster =“ img / popup-img.png” /视频封面/

webkit-playsinline =“ true” /此属性在ios 10中很有用，其他属性尚不可用，让视频在小窗口中播放，即不是全屏播放/

playsinline =“ true” / IOS微信浏览器支持在小窗口中播放/

x5-video-player-type =“ h5” /启用H5播放器，这是微信Android版本的功能/

x5-video-player-fullscreen =“ true” /全屏设置，设置为true可以防止水平屏幕/>

x5-video-orientation =“ portraint” /播放器屏幕，横向横向屏幕，纵向纵向屏幕的方向，默认值为纵向屏幕/

The

source标签应与支持不同媒体类型的各种浏览器兼容. 我们可以使用多个元素来提供多种不同的媒体类型. 支持mp4格式视频流的浏览器可以播放mp4文件. 如果不支持，则可以播放Ogg文件.

编= dirac，speex用于指定要用于播放的（编）；这样，可以使浏览器更准确地播放提供的视频.

这些属性可以根据自己的情况添加，不一定要全部添加.

webkit-playsinline和playsinline: 视频播放期间的本地播放，而不会离开文档流. 但是，此属性非常特殊，需要将其嵌入到Web应用程序中，例如，微信中的UIwebview的allowInlineMediaPlayback = YES和webview.allowsInlineMediaPlayback = YES才能生效. 换句话说，如果未设置APP，则将此标签添加到页面也是无效的，这就是Android手机微信始终播放全屏视频的原因，因为APP不支持playinline，但ISO微信支持.

我想在这里添加，如果要进行全屏实时广播或全屏H5体验，则需要将ISO设置为删除webkit-playsinline标记，因为不支持将其设置为false ，Android则不需要，因为默认值为全屏. 但是，这时，无论您是否设置了全屏播放控件，都可以.

x-webkit-airplay =“ allow”暂时不知道其功能，但编辑器猜测此属性应使此视频支持ios的AirPlay功能. 使用AirPlay可以使用iOS在设备上的不同位置直接播放视频，音乐和照片文件，这意味着AirPlay功能可以实现音频和视频文件的无线播放，当然前提是要播放的终端设备还必须支持相应的功能.

x5-video-player-type: 启用同一层的H5播放器，即视频全屏时，div可以显示在视频层，这也是微信Android版本的唯一属性. 同一层上的别名也称为沉浸式播放. 播放时看起来像是全屏，但是控件和微信的导航栏已删除，仅保留了“ X”和“ <”键. 当前在同一层上的播放器仅可在Android（包括微信）上使用，暂时不支持iOS. 至于为什么只对Android开放同一层播放的原因uc视频播放器，因为Android无法像ISO这样的本地区域播放，因此默认的全屏显示会阻止某些界面操作. 如果它是全屏H5，那很好，但是对于实时广播（例如弹幕）它是无法实现的，因此此时在同一层播放的概念解决了这个问题. 但是，在测试过程中，发现不同版本的ISO和Android的效果略有不同.

x5-video-orientation: 声明播放器支持的方向，可选的横向风景，纵向肖像. 默认值为portraint. 实况H5或全屏H5通常以纵向模式播放，但是此属性需要x5-video-player-type才能打开H5模式

x5¸-视频¸-播放器¸-全屏: 全屏设置. 它还具有两个属性值，ture和false，true支持全屏播放，false不支持全屏播放.

事实上，ISO WeChat浏览器是Chrome的核心，并且支持所有相关属性，这就是为什么不支持X5同层播放的原因. Android WeChat浏览器是X5内核uc视频播放器，并且不支持某些属性标签（如playinline），因此始终为全屏显示.

仍然存在问题. 在Android微信中，即使添加了上述属性，顶部和底部的黑色边框也会出现问题，并且不能全屏显示.

解决方案: 添加object-fit的样式属性: fill;观看视频. 如果仍然有黑色边框，则视频大小可能不合适.

但是，仅使用以上属性不能解决页面无法在移动终端上全屏播放的问题，并且下面的方法只能阻止视频在Apple手机上全屏播放. 某些Android机型还使用以下方法. 全屏播放是不可能的问题.

以下是重点-具体方法是使用这个特别好的插件: iphone-inline-video

输入github地址，可以看到一个demo文件夹，目录结构如下:

iphone-inline-video.jpeg

demo-threejs.html中还有一个用于显示3D效果的页面，该页面当前未在项目中使用，您可以先将其忽略.

通过检查所选文件的代码，您可以知道如何使用此插件. 我将其下载到本地并剪切了图片. 让我们来看看.

index.html.jpeg

使用它时，必须添加playsinline的属性. 这个非常重要. 可以根据您的情况添加其余几个属性. 还需要参考iphone-inline-video.js文件. 此外，还有一些CSS代码，也必须添加. 我根据自己的情况对该项目进行了一些削减. 有关详细信息，请参见我使用的以下代码:

HTML代码:

<div class="video-container">
        <video controls playsinline
               preload="auto"
               poster="img/popup-img.png"
               webkit-playsinline="true"
               playsinline="true"
               x5-video-orientation="portraint">
            <source src="./img/WeChatSight125.mp4" type="video/mp4">
            <p>你的浏览器不支持 <code>video</code> 标签.</p>
      </video>
</div>

css代码:

.video-container{
    width: 100%;
    height: 5.6rem;
    overflow: hidden;
}
video {
    display: block;
    width: 100%;
    height: calc(100vw / 16 * 9);
    margin: auto;
}
@media (min-width: 500px) {
    video {
        height: calc(500px / 16 * 9)
    }
}
.IIV::-webkit-media-controls-play-button,
.IIV::-webkit-media-controls-start-playback-button {
    opacity: 0;
    pointer-events: none;
    width: 5px;
}
figure {
    width: 100%;
}

js代码:

<script src="js/iphone-inline-video.js"></script>
<script src="js/videos.js"></script>

videos.js中的代码如下图所示:

videos.jpeg

我没有在此处扩展所有代码. 您可以在使用时将其下载到github. 我直接复制并粘贴了它，除了顶部带有红色下划线的两个小地方. 从未动弹.

目前的解决方案是在video标签外部添加一个div，其宽度和高度与视频相同，然后直接将background-image属性添加到div中，而不添加poster属性. 控制宽度和高度

<div id="image-wrap"> <div></div></div>

/* scss 语法 */
#image-wrap {
    width: 100%;
    height: auto;
    padding-bottom: 70%;/* 比例 10 比 7 */
    position: relative;
    border: 1px solid red;
    & > div {
        background: url(/path/to/your/image) no-repeat center center;
        position: absolute;
        top: 0; bottom: 0; left: 0; right: 0;
        background-size: 100%;
    }
}

.vjs-poster {
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: 50% 50%; /* background-size: contain; */
    background-size: 100% 100%;
    background-color: #000000;
    cursor: pointer;
    margin: 0;
    padding: 0;
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    height: 100%;
}

默认值:

background-size: 包含;

修改为:

背景大小: 100％100％；

以上内容是从以下两篇文章中引用的，更多详细信息可以在以下网页中找到:

HTML5视频

的使用简介

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/bofangqi/article-193176-1.html