setSrc() strange behaviour #1914
Comments
|
Can you provide a URL where you show this issue, please? The only way I knew to stop an audio streaming on html5 is by setting the source empty and then destroying the audio tag |
|
You could look here: https://thgfm.de/socialradio/ |
|
@NitroxydeX Ok I'll check this and let you know my findings. Thanks |
|
@NitroxydeX Can you test the Use also the following code as a replacement $(window).load(function() {
var
target = $('#player2').closest('.mejs-container'),
playerId = target.attr('id'),
player = mejs.players[playerId],
button = target.find('.mejs-playpause-button'),
i = Math.floor( ( Math.random() * 1000000 ) + 1),
source = '[YOUR SOURCE]'
;
button.on('click', function(e) {
if (player.media.paused) {
console.log('PAUSED');
player.setSrc('');
player.load();
player.pause();
} else {
console.log('RESTORED');
i++;
player.setSrc(source + '?nocache=' + i);
player.load();
player.play();
}
return false;
});
});Let me know if it worked for you. Thanks |
|
Well it's not working in general now... The 3.x branch is also missing silverlight. Is this correct? Console also said that the code is wrong. Doesn't work like this in jQuery 3 anymore. Changed back to jQuery 2 still not working. Changed the target div-id from #player2 to #audio-player but same result. It doesn't start. Take a look here: https://thgfm.de/test |
|
Silverlight is now deprecated. I'll take a look on your code |
|
@NitroxydeX I know why it has to do with the src being in the audio tag and not in the source tag. I'm gonna check this but test your code with something like this and it should work <audio autoplay>
<source src="http://thgfm.de:8000/dsl;" type="audio/mp3">
</audio> |
|
@NitroxydeX Please download the latest version; it has the fix for this situation. Thanks for pointing it out |
|
Yeah, thats working now. We're getting closer to a solution. It removes the Audio src now on "pause" but it seems that it doesn't load with the empty source. If you hit play again it starts playing but not the live feed instead it takes the buffered feed that still got saved and no new src is set. |
|
Gotcha checking it right now |
|
@NitroxydeX After a lot of research I think I finally figured out. Download the latest version and use this code to stop/resume the streaming: $(window).load(function() {
var
target = $('#player2').closest('.mejs-container'),
playerId = target.attr('id'),
player = mejs.players[playerId],
button = target.find('.mejs-playpause-button'),
i = Math.floor( ( Math.random() * 1000000 ) + 1),
source = 'http://thgfm.de:8000/dsl;',
first = true;
;
button.on('click', function(e) {
if (player.media.readyState > 0) {
player.pause();
player.setSrc('');
player.load();
button.removeClass('mejs-play').addClass('mejs-pause');
first = false;
} else {
i++;
player.setSrc(source + '?nocache=' + i);
player.load();
player.play();
button.removeClass('mejs-pause').addClass('mejs-play');
}
return false;
});Let me know if it works for you |
|
If this works as you expected, I'll modify the current |
|
difficult to test. every classes have wrong names in the latest release. So instead of 'mejs-container' it's 'mejs__container'. I think this is a fail. |
|
no it's a new element in the 3.0 version using BEM naming convention. My bad I merged today and I forgot to update the code above |
$(window).load(function() {
var
target = $('#player2').closest('.mejs__container'),
playerId = target.attr('id'),
player = mejs.players[playerId],
button = target.find('.mejs__playpause-button'),
i = Math.floor( ( Math.random() * 1000000 ) + 1),
source = 'http://thgfm.de:8000/dsl;',
first = true;
;
button.on('click', function(e) {
if (player.media.readyState > 0) {
player.pause();
player.setSrc('');
player.load();
button.removeClass('mejs__play').addClass('mejs__pause');
first = false;
} else {
i++;
player.setSrc(source + '?nocache=' + i);
player.load();
player.play();
button.removeClass('mejs__pause').addClass('mejs__play');
}
return false;
}); |
|
ah well okay. I need to update my whole CSS as well then. will come back if i did this. |
|
FYI, I just posted the updated code hope it helps |
|
well. clicked on my empty page to hit that play/pause button. it seems that it is working now like it should. will come back again when i redid the css stuff. |
|
perfect. Keep me posted. Thanks |
|
Well yeah, it's working now. Updated your code. Was the wrong order of removing and adding classes and you were missing closing }); $(window).load(function() {
var
target = $('#audio-player').closest('.mejs__container'),
playerId = target.attr('id'),
player = mejs.players[playerId],
button = target.find('.mejs__playpause-button'),
i = Math.floor( ( Math.random() * 1000000 ) + 1),
source = 'http://thgfm.de:8000/dsl;',
;
button.on('click', function(e) {
if (player.media.readyState > 0) {
player.pause();
player.setSrc('');
player.load();
button.removeClass('mejs__pause').addClass('mejs__play');
} else {
i++;
player.setSrc(source + '?nocache=' + i);
player.load();
player.play();
button.removeClass('mejs__play').addClass('mejs__pause');
}
return false;
});
}); |
|
but what is this "first" thing for? |
|
What first thing? |
|
I'm glad is working for you. Can this ticket be closed? |
|
this: 'first = true;' as a variable. you added it but what it does? |
|
Oh, that's a typo from old code I was testing. You can safely ignore that and remove it. My apologies |
|
Ah well okay ^^ |
|
@NitroxydeX Thanks for your help on this one. I'll go and close #613 as well |
|
@NitroxydeX Just FYI we reverted the change with the BEM naming convention so keep that in mind when you download the latest version of the player. Use the class names you used before. Sorry for the inconveniences |
|
.... well okay :D |
window.onload = function() { myaudio = document.getElementById('audio-player'); button = $('.mejs-playpause-button'); i = Math.floor( ( Math.random() * 1000000 ) + 1); source = 'http://stream.url:PORT;'; playpause = document.querySelector('.mejs-playpause-button'); playpause.addEventListener('click', function() { if (myaudio.paused) { myaudio.setSrc(''); myaudio.load(); myaudio.pause(); button.removeClass('mejs-pause').addClass('mejs-play'); } else { i++; myaudio.setSrc(source + '?nocache=' + i); myaudio.load(); myaudio.play(); button.removeClass('mejs-play').addClass('mejs-pause'); } }); };I noticed some strange behavior across all browsers. The Code shows my way I tricked the audio player to force a STOP - since HTML5 audio isn't able to do this. What do I need this for? Audio-Livestreams. Otherwise the Browser would save all Audio into the RAM, which is bad and not live anymore. lul.
But this isn't working anymore (last time it worked was 4 months ago). It just can't set the src on the audio tag - it stays empty after clearing it with the pause button.
But if I change
if (myaudio.paused) { myaudio.setSrc('');toif (myaudio.paused) {i++; myaudio.setSrc(source + '?nocache=' + i);it changes the URL again in my else part. This is really weird. Hope I just do bad things now that it's not working...The text was updated successfully, but these errors were encountered: