设置播放列表

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

播放列表就是在一个播放器上可以播放多个视频 … 我们需要手工去设置播放列表里的每个项目… 每个项目可以拥有自己的标题,描述 … 要播放的视频,还有视频的封面等等 …

下面我们来演示一下 …

打开网页项目 … 我们直接在 JW Player 播放器的设置里去添加这个播放列表 …

另起一行 … 确定这里使用了一个英文状态下的逗号分隔开 ….

然后可以使用 playlist 这个参数 … 后面是一个冒号 … 播放列表里的所有项目都会放在一组方括号里 …

里面的每一个项目使用一组大括号 … 中间同样使用英文状态下的逗号分隔开 …

这里我们要设置三个项目… 所以需要三个大括号 …

playlist: [{},{}.{}]

下面我们再去分别定义每个项目 … 鼠标放在第一个大括号里面 .. 为了代码显示的更清楚一些,我们可以另一行 …

播放列表里的每个项目需要的资源,比如视频,图片,我提前已经放在了 video 这个目录的下面 …

然后先用 image 参数 … 去设置第一个项目的视频封面图像 …

image: "video/croods-03.jpg",

最后加上一个英文状态下的逗号,分隔项目里的不同的参数 …

另起一行 … 再用 file 参数去设置这个项目要播放的视频文件 ….

file: "video/croods-03.mp4",

然后可以使用 title ,去设置一下项目的标题 …

title: "《疯狂原始人》预告 3",

我们再添加一个描述 … description ..

description: "疯狂原始人电影预告片 3"

下面我们再去设置播放列表里的其它两个项目 .. 可以先复制一下刚才添加的这些内容 …

粘贴到第二个大括号里 … 然后修改一下里面的内容 ….

再粘贴到第三个大括号里 … 再修改一下内容 ….

预览

下面我们可以去预览一下 … 保存 …

现在播放器上面没有什么太大变化 … 只不过播放按钮上会显示我们在播放列表项目里,用 title 设置的标题 …

如果你不喜欢在这里显示标题,一会儿我们可以去掉它 …

点击播放 …

这时候,在播放器的控制栏上,会多出两个按钮 … 上一个 … 还有 下一个 …

点击对应的按钮 … 可以控制播放器当前所播放的视频 …

在下面的视频里,我们再看一下把播放列表显示在边栏上的方法 …

设置播放列表《 JW Player 播放器 》

统计

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

社会化网络

关于

微信订阅号

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