我的博客
开发记录
前端笔记
前端文档
我的博客
开发记录
前端笔记
前端文档

视频播放控制设置

预计阅读时间: 小于 1 分钟

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

代码示例
1// 获取DOM中所有的video标签
2var videoTags = document.querySelectorAll('video');
3// 控制播放的视频暂停
4var pauseAll = function () {
5  // 改变this指向
6  var self = this;
7  [].forEach.call(videoTags, function (i) {
8  	i !== self && i.pause();
9  });
10}
11// 改变DOM数组中的数组元素，call() 改变this指向
12[].forEach.call(videoTags, function (i) {
13	 i.addEventListener('play', pauseAll.bind(i));
14});
提示「📢」

  call()：调用一个对象的一个方法，用另一个对象替换当前对象，例如：arrayA.call(A,args1,args2)，即A对象调用arrayA对象的方法。

视频列表播放时滑动页面抖动

代码示例
1<!DOCTYPE html>
2<html lang="en">
3	<head>
4		<meta charset="UTF-8" />
5		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
6		<meta content="black" name="apple-mobile-web-app-status-bar-style" />
7		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
8		<meta content="yes" name="apple-mobile-web-app-capable" />
9		<meta content="telephone=no" name="format-detection" />
10		<title>GST</title>
11		<!-- CSS样式 -->
12		<style>
13			* {
14				margin: 0;
15				padding: 0;
16				/* 禁止模板复制 */
17				-webkit-user-select: none;
18				-moz-user-select: none;
19				-ms-user-select: none;
20				user-select: none;
21			}
22
23			html,
24			body {
25				font-size: 16px;
26				background: #fff;
27				font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
28			}
29
30			/* 主要style代码： */
31			#app {
32				width: 100vw;
33				min-height: 100vh;
34				height: auto;
35				overflow: hidden;
36				overflow-y: scroll;
37				/* 防止iOS卡顿 */
38				-webkit-overflow-scrolling: touch;
39			}
40
41			ul.box {
42				width: 100%;
43				display: -webkit-flex;
44				display: flex;
45				flex-direction: column;
46			}
47
48			ul.box li {
49				display: block;
50				margin-top: 0.12rem;
51			}
52
53			ul.box li > p {
54				box-sizing: border-box;
55				padding: 0 0.1rem;
56				line-height: 0.4rem;
57				font-size: 0.3rem;
58			}
59
60			ul.box li > video {
61				margin-top: 0.1rem;
62				width: 100%;
63				height: auto;
64				object-fit: fill;
65				overflow: hidden;
66			}
67		</style>
68	</head>
69
70	<body>
71		<div id="app">
72			<ul class="box" id="videoBox">
73				<li>
74					<p>1、挪威理想国</p>
75					<video
76						controls
77						controlslist="nodownload"
78						disablePictureInPicture
79						playsinline=""
80						x5-playsinline=""
81						playsinline=""
82						webkit-playsinline=""
83						poster="https://cs.xinpianchang.com/uploadfile/article/2019/11/05/5dc0e9357cad8.jpeg@960w_540h_1e_1c.jpg"
84						src="https://qiniu-xpc10.xpccdn.com/5c54f52f221d1.mp4"
85					></video>
86				</li>
87				<li>
88					<p>2、我是阿迪达斯-灰太狼！</p>
89					<video
90						controls
91						controlslist="nodownload"
92						disablePictureInPicture
93						playsinline=""
94						x5-playsinline=""
95						playsinline=""
96						webkit-playsinline=""
97						poster="https://cs.xinpianchang.com/uploadfile/article/2019/11/05/5dc051a64adbc.jpeg@960w_540h_1e_1c.jpg"
98						src="http://oldvod2.v.news.cn/1F/FE/1f74d72eedda3dc922b3487f49619c4730b4fbfe.mp4"
99					></video>
100				</li>
101			</ul>
102		</div>
103	</body>
104</html>
属性参数：

  #app 默认最小高度：min-height：100vh，高度：height：auto，溢出时隐藏：overflow: hidden，y 轴时滚动：overflow-y: scroll。

video 标签相关属性简介

代码示例
1<video
2	controls
3	controlslist="nodownload"
4	disablePictureInPicture
5	x5-video-player-type="h5"
6	x5-video-player-fullscreen="true"
7	playsinline
8	webkit-playsinline
9	x-webkit-airplay="allow"
10	poster=""
11	src=""
12></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 铺满整个屏幕，不按照视频的原始比例

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