I have a audio tag in my page, I bind an event handle to the ended event:
$('#audio').bind('ended', function() {
console.log('ended');//I can see this
$('#audio')[0].play();// but it could not play again
});
at first I play it:
$('#audio')[0].play()
the problem is, it can be played, and in the play end,I also coulds see the console info, but it can not be play again,how can I solve this problem?
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 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.
When I click the play button, it just goes to the end of the timeline. But if you drag the ticker somewhere in the middle (or anywhere really) it plays the video. So why won't it play initially?
It works in every other browser other than firefox. Im using Firefox 17
I appreciate the help. Thanks.
heres the link
http://www.lonestarveincenter.com/
Sorry for the necromancy but I found the answer to this problem.
The reason why your onClick() event isn't working is because Firefox has it's own onCLick event added to each video element hence whenever you click the video the video starts playing then instantly stops.
function playPause() {
'Before this event is fired the FF onClick event is fired'
player = document.getElementById("PlayerID")
var playBtn = document.getElementById('<%= img.ClientID %>');
if (!player.paused) { 'Player is playing and will go through this code block'
playBtn.setAttribute('Style', 'display: block;');
player.pause();
}
else { 'Player is playing and will skip this code block'
playBtn.setAttribute('Style', 'display: none;');
player.play();
}
}
One very quick test of changing the <source>'s of your video to those on the HTML5 Video site by W3 School's http://www.w3schools.com/html/html5_video.asp shows the desired behaviour: click play and the video starts from the beginning.
I suggest you try re-encoding your video, and testing locally.
How are you encoding at the moment?
I was having the exact same issue. I was using WebM video, and it would play fine - after you picked a spot on the timeline. I converted to .ogv, put it as the first option in the HTML above WebM and mp4, and it is working great in Firefox, and all the other major browsers.
I want to play a mp3 using HTML 5 audio support.
I was trying to use an audio tag but now I am doing it using javascript.
My "Player" will be just a tiny Play image, that when is pressed plays the audio (not all the audio control with progress).
I am trying to play it using javascript .
function playmp3(url){
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', url);
audioElement.load();
audioElement.play();
}
This is my code and it does not work. It executes ok when I click an image that is my Play button.
Url is a string that contains the url of a file.
I am testing in the newest versions of Chrome and FF.
Trying listening for the canplay event before attempting to play the mp3. Here's an example of how to do that:
function playmp3(url){
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', url);
audioElement.load();
audioElement.addEventListener("canplay", function() {
audioElement.play();
});
}
The canplay event is fired when the browser can start playing the mp3, but it doesn't guarantee that it can play the mp3 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.
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.