HTML 视频

在html5中使用视频,只要添加元素<video></video>标签表示。

<video>有几个属性:

  • src 指定音频文件的路径
  • poster 视频播放之前显示的图片
  • width 指定播放器宽度
  • height 指定播放器高度
  • controls 是否显示播放器控件
  • autoplay 是否自动播放
  • preload 启用预加载,有3个值。none不加载,auto页面加载时加载视频,metadata表示游览器只需收集少量视频信息。
  • loop 循环播放
  • 子标签<source> 可以指定多个音频源,同样使用src指定音频文件路径

示例:

<!DOCTYPE html>
<html>
    <head>
        <title>视频</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <video src="video/puppy.mp4"
               poster="images/puppy.jpg"
               width="400" height="300"
               preload
               controls
               loop>
        </video>
    </body>
</html>