video 属性,自动播放,循环,预载还有封面

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

在 <video> 标签上,我们可以添加一些额外的属性来改变播放器的行为,比如让播放器自动播放,循环,设置视频的预先载入,还有视频的封面等等。

下面我们演示一下这些属性的作用 ….

autoplay

先找到播放器上的 <video> 标签 … 先试一下自动播放 … 可以使用 autoplay … 保存 …

你会看到当页面加载以后,播放器会自动去播放视频 … (暂停)

loop

再试试 循环 … 用到的属性是 loop … 保存 …

我们把视频拖放到快要结束的地方 ….

播放完视频以后,会循环再次播放这个视频 …

preload

再试一下预载视频的属性 … 我们先去掉这个 autoplay 自动播放的属性 ..

保存 …

flowplayer 会预载入视频 … 所以,在页面加载以后,你会看到播放器上会显示视频第一帧的图像 …

另外还有视频的时长 … 我们可以关掉这个预载功能 ..

在 <video> 标签上添加一个 preload 属性 … 把它的值设置为 none … 意思就是,不使用预载功能 …

保存 …

现在在播放器上就不会显示视频第一帧作为封面了 … 而且播放器上也不会再显示视频的时长 …

poster

下面我们可以使用 poster 属性,手工去为视频设置一个封面图像 ..

在我们的网页项目的 video 目录里面,有一张事先准备好的视频的封面图像 …

然后找到 <video> 标签 … 输入 poster="../video/croods-03.jpg" (#鼠标放在图像上)

保存 …

你会看到,在视频没有播放之前,会显示我们设置的封面图像 …

video 属性,自动播放,循环,预载还有封面《 Flowplayer 播放器 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点