17.6　为视频指定循环播放和海报图像

不仅可以将视频设为自动播放，还可以将它设为循环播放，如图17.6.1所示。（不过这一做法并不推荐，考虑一下用户的感受就知道原因了。）

  1. <body>
  2.      <video src="paddle-steamer.webm" autoplay="autoplay" loop="loop"> </video>
  3. </body>

图17.6.1　设置了自动播放和循环播放的单个WebM视频

要实现循环播放，只需要用到autoplay和loop属性。

不过需要注意，Firefox并不支持loop属性。

通常，浏览器会在视频加载时显示视频的第一帧。你可能想对此作出修改，指定你自己的图像。这可以通过海报图像实现。

  1. 为视频添加自动播放和循环播放

  • 获取视频资源。

  • 输入

    ，这里的myVideo.ext是视频文件的位置、名称和扩展名。

  1. 为视频指定海报图像

  • 获取视频资源。

  • 输入

    ，其中，myVideo.ext是视频文件的位置、名称和扩展名，myPoster.jpg是想用做海报图像的图像，如图17.6.2和图17.6.3所示。

  1. <body>
  2.      <video src="paddle-steamer.webm" poster="paddle-steamer-poster.jpg" controls="controls"></video>
  3. </body>

图17.6.2　指定了海报图像（当页面加载并显示视频时显示该图像）的单个WebM视频（含控件）

17.6　为视频指定循环播放和海报图像 - 图1

图17.6.3　显示海报图像的视频。在这个例子中，图像是取自视频本身的一幅屏幕截图