Ably订阅并检测jwplayer的播放状态

问题描述

上次我在这里提问时，我表现得像个菜鸟，希望这次我对自己的问题有更多的了解。

因此，我的问题是：我已将此播放器内置在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 -->

btw我应该指出，尽管我可以在项目中找到自己的出路，但我仍然是编程的新手，在这种情况下，其他所有功能都可以使用，只有able功能无法使用。

我非常感谢您的投入，我想多谢您的宝贵时间。

编辑：这是我尝试遵循的示例：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 -->

edit：但是我的项目经理希望它能够区分视频的暂停状态和播放状态，因此我更改了这样的代码，因此它将每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 -->

解决方法

如评论中所述，我是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），我可以看一下。

ably-realtime javascript