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

// 获取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铺满整个屏幕，不按照视频的原始比例

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

单个视频播放控制&默认横屏播放的更多相关文章

  1. [转]C#中调用资源管理器(Explorer.exe)打开指定文件夹 + 并选中指定文件 + 调用（系统默认的播放类）软件（如WMP）打开（播放歌曲等）文件

    原文:http://www.crifan.com/csharp_call_explorer_to_open_destinate_folder_and_select_specific_file/ C#中 ...

  2. 零基础读懂视频播放器控制原理——ffplay播放器源代码分析

    版权声明:本文由张坤原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/535574001486630869 来源:腾云阁 ht ...

  3. ASP.NET Core 3.0 一个 jwt 的轻量角色/用户、单个API控制的授权认证库

    目录 说明 一.定义角色.API.用户 二.添加自定义事件 三.注入授权服务和中间件 三.如何设置API的授权 四.添加登录颁发 Token 五.部分说明 六.验证 说明 ASP.NET Core 3 ...

  4. 【HarmonyOS】【xml】使用xml绘制视频播放控制栏

    本文记录HarmonyOS使用xml绘制视频播放控制栏 效果图如下 代码如下 点击查看代码 <?xml version="1.0" encoding="utf-8& ...

  5. unity3d笔记：控制特效的播放速度

           一般在游戏中,主角或者怪物会受到减速效果,或者攻击速度减慢等类似的状态.本身动作减速的同时,衔接在角色上的特效也需要改变相应的播放速度.一般特效有三个游戏组件:   关键点就是改变Ani ...

  6. JS控制flash的播放

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  7. JS实现控制HTML5背景音乐播放暂停

    首先在网页中嵌入背景音乐,html5代码为: <script src="http://wuover.qiniudn.com/jquery.js"></script ...

  8. 微信小程序 Video默认横屏

    wxml文件 <video id='myvideo' src='你的视频文件路径'> </video> js文件 onLoad: function (options) { va ...

  9. iOS WebView中视频横屏播放返回导航栏在状态栏下面

    iOS9以上系统横屏播放UIWebView中的视频返回后会出现以下问题:1.如图,UIWebView中包含一个视频:   1 2.播放web内容中的视频,并横屏观看:   2 3.直接在横屏状态下返回 ...

随机推荐

  1. Python的条件锁与事件共享

    1:事件机制共享队列: 利用消息机制在两个队列中,通过传递消息,实现可以控制的生产者消费者问题要求:readthread读时,writethread不能写:writethread写时,readthre ...

  2. 让iphone5s 支持 flex 布局

    /* Center slide text vertically */display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;di ...

  3. SLB外部端口非80时---》转发到nginx---》URL跳转丢失端口的解决方案

    配置nginx反向代理时遇到一个问题,当设置nginx监听80端口时转发请求没有问题.但一旦设置为监听其他端口,就一直跳转不正常: 如,访问欢迎页面时应该是重定向到登录页面,在这个重定向的过程中端口丢 ...

  4. Runtime 类初探

    Runtime类 认识 Runtime类 在每一个JVM进程中都会存在一个Runtime类,这个类的主要功能是取得一些与运行时有关的环境属性或创建进程等操作. 在Runtime类定义的时候,它的构造方 ...

  5. Discuz! X3 数据表、数据字段说明

    pre_common_admincp_cmenu 后台菜单收藏表 字段名 数据类型 默认值 允许非空 自动递增 备注 id smallint(6) unsigned    NO 是   title v ...

  6. 9.智能快递柜SDK(串口型锁板)

    1.智能快递柜(开篇) 2.智能快递柜(终端篇) 3.智能快递柜(通信篇-HTTP) 4.智能快递柜(通信篇-SOCKET) 5.智能快递柜(通信篇-Server程序) 6.智能快递柜(平台篇) 7. ...

  7. window下操作jenkins查看页面的几种方式

    原文:https://blog.csdn.net/kennin19840715/article/details/78782505 前几天通过jenkins本机执行selenium cases, 发现浏 ...

  8. Scala开发问题汇总

    1.JDK版本问题 Error:java.lang.VerifyError: Uninitialized Exception Details: Location: scala/collection/i ...

  9. MySQL 部署分布式架构 MyCAT (三)

    配置垂直分表 修改 schema.xml (db1) cd /data/mycat/conf cp schema.xml schema.xml.rwh # 修改配置 vi schema.xml < ...

  10. Matplotlib基础 可视化绘图 学习笔记

    简单的绘图 1.确定画布并画线 import matplotlib.pyplot as plt #静态绘图 fig = plt.figure() ax = fig.add_subplot(345) # ...