Ably订阅并检测jwplayer播放状态



上次我在这里问这个问题时,我表现得像个十足的傻瓜,我希望这次我能走上正轨,清楚地解决我的问题。

所以我的问题是:我在一个PHP文件中构建了这个播放器,我通过iframe将其调用到其他页面,以便播放视频直播。播放器使用jwplayer,我想使用ably库来监控播放器处于播放状态的次数,我希望每个播放器在播放时订阅该频道。

这是我启动并订阅ely 的脚本

<!-- ably script to sub on play -->
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
var Ably = require('ably');
var api_key='here we set the api key for the project';
var ably = new Ably.Realtime({key: api_key});
var channel = ably.channels.get('player_status');
channel.subscribe(function(message) {
$(document).ready(function(){
jwplayer().onPlay(function() { alert('playing the video and subscribed'); });
});
});
channel.publish('Video State', 'Playing');
</script>
<!-- Ends here -->

顺便说一句,我应该声明,尽管我可以找到一个项目的方法,但我仍然是编程的新手,在这种情况下,其他一切都有效,只有ably功能不起作用。

我感谢您的意见,并感谢您提前抽出时间。

编辑:这是我试图遵循的一个例子:链接

编辑:在Srushtika Neelakantam女士的帮助下,巧妙的连接和订阅效果很好,现在我必须修改它以更改jwplayer状态。

编辑:这个代码现在似乎工作得很好:

<script src="https://cdn.ably.io/lib/ably-1.js"></script>
<script>
var api_key='Enter-Key-Here';
var ably = new Ably.Realtime({key: api_key});
var channel = ably.channels.get('player_status');
channel.subscribe(function(message) {
jwplayer().on('play');
console.log(message.data)//for debug
});
channel.publish('Video State', 'the video is playing');
</script>
<!-- Ends here -->

edit:但后来我的项目经理希望它能区分视频的暂停和播放状态,所以我像这样修改了代码,这样它会每5秒检查一次视频是否正在播放,如果没有,它会取消订阅频道,重要的是,为此我们需要channel.destrict((;而且它不会自动取消订阅(据我所知(

<!-- ably script to sub on play -->
<script src="https://cdn.ably.io/lib/ably-1.js"></script>
<script>
var api_key='----- Enter API key here ----';
var ably = new Ably.Realtime({key: api_key});
var channel = ably.channels.get('player_status');
setInterval(function(){
if (jwplayer().getState() === 'playing'){
channel.subscribe(function(message) {
console.log(message.data)//for debug
});
channel.publish('Video State', 'the video is playing');
}else{
channel.detach();
}
},5000);
</script>
<!-- Ends here -->

如评论中所述,我是Ably的开发倡导者。

您的代码中似乎发生了很多事情。首先,看起来您正在前端脚本中使用require关键字。请注意,要在浏览器客户端上使用Ably,您只需将Ably添加为CDN脚本,然后立即在脚本中开始使用。我做了一些更改,如下所示,并进行了测试。我可以确认它按预期工作。

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://cdn.ably.io/lib/ably.min-1.js"></script>
<script>
var api_key='<api-key>';
var ably = new Ably.Realtime({key: api_key});
var channel = ably.channels.get('player_status');
channel.subscribe(function(message) {
console.log(message.data);
});
channel.publish('Video State', 'Playing');
</script>

请注意,我已经删除了jwplayer内容,以避免怀疑是哪个服务导致了问题。

我自己没有使用过jwplayer,但从他们的文档中可以看出,他们没有名为onPlay()的方法,而是play事件的事件触发器。看见https://developer.jwplayer.com/jwplayer/docs/jw8-javascript-api-reference#section-jwplayer正在播放,所以本质上jwplayer().on('play')-值得检查并更正。

看起来你还有一堆嵌套的异步回调方法,我敢肯定,即使在你修复了Ably部分之后,它也会引起意想不到的问题。我很高兴能帮你提出一些改进建议,请随时发送一封包含你的代码和一些你正在努力实现的信息的电子邮件support@ably.io我可以看看。

最新更新