在 <video> 标签上,我们可以添加一些额外的属性来改变播放器的行为,比如让播放器自动播放,循环,设置视频的预先载入,还有视频的封面等等。
下面我们演示一下这些属性的作用 ….
autoplay
先找到播放器上的 <video> 标签 … 先试一下自动播放 … 可以使用 autoplay … 保存 …
你会看到当页面加载以后,播放器会自动去播放视频 … (暂停)
loop
再试试 循环 … 用到的属性是 loop … 保存 …
我们把视频拖放到快要结束的地方 ….
播放完视频以后,会循环再次播放这个视频 …
preload
再试一下预载视频的属性 … 我们先去掉这个 autoplay 自动播放的属性 ..
保存 …
flowplayer 会预载入视频 … 所以,在页面加载以后,你会看到播放器上会显示视频第一帧的图像 …
另外还有视频的时长 … 我们可以关掉这个预载功能 ..
在 <video> 标签上添加一个 preload 属性 … 把它的值设置为 none … 意思就是,不使用预载功能 …
保存 …
现在在播放器上就不会显示视频第一帧作为封面了 … 而且播放器上也不会再显示视频的时长 …
poster
下面我们可以使用 poster 属性,手工去为视频设置一个封面图像 ..
在我们的网页项目的 video 目录里面,有一张事先准备好的视频的封面图像 …
然后找到 <video> 标签 … 输入 poster="../video/croods-03.jpg" (#鼠标放在图像上)
保存 …
你会看到,在视频没有播放之前,会显示我们设置的封面图像 …