单个视频播放控制&默认横屏播放
一、视频列表中控制只允许一个视频播放
// 获取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铺满整个屏幕，不按照视频的原始比例
通过属性的设置和样式的控制让视频全屏显示；
单个视频播放控制&默认横屏播放的更多相关文章
- [转]C#中调用资源管理器(Explorer.exe)打开指定文件夹 + 并选中指定文件 + 调用（系统默认的播放类）软件（如WMP）打开（播放歌曲等）文件
原文:http://www.crifan.com/csharp_call_explorer_to_open_destinate_folder_and_select_specific_file/ C#中 ...
- 零基础读懂视频播放器控制原理——ffplay播放器源代码分析
版权声明:本文由张坤原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/535574001486630869 来源:腾云阁 ht ...
- ASP.NET Core 3.0 一个 jwt 的轻量角色/用户、单个API控制的授权认证库
目录 说明 一.定义角色.API.用户 二.添加自定义事件 三.注入授权服务和中间件 三.如何设置API的授权 四.添加登录颁发 Token 五.部分说明 六.验证 说明 ASP.NET Core 3 ...
- 【HarmonyOS】【xml】使用xml绘制视频播放控制栏
本文记录HarmonyOS使用xml绘制视频播放控制栏 效果图如下 代码如下 点击查看代码 <?xml version="1.0" encoding="utf-8& ...
- unity3d笔记：控制特效的播放速度
一般在游戏中,主角或者怪物会受到减速效果,或者攻击速度减慢等类似的状态.本身动作减速的同时,衔接在角色上的特效也需要改变相应的播放速度.一般特效有三个游戏组件: 关键点就是改变Ani ...
- JS控制flash的播放
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- JS实现控制HTML5背景音乐播放暂停
首先在网页中嵌入背景音乐,html5代码为: <script src="http://wuover.qiniudn.com/jquery.js"></script ...
- 微信小程序 Video默认横屏
wxml文件 <video id='myvideo' src='你的视频文件路径'> </video> js文件 onLoad: function (options) { va ...
- iOS WebView中视频横屏播放返回导航栏在状态栏下面
iOS9以上系统横屏播放UIWebView中的视频返回后会出现以下问题:1.如图,UIWebView中包含一个视频: 1 2.播放web内容中的视频,并横屏观看: 2 3.直接在横屏状态下返回 ...
随机推荐
- ASP.NET ---- Repeater 遍历出省市
Repeater 控件可以数据库中的数据,一条条的查找出,不需要后端在进行遍历输出了, Repeater必须使用的是Itemtemplate,其它的类型模板按需添加,主要记住Itemtemplate ...
- Nginx反向代理Tomcat静态资源无法加载以及请求链接错误
在使用Nginx实现Tomcat的负载均衡的时候,项目发布到了Tomcat,Nginx也配置好了, 当访问的时候发现了与预期不符 表现为: 静态资源加载失败 链接跳转地址错误 下面是我错误的配置文件 ...
- oracle学习笔记（十） 查询练习（一）
查询练习一 表创建 create table employee as select * from soctt.emp ; --记得授权 sysdba用户登录 grant select on scott ...
- 谈谈EF Core实现数据库迁移
作为程序员,在日常开发中,记忆犹新的莫过于写代码,升级程序.升级程序包含两部分:一是,对服务程序更新:二是,对数据库结构更新.本篇博文主要介绍数据库结构更新,在对数据库升级时,不知道园友们是否有如下经 ...
- Z从壹开始前后端分离【 .NET Core2.2/3.0 +Vue2.0 】框架之五 || Swagger的使用 3.3 JWT权限验证【必看】
本文梯子 本文3.0版本文章 前言 1.如何给接口实现权限验证? 零.生成 Token 令牌 一.JWT ——自定义中间件 0.Swagger中开启JWT服务 1:API接口授权策略 2.自定义认证之 ...
- Java日期时间API系列5-----Jdk7及以前的日期时间类TimeUnit在并发编程中的应用
TimeUnit是一个时间单位枚举类,主要用于并发编程,时间单元表示给定粒度单元的时间持续时间,并提供实用程序方法来跨单元转换,以及在这些单元中执行计时和延迟操作. 1.时间单位换算 (1)支持的单位 ...
- 解决pip使用异常No module named 'pip'
场景 在使用pip进行升级时 python install --upgrade named pip 时提示: No module named pip 注: 博客: https://blog.csdn. ...
- HTML常用标签三
表格标签 表格的作用 表格主要用于显示.展示数据,因为他们可以让数据显示的非常规整,可读性非常好,特别是后台展示数据的时候,能够熟练运用表格就先的很重要,一个清爽简约的表格能够把繁杂的数据表现的很有条 ...
- SQLi-LABS Page-4 (Challenges) Less-54-Less-65
Less-54 union - 1 http://10.10.202.112/sqli/Less-54?id=-1' union select 1,2,group_concat(table_name) ...
- iOS----------提交被拒
Hello, Thank you for resubmitting your app for review. Guideline 2.5.1 - Performance - Software Requ ...