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

// 获取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. [转]在.NET Core 2.x中将多个强类型设置实例与命名选项一起使用

    自1.0版之前,ASP.NET Core已使用“ 选项”模式配置强类型设置对象.从那时起,该功能获得了更多功能.例如,引入了ASP.NET Core 1.1 IOptionsSnapshot,它允许您 ...

  2. C++ 名字重载、隐藏、覆盖

    名字重载Name overloading 如果顶层函数有不同的签名,则函数名可以相同. 如果同一类中的函数有不同的签名,则函数名可以相同.   C++中允许在相同的作用域内以相同的名字定义几个不同实现 ...

  3. solidity智能合约implicit conversion异常

    问题场景 在使用^0.5.10版本的solidity时,如果使用this关键字会出现以下问题. 代码: require(tokenContract.balanceOf(this) >= _num ...

  4. C#上手练习2（FOR语句）

    循环语句和条件语句一样都是每个程序中必不可少的,循环语句是用来完成一些重复的工作的,以减少编写代码的工作量. C# for 循环是最常用的循环语句,语法形式非常简单,多用于固定次数的循环. 具体的语法 ...

  5. 关于yield和yield from

    一.简单示例 def yield_func(): for _ in range(2): yield "12" def yield_from_func(): for _ in ran ...

  6. python3 对list对象的增删改查

    class peoples: people_list =[] class people: name='' age=-1 def __init__(self,name,age): self.name = ...

  7. 进度更新---Responsive Web Design Certification (300 hours)

    进度更新---Responsive Web Design Certification (300 hours) 已经完成: basic html and html5 basic css applied ...

  8. TCP/IP：完全弄清OSI七层模型

    OSI七层背景概述 诞生于1983年,iso(国际标准委员会)设计并推出. 目的:实现网络行业的兼容性 OSI七层模型与TCP/IP相对应的层次: 一般来说,我们把上三层被称为应用层,下四层被称为数据 ...

  9. linux rz sz文件传输 ZModem协议

    比ftp和scp方便点.需要用支持ZModem协议的工具,SecureCRT是可以的 rz: 接收文件 sz: 发送文件 安装 # sudo apt-get install lrzsz 使用 协议介绍 ...

  10. [20190524]DISABLE TABLE LOCK(12c).txt

    [20190524]DISABLE TABLE LOCK(12c).txt --//如果禁止table lock时,一些ddl操作会被禁止.但是我有点吃惊的是增加字段不受限制.--//链接:http: ...