I have a website that plays an icecast stream with jPlayer.
I want the play
button to always start the stream from the live position (like a radio) instead of picking the stream back up from the last position. Attempted behavior:
play
plays the stream live > pause
suspends / discards the stream / optionally stops downloading it > play
plays the stream from live position / reloads the stream.
There is a way to monitor the current media position with $.jPlayer.event.timeupdate
as mentioned in comment on this post, and use that to resume playing from the end of the stream.
Alternatively, there must be a way to discard the stream when pausing and then reloading it when hitting play
again. I think it is what is happening on this jPlayer demo. But I don't know how to do that part:
The error event is used with a check for the URL_NOT_SET error type to jPlayer("setMedia",stream) back to the live-stream again and jPlayer("play") it.
I am new to javascript and can't make it work. I can't find another post of someone trying to do that. I tried with the "playhead" at 100 which does not start the stream at all.
Here is the code I am using:
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: "http://realbadradio.ddns.net:21000/mpd.mp3"
})
},
});
});
//]]>
</script>
Here the repo to my website for full code.
I finally found the solution thanks to this answer on a different question related to achieving autoplay in jPlayer.
SOLUTION
$(document).ready(function(){
const stream = {
// stream address
mp3: 'http://realbadradio.ddns.net:21000/mpd.mp3'
};
ready = false;
$("#jquery_jplayer_1").jPlayer({
ready: function () {
ready = true;
$(this).jPlayer("setMedia", stream);
},
pause: function() {
$(this).jPlayer("clearMedia");
},
error: function(event) {
if(ready && event.jPlayer.error.type === $.jPlayer.error.URL_NOT_SET) {
// Setup the media stream again and play it.
$(this).jPlayer("setMedia", stream).jPlayer("play");
}
},
keyEnabled: true,
preload: 'none',
});
});