A video control list allows only a video player
// get the DOM all video tag
var videoTags = document.querySelectorAll ( 'video');
// Pause controlling playback video
var pauseAll = function () {
// change this point
var = Self the this;
[] .forEach.call (videoTags, function (I) {
! && i.pause Self I == ();
});
}
// change the DOM array element in the array, call () change this refers to
[] .forEach.call (videoTags, function (I) {
i.addEventListener ( 'Play', pauseAll.bind (I));
});
Note: call (): invoke a method of an object, with another Alternatively a current object, for example: arrayA.call (a, args1, args2 ), i.e. the object a calls arrayA object.
Second, the slide when you play video list page jitter
<! 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; -moz-the User-the SELECT: none; -webkit the SELECT-the User-: none;
/ * Do not copy the templates * /
-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>
playsinline="" webkit-playsinline=""
poster="https://www.9252.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>
NOTE: #app default minimum height: min-height: 100vh, height: height: auto, hidden overflow: overflow: hidden, while the y-axis scroll: overflow-y: scroll.
Three, video tag associated properties Introduction
<Video
Controls
controlslist = "nodownload"
disablePictureInPicture
X5-Video-Player-type = 'H5'
X5-Video-Player-Fullscreen = 'to true'
playsinline
WebKit-playsinline
X-WebKit-AirPlay = "the allow "
Poster =" "
src =" "
> </ video>
Note: property Description
controls: the controls displayed to the user, such as a play button;
autoplay: video playback immediately after the ready;
controlslist =" nodownload "
x5-video-player-fullscreen = 'true': full-screen setting;
X5-Video-Player-Orientation = "portraint": statements of direction player supports, horizontal screen: landscape, portrait: portraint, the default vertical screen displays, regardless of H5 is a full-screen live or generally vertical screen play, but the property needs x5-video-player-type H5 open mode;
playsinline: inline player;
WebKit-playsinline: inline player;
the X--WebKit-AirPlay = "to true / allow ": support Airplay devices;
Poster =" ": realistic images specified video download, or images displayed before the user clicks the play button;
src =" ": to play the URL of the video;
Loop: current media file finishes playing after the start playback (loop) again;
PRELOAD: video when the page is loaded loading and preliminary play;
width: sets the width of the video player;
height: setting the video advertisement's height;
the muted: a predetermined audio output video should be mute;
style = "Object-Fit: fill;" CSS3 styling fill the screen covered the entire video screen, not in accordance with the ratio of the original video
by setting attributes And control styles to make the video full-screen display;
