🦄 2024 独立开发者训练营,一起创业!(早鸟优惠在1天后结束)查看介绍 / 立即报名 →

新的自动播放按钮

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

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

新的自动播放按钮

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

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

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

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

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

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

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

工作

评论

多了這個功能真的方便許多,也直接可看到現在正在看的單元名稱,謝謝!
祝福宁皓网會越做越好~

感谢你的建议~

感谢宁皓网,让我很快制作出了很漂亮的网站(自认为)。我注册才两个月的时间,由于平时开发很忙,很少有时间能抽空看一下视频,但做出的网站,我自己感觉很满意了。这几百元钱,真是我有史以来花得最值得的钱!
大家可以看看我做的网站 http://myqzz.com

对了,宁皓的taobao站做得也很好,建议有空也做一怎样做taobao站的视频,我想应该很受欢迎的!我自己就很期待。而且现在卖家这么多,我想真满意官方几套模板的人可能并不多,直接与商用市场对接,应该很有潜力的哟!如果做火了,可要记得感谢我哟!哈哈。

在iPad2上看視頻仍然有看到一半視頻凍住,只剩聲音的問題,不知有沒辦法解決?

皓哥,像2楼那样的网址,建议皓哥可以做一下识别,并且加上跳转代码。。可以减少网站的权重损失。也可以规避一些风险,比如黄网或者其它的。你知道优化是一个原因,政治风险是另一个关键原因。

好地。

原来网站是用Drupal 做的啊

是呀。

微信好友

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

微信公众号

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

240746680

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

统计

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

社会化网络

关于

微信订阅号

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