H5视频播放控制

最新推荐文章于 2024-02-05 16:03:32 发布

「已注销」

最新推荐文章于 2024-02-05 16:03:32 发布

阅读量2.4k

点赞数

本文链接：https://blog.csdn.net/SK_21/article/details/109236827

版权

视频播放控制&默认横屏播放

使用场景：
移动端H5页面中，同一页面中有多个video视频标签，与此同时要求，每次点播视频时，只有当前选中视频开始播放，同一页面其它非选中视频（无论是播放状态还是其它状态）都统一暂停播放。

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

// 获取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铺满整个屏幕，不按照视频的原始比例通过属性的设置和样式的控制让视频全屏显示。

「已注销」

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
H5视频播放控制

视频播放控制&默认横屏播放一、视频列表中控制只允许一个视频播放// 获取DOM中所有的video标签var videoTags = document.querySelectorAll('video');// 控制播放的视频暂停var pauseAll = function () { // 改变this指向 var self = this; [].forEach.call(videoTags, function (i) { i !== self && i.p
复制链接

扫一扫