2025 独立开发者训练营:AI Agent!查看介绍 / 立即报名 →

新的自动播放按钮

刚刚为宁皓网的视频页面添加了一个“自动播放”按钮,点一下这个按钮以后,当前视频播放完成后,会自动跳转到接下来的视频页面,并且会自动播放视频。这个自动播放按钮是以课程为单位的,也就是它可以播放整个课程相关的所有的视频。

不过遗憾的是 IOS 设备不允许自动播放视频,你必须得点击一下播放按钮才行。

新的自动播放按钮

说一下实现这个功能的大概的思路:

视频页面会有一个视频目录,这个视频目录是一个 views (views 是 Drupal 的一个模块)。views 会自动为当前的视频页面的<a>标签中会添加一个 .active类。我们的“自动播放”按钮就是利用了这个.active类。

有了这个.active类,再加上 jQuery ,我们可以很容易找到紧挨着这个 .active 类的链接地址。

判断是否使用自动播放,我先为课程这个内容类型添加了一个 flag 按钮(flag 是一个 Drupal 模块)叫自动播放按钮。然后我让这个用来 flag 课程的按钮显示在了与这个课程相关的视频页面上,这样在所有与这个课程相关的视频页面上的这个自动播放按钮,要么是已标注的状态,要么是没标注的状态,也就是在这些视频页面上,这个按钮的状态是一致的。

宁皓网的视频页面使用了 jwplayer 这个播放器,这个播放器在播放完视频以后会触发一个事件,这个事件发生时,我们可以让它打开 .active 类再往下一个链接的地址,不过在打开下一个视频页面的时候先要判断一下自动播放按钮的状态,如果你选择了自动播放,就会打开下一视频页面,如果没选择自动播放,那么就不会自动打开下一视频页面。

上面我们完成了自动打开下一视频页面的功能。接下来需要自动播放视频。 想让 jwplayer 自动播放视频,需要在嵌入播放器的代码中添加:autostart :"ture",

当然我们还需要动态的判断一下,当前用户的自动播放按钮的状态,如果选择自动播放,那么就在嵌入播放器的代码中添加autostart:"ture",,如果没有选择自动播放,那么就不加载这行代码。

工作
微信好友

用微信扫描二维码,
加我好友。

微信公众号

用微信扫描二维码,
订阅宁皓网公众号。

240746680

用 QQ 扫描二维码,
加入宁皓网 QQ 群。

统计

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

社会化网络

关于

微信订阅号

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