La etiqueta de video puede reproducir videos a través de configuraciones de atributos simples. Podemos hacer un aprendizaje simple para principiantes, pero las operaciones avanzadas requieren objetos de video para completar un juego de alto nivel.
Tabla de contenido
1. Materiales de referencia
1.1 Documentación
1..2 vídeo
2. Fácil de usar
<video src="video.mp4" controls="controls">
您的浏览器不支持 video 标签。
</video>3. Propiedades de la etiqueta
| Atributos | valor | describir |
|---|---|---|
| auto-reproducción | auto-reproducción | Si está presente, el video se reproduce tan pronto como esté listo. |
| control S | control S | Si están presentes, los controles se muestran al usuario, como un botón de reproducción. |
| altura | píxeles | Establezca la altura del reproductor de video. |
| bucle | bucle | Si está presente, la reproducción comienza de nuevo cuando el archivo multimedia ha terminado de reproducirse. |
| apagado | apagado | Especifica que se debe silenciar la salida de audio del video. |
| póster | URL | Especifica la imagen que se mostrará mientras se descarga el video o antes de que el usuario haga clic en el botón de reproducción. |
| precarga | precarga | Si este atributo está presente, el video se carga al cargar la página y está listo para reproducirse. Este atributo se ignora si se utiliza la "reproducción automática". |
| origen | URL | La URL del video a reproducir. |
| ancho | píxeles | Establece el ancho del reproductor de video. |
3.1 Casos de uso
<video
id="video"
src="video.mp4" /*视频地址*/
controls = "true" /*是否显示播放控件*/
poster="images.jpg" /*视频封面*/
preload="auto" /*预加载*/
webkit-playsinline="true" /*IOS中让视频在小窗内播放而不是全屏播放*/
playsinline="true" /*IOS微信浏览器支持小窗内播放*/
x-webkit-airplay="allow" /*是否支持ios的AirPlay功能*/
x5-video-player-type="h5" /*启用H5播放器,是wechat安卓版特性*/
x5-video-player-fullscreen="true" /*设置为true防止横屏*/
x5-video-orientation="portraint" /*播放器的方向，landscape横屏，portraint竖屏，默认值为竖屏*/
style="object-fit:fill">
</video>