Ably Subscribe and detecting jwplayer play status

Question

Last time that I asked question here I acted like a prime noob and I hope this time I am a bit more on track and clear on my problem.

So my issue: I have this player built in a PHP file and I call it via iframe to other pages for playing a video live-stream. the player uses jwplayer and I want to use ably library to monitor the number of times that the player is in playing state and I want each player to subscribe to the channel while playing.

this is my script to initiate and subscribe to 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 I should state that although I can find my way around a project I am still new to programming and in this case, everything else works, and only the ably feature is not working.

I appreciate any input and i like to thank you for your time in advance.

edit: this is an example that I am trying to follow : link

edit: with the help of Ms.Srushtika Neelakantam the ably connection and subscription works great, now I have to modify it for the jwplayer status change.

edit: this code seems to work just fine for now:

<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: but then my Project manager wanted it to distinguish between pause and play state of the video so I changed the code like this so it would check every 5 seconds if the video is playing or not and if not it unsubscribes from the channel, the important thing is, for that we need channel.detach(); and it won't unsubscribe automatically (as far as I know )

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

As mentioned in the comments, I'm a Dev Advocate for Ably.

It seems there are a bunch of things happening in your code. First of all, it looks like you are using the require keyword in a front-end script. Please note that to use Ably on a browser client, you can simply add Ably as a CDN script and start using it straight away in your script. I've made some changes as shown below and tested it out. I can confirm it's working as expected.

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

Note that I've removed the jwplayer stuff for the avoidance of doubt as to which service was causing the issue.

I haven't used jwplayer myself but what I can tell from their docs is that they don't have a method called onPlay() but an event trigger for the play event. See https://developer.jwplayer.com/jwplayer/docs/jw8-javascript-api-reference#section-jwplayer-on-play, so essentially jwplayer().on('play') - worth checking it out and correcting it.

It also looks like you have a bunch of nested async callback methods, I'm pretty sure it'll cause unexpected issues even after you fix the Ably part. I'm happy to help you out with some suggestions to improve this, feel free to send an email with your code and some info on what you are trying to achieve to support@ably.io and I can take a look.