共计 3252 个字符，预计需要花费 9 分钟才能阅读完成。

一、视频列表中控制，千农优选系统开发（T:I8O-285I-O282 V 林）
// 获取 DOM 中所有的 video 标签
var videoTags = document.querySelectorAll(‘video’);
// 控制播放的视频暂停
var pauseAll = function () {

// 改变 this 指向
var self = this;
[].forEach.call(videoTags, function (i) {

i !== self && i.pause();

});
}
// 改变 DOM 数组中的数组元素，call() 改变 this 指向
[].forEach.call(videoTags, function (i) {

 i.addEventListener('play', pauseAll.bind(i));

});
注：call()：调用一个对象的一个方法，用另一个对象替换当前对象，例如：arrayA.call(A,args1,args2)，即 A 对象调用 arrayA 对象的方法。

二、视频列表播放时滑动页面抖动
<!DOCTYPE html>
<html lang=”en”>

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="telephone=no" name="format-detection" />
<title>GST</title>
<!-- CSS 样式 -->
<style>
    * {
        margin: 0;
        padding: 0;
        /* 禁止模板复制 */
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    html,
    body {
        font-size: 16px;
        background: #fff;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
  
            /* 主要 style 代码：*/
    #app {
        width: 100vw;
        min-height: 100vh;
        height: auto;
        overflow: hidden;
        overflow-y: scroll;
        /* 防止 iOS 卡顿 */
        -webkit-overflow-scrolling: touch;
    }

    ul.box {
        width: 100%;
        display: -webkit-flex;
        display: flex;
        flex-direction: column;
    }

    ul.box li {
        display: block;
        margin-top: .12rem;
    }

    ul.box li>p {
        box-sizing: border-box;
        padding: 0 .1rem;
        line-height: .4rem;
        font-size: .3rem;
    }

    ul.box li>video {
        margin-top: .1rem;
        width: 100%;
        height: auto;
        object-fit: fill;
        overflow: hidden;
    }
</style>

</head>

<body>

<div id="app">
    <ul class="box" id="videoBox">
        <li>
            <p>1、挪威理想国 </p>
            <video controls controlslist="nodownload" disablePictureInPicture playsinline=""x5-playsinline=""
                playsinline=""webkit-playsinline=""
                poster="https://cs.xinpianchang.com/uploadfile/article/2019/11/05/5dc0e9357cad8.jpeg@960w_540h_1e_1c.jpg"
                src="https://qiniu-xpc10.xpccdn.com/5c54f52f221d1.mp4"></video>
        </li>
        <li>
            <p>2、我是阿迪达斯 - 灰太狼！</p>
            <video controls controlslist="nodownload" disablePictureInPicture playsinline=""x5-playsinline=""
                playsinline=""webkit-playsinline=""
                poster="https://cs.xinpianchang.com/uploadfile/article/2019/11/05/5dc051a64adbc.jpeg@960w_540h_1e_1c.jpg"
                src="http://oldvod2.v.news.cn/1F/FE/1f74d72eedda3dc922b3487f49619c4730b4fbfe.mp4"></video>
        </li>
    </ul>
</div>

</body>

</html>
注：#app 默认最小高度：min-height：100vh，高度：height：auto，溢出时隐藏：overflow: hidden，y 轴时滚动：overflow-y: scroll。

三、video 标签相关属性简介

<video 
    controls 
    controlslist="nodownload" 
    disablePictureInPicture 
    x5-video-player-type='h5'
    x5-video-player-fullscreen='true' 
    playsinline 
    webkit-playsinline 
    x-webkit-airplay="allow" 
    poster=""src=""
></video>

注：属性简介

controls：向用户显示控件，比如播放按钮；
autoplay：视频在就绪后马上播放；
controlslist=”nodownload”：隐藏 video 标签下载按钮；
disablePictureInPicture：隐藏 video 标签画中画；
x5-video-player-type=’h5’：启用 X5 内核的 H5 播放器；
x5-video-player-fullscreen=’true’：全屏设置；
x5-video-player-orientation=”portraint”：声明播放器支持的方向，横屏：landscape，竖屏：portraint，默认竖屏播放，无论是直播还是全屏 H5 一般都是竖屏播放，但是该属性需要 x5-video-player-type 开启 H5 模式；
playsinline：内联播放；
webkit-playsinline：内联播放；
x-webkit-airplay=”true / allow”：支持 Airplay 的设备；
poster=””：规定视频下载时现实的图像，或者在用户点击播放按钮前显示的图像；
src=””：要播放视频的 URL；
loop：当前媒介文件完成播放之后再次开始播放（循环播放）；
preload：视频在页面加载时进行加载，并预备播放；
width：设置视频播放器的宽度；
height：设置视频播发器的高度；
muted：规定视频的音频输出应该被静音；
style=”object-fit:fill;” css3 样式设置填充整个屏幕 video 铺满整个屏幕，不按照视频的原始比例
通过属性的设置和样式的控制让视频全屏显示；

千农优选系统开发

站内搜索