How do I avoid killing the native controls on a html5-video when i've started it programmaticly?
- by Nils
OK, so the deal is I've started making a little videoplayer, that works by clicking a div with an image, expanding the div and the image, and then exchanges the image with a html5-videotag. the code is as below.
(It's very early on, so i know theres a lot that need improving, as in not using javascript to set styles and so on, but nevertheless, any insigts and tips are welcome, besides the answer to the main question)
/*Begin Expander*/
var $videoplayer = $('<video width="640" height="360" preload="none" controls="" tabindex="0" style="position: relative;"><source type="video/mp4" src="/restalive/movies/big_buck_bunny.mp4"></source><source type="video/ogg" src="/restalive/movies/big_buck_bunny.ogv"></source></video>').appendTo('body');
$videoplayer.hide();
$(".ExpandVideo").each(function(i){
var $trigger = $(this);
var $image = $trigger.find("img");
$image.css({
"width" : "100%"
,"height" : "auto"
})
$trigger.css({
"display" : "block"
,"overflow" : "hidden"
,"width" : "200px"
,"float" : "left"
});
$trigger.bind("click", function(e){
$trigger.animate({"width" : "640px"}, "fast", function(){
$image.replaceWith($videoplayer);
$videoplayer.show();
$videoplayer.attr("id", "video" + i);
var video = document.getElementById("video" + i);
video.play();
})
})
});
However, the main problem is that when i've fired of the video like this (video.play()), the native controls stop working, i can no longer pause the video, even though the controls are there, and clickable, the video just starts playing immidiatley again when i trie to pause it.
Which is a shame, because i want to use the native controls for simplicity.
