I stream webradio mpeg with MediaElement.js via shoutcast and it works. but when i click the stop button, the player stops not really, but it buffers the music. How can I stop the player permanently? can someone help me?
Browsers manage media buffering differently so it's very hard to stop buffering consistently.
Apart from setting preload="none" in your video/audio tag(s), a trick that would work in most browsers is to (re)load the media if this is stopped.
You could add an event listener and trigger the media reload if stopped (MEJS only includes the pause event, which seamlessly work) like :
$("audio").mediaelementplayer({
success: function (mediaElement, domObject) {
mediaElement.addEventListener('pause', function (e) {
mediaElement.load();
}, false);
}
});
See JSFIDDLE
Note: this is a workaround that may not work in all browsers.
Related
Occassionally* our web app host is slow (not sure why yet) and short video clips in our web app do not play.
Is there some dependable "video started " or "video finished" event that fires in Chrome and Safari (current versions) ?
We don't know how frequent "occassionally" is (hence this question :) )
This reference: http://www.w3schools.com/tags/ref_av_dom.asp contains all HTML5 audio/video properties, methods, and events.
I have recently implemented an audio recorder and playback using the html5 audio tag and both the play & ended events always fired (on all ie, safari, firefox, & chrome...we don't support opera so I didn't test it).
In your case, if the play event triggers at least once, and the ended event triggers, I would say this is conclusive that the video played through.
If one or both of those events don't trigger, then I would suggest looking into some of the other properties of the audio/video element (ie. readyState, or canPlayThrough) to confirm the media source is available.
For more detailed debugging, I suggest the following console.log debugging so you know all events that are occurring. This example is using jQuery, but can easily be implemented without:
var video = $("#player video")[0];
$(video)
.bind('loadstart', function() {
console.log("Loadstart");
if(video.networkState === 3){
console.log("Error loading file");
}
}) .bind('loadedmetadata', function() {
console.log('loadedMetaData');
})
.bind('stalled', function (){
console.log('stalled');
})
.bind('suspend', function(){
console.log('suspend');
).
.bind('canplaythrough', function() {
console.log('canplaythrough');
})
.bind('play', function() {
console.log('play');
})
.bind('pause', function() {
console.log('pause');
})
.bind('ended', function() {
console.log('ended');
});
While the above code won't solve the problem for you, it may expose events in your video player you weren't aware fired. I noticed safari will fire stalled, suspend events more than other browsers will. While it makes sense to include the 'error' event, I never saw it fire myself....YMMV -- Couldn't hurt to include it.
Good luck.
I have a video embedded on a website and I'm getting some odd behavior in Firefox.
Every time I change the playback position by clicking on the time slider, the pause event is fired. Similarly, every time the video ends the pause event is fired, even before the ended event.
I was first wondering if I had an error in some JS I had written (to make the video bigger on playback, and then shrink it on pause - code here). However, I tested with just this simple code and the behavior still exists -
$(document).ready(function(){
video = $('#intro-video');
video.on('pause', function(){
alert('pause');
});
});
This doesn't happen in other browsers, and it is very undesirable behavior for Firefox. Is there a way to prevent this from happening? Thanks,
Note
If anyone is interested, here is the link to Pastebin containing my code, but after testing with the above I'm pretty sure this is not the issue.
Update
I have found this thread which suggests the behavior described about is actually by design, but I find that hard to believe. The author says that IE, Opera and Safari get it wrong while Firefox gets it right, but surely that's not correct...
I have been working on monitoring events for HTML5 video/audio and from time to time I find something that you described: it is not consistent across browsers and given the same browser it can vary between versions. I would suggest you stick to the specs in this case:
ended event: it should fire a pause event right before the ended event (given you have no current media controller ie multiple sync media players). Here Firefox does it as expected.
seeking: it should not fire a pause event. There is no mention of that in the specs. Here Firefox seems to drop the ball. However if the video is paused in FF and you seek then the pause event is not fired.
Amongst IE 11, FF 28 and Chrome 34 I found that only Chrome does fit the specs to the letter for this question on both events.
You could consider asking Mozilla why is such a behavior implemented?
If you want to bypass this behavior (do not know how to call it) you need to build you own custom controls in JS. The code below illustrates that the pause event does not fire if you programmatically seek to a point in time of the video (the #seekBar div):
<video id="intro-video" width="640" height="360" controls>
<source src="../media/360p.mp4" type='video/mp4' />
</video>
<div id="seekBar">Seek +5sec</div>
<script type="text/javascript">
$(document).ready(function(){
video = $('#intro-video');
videoJ = $('#intro-video')[0];
video.on('pause', function(){
console.log('pause');
});
video.on('play', function(){
console.log('play');
});
video.on('ended', function(event){
console.log('ended');
});
video.on('seeking', function(){
console.log('seeking');
});
video.on('seeked', function(){
console.log('seeked');
});
$('#seekBar').on('click',function(){
var currentT = videoJ.currentTime;
videoJ.currentTime = currentT + 5;//on click seek forward + 5 sec
});
});
</script>
You can have a look here to start building your own controls.
Maybe a lib like videojs can fix it for you (not tested on this chain of events)
I was able to work around this issue on Firefox by adding a timeout and checking if the video is paused inside the timeout. Only when the video.paused returns true, I execute my code:
const showOverlay = video => video.closest('.jsvideo').classList.remove('is--playing');
$$('.js-video video', video => {
video.addEventListener('pause', () => {
if (video.readyState !== 4) {
return true;
}
// Firefox dispatches the pause event but
// doesn't set the video to paused
setTimeout(() => {
if (video.paused) {
showOverlay();
}
}, 250);
});
video.addEventListener('ended', showOverlay);
});
The $$ functions is just a helper function which queries the DOM.
I used a 250ms timeout but I think it can be significantly reduced (even to zero) because the check will be executed after the pause event is triggered.
The actual UX is left untouched because the timeout is unnoticeable and doesn't affect the speed of the UI updates.
HTML5 how to check if user has viewed the entire video? ie, without skipping through. It is straightforward on desktop based browsers, though iOS allows playback control even when you do not explicitly enable it. Therefore, simply listening to the 'ended' event is not accurate.
Try this in iOS. I can only test in Chrome and Firefox:
Use the seeked event
vid.addEventListener("seeked", function() {
}, false);
Additionally, if you only want to detect the user seeking forward, keep track of the playback position by listening to the timeupdate event and reading the currentTime property.
See this JSFiddle
I have the following HTML and JS:
<script>
function onEnded(ev) {
window.location.reload();
}
</script>
<audio id="audio-element" controls autoplay onended="onEnded();">
<source src="/stream/3" type="audio/mp3" />
</audio>
For some MP3 streams, this works perfectly; playback starts and when the audio track ends onEnded is called. For others, playback starts fine and the audio file is played, but then right at the end the elapsed time counter goes extremely negative, the ended event never fires and audio_element.ended returns false. Here's a screenshot:
This happens in Chrome, but not Safari or Firefox, which behave as expected. Any idea what I can do in Chrome to make the ended event fire?
you must be sure that your server accept range transfer, otherwise chrome will not be able to evalutate time correctly and so 'ended' event will not fire.
you can check this by doing:
curl --head -X GET http://yourmp3location
if you see:
Accept-Ranges: bytes
then is ok, otherwise fix your server
In addition, Have you tried this?
<audio id="audio-element" controls autoplay onended="onEnded">
I had changed the onended attribute so that the browser don't evalutate onended function while rendering your page.
You can also remove the onended attribute to the tag audio and add this at the bottom of your page:
<script type="text/javascript">
document.getElementById("audio-element").addEventListener('ended', function(ev) {
window.location.reload();
}, false);
</script>
We had a very similar problem with Chrome - this browser doesn't emit onended events in new Chrome 64 (and beta 65, canary 66) but when we rebuild MP3 with stream this problem disappeared.
I had a similar problem when attempting to handle audio ending on mobile Chrome:
When I created an audio element via javascript (via GWT), the onended event would never fire for me. I was able to get working however: my issue was that it was not attached to the DOM (if I'm understanding the structure correctly), but was floating in javascript limbo. Once I set the element to display: none and added it to a page element, my onended handler works correctly.
tl;dr
if your element isn't directly attached to a DOM element, try hiding it and attaching it (anywhere really).
I have a fully functional HTML5 video, it's ID is "#html5-video-7345".
I'm trying to control it using jQuery but I don't know how.
NOTE: I don't need an autoplay, this is just simplified version of what I need:
jQuery(document).ready(function(){
alert('test1');
jQuery('#html5-video-7345').player.play();
alert('test2');
});
Alerts "test1" twice.
The same happens with jQuery('#html5-video-7345')[0].player.play() or jQuery('#html5-video-7345')[0].play().
What's wrong? How to stop() / play() HTML5 videos using jQuery/JS?
I wasn't able to find videojs function reference and Google was totally misleading. Luckily I found this solution, and it works perfect:
jQuery('#html5-video-7345').player.play(); //wrong
jQuery('#html5-video-7345').player().play(); //correct
Make sure the canplay event has fired before trying to calling .play():
jQuery('#html5-video-7345').bind("canplay", function() {
this.play(); // Should start video
});
The canplay event is fired when the browser can start playing the video, but it doesn't guarantee that it can play the video to completion. If that doesn't suite your purposes, there are a couple of other related events that you can listen to such as loadeddata and canplaythrough.