开发者

How do I avoid killing the native controls on a html5-video when i've started it programmatically?

OK, so the deal is I've started making a little video player, that works by clicking a div with an image, expanding the div and the image, and then exchanges the image with a html5-video tag. the code is as below.

(It's very early on, so i know there's 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){

     开发者_如何学C   $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 immediatley again when i tried to pause it.

Which is a shame, because i want to use the native controls for simplicity.


Just figured out i can set the "autoplay"-attriubute with jquery, that seems to work fine. Any other suggestions are still welcome.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜