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

// 获取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. 06-Django视图

    什么是视图? 视图就是应用中views.py文件中的函数,视图函数的第一个参数必须是request(HttpRequest)对象.返回的时候必须返回一个HttpResponse对象或子对象(包含Htt ...

  2. Python之基本运算符

    基本运算符 1.算符运算符 运算符 描述 例子 + 两个对象相加 a+b - 两个对象相减 a-b * 两个数相乘或返回一个被重复若干次的字符串 a*b / 两个数相除 a/b % 取模,返回除法的余 ...

  3. 【LeetCode】2. 两数相加

    题目 给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字.   如果,我们将这两个数相加起来,则会返回一个新的链表来表 ...

  4. XAF-在代码中实现属性值验证（EF）

    This lesson explains how to set rules for business classes and their properties. These rules are val ...

  5. 【转载】不可不知的 Android strings.xml 那些事

    相信 strings.xml 已经是大家在 Android 开发中最熟悉的文件之一了,但其实它也有很多需要注意的地方和一些小技巧,知道了这些可以让你的 Android 应用更加规范易用,大家来看看吧. ...

  6. gradle 参数配置监听

    说明 gradle提供了对project状态配置监听的接口回调,以方便我们来配置一些Project的配置属性,监听主要分为两大类,一种是通过project进行 回调,一种是通过gradle进行回调,作 ...

  7. python爬虫中文乱码问题（request方式爬取）

    https://blog.csdn.net/guoxinian/article/details/83047746   req = requests.get(url)返回的是类对象 其包括的属性有: r ...

  8. Mysql—修改用户密码（重置密码）

    1.登录mysql [root@localhost ~]# mysql -uroot -p123456 [root@localhost ~]# mysql -hlocalhost -uroot -p1 ...

  9. [日常] gitlab创建用户并把用户加入项目

    在gitlab里创建用户 默认密码是要求创建的用户自己去邮箱重置,也可以创建完成后直接点击编辑,就可以更改密码了 创建完用户,用户登录的时候需要去重置密码 创建完项目,就可以去使用了 也可以为这个项目 ...

  10. [视频教程] 使用docker的方式安装redis

    直接使用docker拉取redis的镜像,并且进行端口映射与文件目录共享,这样可以直接在宿主机的端口上就可以进行访问了.其实本质上也是在一个简化版的ubuntu的容器内安装好的redis-server ...