Ably 订阅和检测 jwplayer 播放状态

Posted 2023-04-18

【中文标题】Ably 订阅和检测 jwplayer 播放状态

【英文标题】：Ably Subscribe and detecting jwplayer play status

【发布时间】：2020-12-02 00:05:34

【问题描述】：

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

所以我的问题是：我在 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 -->

【问题讨论】：

大家好，我是 Ably 的开发倡导者。只是为了避免订阅回调中其他任何内容不起作用的可能性，您是否可以检查回调是否被调用？也许通过添加调试点或只是在控制台中记录message.data？

您好，很高兴与您交谈，我已经看了很多您的视频，非常感谢您在这个问题上花费的时间。我可以确认使用这里提到的这种方法ably.io/tutorials/… 我已经订阅了频道，但我认为我的 jwplayer 触发器是问题

和 messege.data 在控制台中什么也没有显示

希望这些视频有用:) 我已经回答了你的问题。

【参考方案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 部分，它也会导致意想不到的问题。我很乐意为您提供一些改进建议，请随时向 [e-mail] 发送一封电子邮件，其中包含您的代码以及您想要实现的目标的一些信息，我可以看看。

【讨论】：

非常感谢您，我会尝试您的回答并在此处更新结果，再次感谢您的宝贵时间。你的视频（至少对我来说）不仅仅是技术精湛，它们真的很鼓舞人心，而且很容易理解，所以再次感谢。