HTML5视频标签详解-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_56787796/article/details/115774352

HTML5视频

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>HTML5新增视频标签</title>
    <style>
      video {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <video src="media/mi.mp4"></video>
  </body>
</html>

不播放的样式

controls 向用户展示播放控件

<video src="media/mi.mp4" controls></video>

poster=" " 视频还在加载的时候显示这张图片

    <video src="media/mi.mp4" controls poster="media/mi9.jpg"></video>

可以设置宽高

<video src="media/mi.mp4" controls poster="media/mi9.jpg" width="500px"></video>

由于录制视频有些麻烦这里就不配录制视频了

autoplay 视频自动播放谷歌浏览器中需要加上muted

    <video src="media/mi.mp4" autoplay muted></video>

loop 循环播放

    <video src="media/mi.mp4" loop></video>

preload="auto" 预先加载视频 preload="none" 不预先加载视频有自动播放autoplay 时不用考虑这个

muted静音播放和自动播放搭配使用

    <video src="media/mi.mp4" muted></video>

属性表

ps:本图来自黑马程序员