视频列表播放控制

视频列表中控制只允许一个视频播放

代码示例

// 获取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: 0.12rem;
            }

            ul.box li > p {
                box-sizing: border-box;
                padding: 0 0.1rem;
                line-height: 0.4rem;
                font-size: 0.3rem;
            }

            ul.box li > video {
                margin-top: 0.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 铺满整个屏幕，不按照视频的原始比例

通过属性的设置和样式的控制让视频全屏显示；

另一种实现：事件委托方式

来自原《视频列表播放控制》，与上文等价，可按需选用。

需求场景

一页面有多个视频控制视频需要播放，但每次只能允许以个视频播放，其余视频全部暂停播放。即当点击一个视频播放时，其余在播放的视频自动暂停播放。

实现代码：

代码示例

// 获取页面所有的还有video的元素节点
var videoTags = document.querySelectorAll("video");
// 修改this指向，暂停非选中的视频
var pauseAll = function () {
    var self = this;
    [].forEach.call(videoTags, function (i) {
        i !== self && i.pause();
    });
};
// 播放选中的视频
[].forEach.call(videoTags, function (i) {
    i.addEventListener("play", pauseAll.bind(i));
});

#视频列表播放控制

#视频列表中控制只允许一个视频播放

#视频列表播放时滑动页面抖动

#video 标签相关属性简介

#属性简介

#另一种实现：事件委托方式

#实现代码：

视频列表播放控制

视频列表中控制只允许一个视频播放

视频列表播放时滑动页面抖动

video 标签相关属性简介

属性简介

另一种实现：事件委托方式

实现代码：