Una lista de control de vídeo permite que sólo un reproductor de vídeo
// obtener el DOM todo el vídeo etiqueta
var = videoTags document.querySelectorAll ( 'video');
// Pausa controlar la reproducción de vídeo
var pauseAll = function () {
// cambiar esta punto
var = Auto del presente;
[] .forEach.call (videoTags, la función (I) {
&& i.pause Auto I == ();!
});
}
// cambiar el elemento de la matriz DOM en la matriz, llame al () el cambio esto se refiere a
[] .forEach.call (videoTags, la función (I) {
i.addEventListener ( 'Play', pauseAll.bind (I));
});
Nota: call (): invocar un método de un objeto, con otro Alternativamente, un objeto actual, por ejemplo: arrayA.call (a, args1, args2 ), es decir, el objeto a llama al objeto ARRAYA.
En segundo lugar, la diapositiva cuando se reproduce vídeo página de lista de fluctuación
<! DOCTYPE HTML>
<HTML lang = "ES">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = dispositivo de ancho, inicial escala = 1, de máxima escala = 1, escalable user = no" />
< meta content = "negro" name = "apple-móvil-web-app-status-bar de estilo" />
<meta http-equiv = contenido de "X-UA-Compatible" = "IE = orilla, cromo = 1" / >
<meta content = "sí" name = "apple-móvil-web-app-capaz" />
<meta content = "teléfono = no" name = "formato de detección" />
<title> GST </ title>
< - CSS样式->
<style>
* {
margin: 0;
padding: 0;
-ms-user-select: ninguno;
user-select: ninguno;
}
html,
body {
font-size: 16px;
Antecedentes: #fff;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
/ *主要estilo代码: * /
#app {
anchura: 100vw;
min-altura: 100vh;
height: auto;
overflow: hidden;
overflow-y: de desplazamiento;
/ *防止iOS卡顿* /
-webkit-desbordamiento de desplazamiento: el tacto;
}
ul.box {
width: 100%;
visualizar: -webkit-flex;
visualizar: flexión;
flex-dirección: columna;
}
ul.box li {
display: block;
margin-top: .12rem;
}
ul.box li> p {
cuadro de dimensionamiento: Frontera de la caja;
padding: 0 .1rem;
line-height: .4rem;
font-size: .3rem;
}
ul.box li> vídeo {
margin-top: .1rem;
anchura: 100%;
height: auto;
objeto de ajuste: de llenado;
overflow: hidden;
}
</ Style>
</ head>
2, I -9252 Adidas Kids Web! </ P> <Controles de vídeo controlslist = "nodownload" disablePictureInPicture playsinline = "" X5-playsinline = ""
playsinline = "" webkit-playsinline = ""
cartel = "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>
NOTA: #app altura mínima por defecto: min-height: 100vh, altura: altura: auto, desbordamiento oculta: overflow: hidden, mientras que el eje de desplazamiento: desbordamiento-y: desplazamiento.
Tres, vídeo Marcar asociado propiedades Introducción
<video
Controles
controlslist = "nodownload"
disablePictureInPicture
-de DVD-Vídeo Tipo X5 = 'H5'
X5-Video-jugador-Pantalla Completa = 'true'
playsinline
WebKit-playsinline
X-WebKit-AirPlay = "al permitir "
Poster =" "
src =" "
> </ video>
Nota: descripción del inmueble
controles: los controles muestran al usuario, como por ejemplo un botón de reproducción,
la reproducción automática: la reproducción de vídeo inmediatamente después de la lista;
controlslist =" nodownload "
x5-reproductor de vídeo a pantalla completa = 'verdadero': ajuste de pantalla completa;
X5-Video-jugador-Orientación = "portraint": declaraciones de soportes jugador dirección, horizontal de la pantalla: paisaje, retrato: Portraint, aparece la pantalla verticales predeterminadas, independientemente de H5 es una pantalla completa en vivo o juego de la pantalla generalmente vertical, pero la propiedad necesita modo abierto H5-de tipo de reproductor de vídeo x5;
playsinline: reproductor en línea;
WebKit-playsinline: reproductor en línea;
el X - WebKit-AirPlay = "true / permitir ": los dispositivos de soporte Airplay;
Poster =" ": imágenes realistas especificada de descarga de vídeo o imágenes que aparecen antes de que el usuario hace clic en el botón de reproducción;
src =" ": jugar a la URL del video;
Loop: archivo multimedia actual termina de reproducirse después de la reproducción de partida (circular) de nuevo;
PRELOAD: vídeo cuando se carga la página cargada y el juego preliminar;
anchura: establece el ancho del reproductor de vídeo;
altura: ajuste de la altura del vídeo del anuncio;
el silenciado: un video de salida de audio predeterminado debe ser mute;
style = "Object-Fit: relleno;" relleno CSS3 labrar la pantalla cubre toda la pantalla de vídeo, no de acuerdo con la relación de la video original
por atributos de ajuste Y controlar estilos para hacer la visualización a pantalla completa de vídeo;
