Ably 订阅和检测 jwplayer 播放状态

Question

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

所以我的问题是：我在 PHP 文件中构建了这个播放器，我通过 iframe 将它调用到其他页面以播放视频直播。播放器使用jwplayer，我想使用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 -->

顺便说一句，我应该声明，虽然我可以在一个项目中找到自己的方法，但我仍然是编程新手，在这种情况下，其他一切都可以正常工作，只有 able 功能不起作用。

感谢您的任何意见，并提前感谢您的宝贵时间。

编辑：这是我正在尝试遵循的示例：link

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

正如 cmets 中所述，我是 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-on-play，所以本质上是jwplayer().on('play') - 值得检查并纠正它。

看起来你还有一堆嵌套的异步回调方法，我很确定即使你修复了 Ably 部分，它也会导致意想不到的问题。我很乐意为您提供一些改进建议，请随时向 support@ably.io 发送一封电子邮件，其中包含您的代码以及您想要实现的目标的一些信息，我可以看看。