单个视频播放控制&默认横屏播放
程序员文章站
2022-05-22 20:14:03
一、视频列表中控制只允许一个视频播放 注： call() ：调用一个对象的一个方法，用另一个对象替换当前对象，例如： arrayA.call(A,args1,args2) ，即 A 对象调用 arrayA 对象的方法。 二、视频列表播放时滑动页面抖动 注 ： app 默认最小高度： min heig ......
一、视频列表中控制只允许一个视频播放
// 获取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铺满整个屏幕，不按照视频的原始比例
通过属性的设置和样式的控制让视频全屏显示；
上一篇： 为什么接电话
下一篇： oracle 锁用户