Ably 订阅和检测 jwplayer 播放状态

Question

上次我在这里问问题时表现得像个菜鸟，我希望这次我能走上正轨，清楚我的问题。

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

这是我启动和订阅 ably 的脚本

<!-- 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 功能不起作用。

感谢任何意见，我想提前感谢您的时间。

编辑：这是我试图遵循的示例：link

编辑：在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 -->

编辑：但后来我的项目经理希望它能够区分视频的暂停和播放状态，所以我更改了代码这样它会每 5 秒检查一次视频是否正在播放，如果没有则取消订阅从渠道来看，重要的是，我们需要 channel.detach();而且它不会自动退订（据我所知）

<!-- 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 -->

Answer 1

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

您的代码中似乎发生了很多事情。首先，您似乎在 front-end 脚本中使用了 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-on-play，本质上 jwplayer().on('play') - 值得检查并更正。

看起来你还有一堆嵌套的异步回调方法，我很确定即使你修复了 Ably 部分，它也会导致意想不到的问题。我很乐意为您提供一些改进建议，请随时将您的代码和一些有关您正在努力实现的目标的信息发送给支持@ably.io，我可以看一下。

Ably 订阅和检测 jwplayer 播放状态

Ably Subscribe and detecting jwplayer play status

javascript

jwplayer

ably-realtime