Plyr: Start HLS buffering when clicking on the play button

[ghost]

Hi , I use HLS inside a Plyr player and I would like to only start buffering the video when the user clicks on the play button ( I have more than 10 players on a page ).
I'm a beginner and I've seen in the documentation that there is a property "playing" that returns a boolean so I tried something but this is obviously not working.

Can someone help me with my code ? It would be much appreciated :)

if(Hls.isSupported()) {
var hls = new Hls({ autoStartLoad: false });
hls.loadSource('https://content.jwplatform.com/manifests/vM7nH0Kl.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
IF BUTTON PLAY >> ( how should I write that ? )
(hls.startLoad(startPosition=-1))
});
}

[friday]

You're on the right track, but you need to load the source in the play event iirc. I'm not at home right now, but I can answer later.

[ghost]

Thanks a lot for your help :D
I'm gonna work on what you said and wait for your answer.

[friday]

This should work (also falls back on native hls if hls.js isn't supported and regular video fallbackUrl if neither are):

var hlsUrl = 'https://content.jwplatform.com/manifests/vM7nH0Kl.m3u8';
var video = document.querySelector('video');
if (Hls.isSupported()) {
    var hls = new Hls({autoStartLoad: false});
    hls.loadSource(hlsUrl);
    hls.attachMedia(video);
} else {
    var nativeHLS = video.canPlayType('application/vnd.apple.mpegurl');
    video.src = nativeHLS ? hlsUrl : fallbackUrl;
}

video.addEventListener('play', function() {
    hls.startLoad();
}, {once: true});

new Plyr(video);

I never needed Hls.Events.MANIFEST_PARSED since this takes milliseconds, and has already happened before users can press play, but if you want to be strict about it you should check this before hls.startLoad();.

[ghost]

This is working ! 👍 I really appreciate the fact that you took the time to help me , thanks :)
I could not have found that by myself.

[friday]

You're welcome :) This is less than obvious imo. Had some trouble with it myself.

[ghost]

It is working on Chrome but not on Safari.

I activated the debugging mode and I got this message in the Javascript console : "logger.js:39[error] > internal error happened while processing hlsManifestLoaded:null is not an object (evaluating 'video.addEventListener')"

Do you have any idea on how to fix this ? Sorry for bothering you ahah

[friday]

Haven't seen that myself. Will try it out later. The code I pasted is slightly simplified from what I actually use.

[ghost]

In case it helps in Chrome I got :

logger.js:39

[error] > internal error happened while processing hlsManifestLoaded:Cannot read property 'addEventListener' of null
func.apply(self.console, args);

I let you try it out later and if you can't managed to get it to work you could just send me a copy paste of your elaborate code that you use. 👍

Thanks again for your help,

[friday]

Just tested, and it works great for me testing in Safari and no errors in Chrome with exactly that code.

https://jsfiddle.net/Larer8ad/

If you need help debugging your code this is not the place.

[ghost]

Oh that's great.
Sorry , I thought it was the addeventlistener fault because it said that in the console.

[ghost]

I'm sorry but I really think that there is an issue somewhere and it's not because of my code.
I resolved the javascript error in the console and I realized that the HLS stream will only start playing when I put it directly on the page and that it will only load and not play when it's in a Jquery lightbox.

If you want I can pay you to try to resolve my problem because I don't want to bother you.

Check this page on Chrome (https://remsfilm.com/test2.html) and it will work as expected.
Check it on Safari and the video will only load and not play. (https://remsfilm.com/test2.html)

[friday]

I appreciate your attitude, but it's ultimately very time consuming to debug someone elses website, so maybe you can fork https://jsfiddle.net/Larer8ad/ and replicate your issue on jsfiddle. If it turns out to be a Plyr issue I'll reopen this.

[friday]

And of course if you try to remove the new Plyr() part and the problem persists it's not a Plyr issue.

[ghost]

It may seems dumb but I didn't try this.
I just removed the

new Plyr()

from my code and the problem is still there so this is definitely not a Plyr issue and you can keep this issue closed.

Thanks :)

[friday]

Good luck!