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.
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 written a project using youtube player with IFrame API.
Until now it was working well but today it stopped firing onStateChange events.
I googled for that and saw that its reported alot in the last day.
One solution that is suggested is to add to playerVars option the item - html:1 so youtube player will be an html5 and not Flash.
But even when i add it, its not working.
Besides in youtube player parameters there is no parameter - html:1.
https://developers.google.com/youtube/player_parameters
Since its not supposed to happen on Html5 player as it is said here:
YouTube iFrame API 'onStateChange' not firing in Firefox
Then how i make youtube player be an html5 on my project which is what i prefer anyway ?
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
playerVars: {rel:0, html5: 1 },
events: {
'onReady': onPlayerReady,
'onStateChange':onPlayerStateChange
}
});
}
As it seems pyqt4 doesnt support html5 video.
I tried to load this site htmlTest with pyqt4 built in browser.
QWebView().setUrl(QUrl('http://html5test.com/'))
The results were that the browser running with pyqt4 is not supporting html5 video.
Probably i need a higher version of pyqt.
As for onStateChange events not firing ... it was probably a temporary bug with flash player or something like that and it was fixed alone.
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.
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?
When using HTML5 video, is it possible to have a constantly running script while the video is playing (but only when its playing)?
For example:
video.onplaying = function(e){
alert("playing");
}
video.bind("ended", function(){
alert('Video Ended');
});
These are examples I found and tried to incorporate into my player with little success.
When video starts call setInterval() to start your background task and give it the repeat frequency.
Do tasks in this function.
When video stops call clearInterval().
https://developer.mozilla.org/en/window.setInterval