当我以编程方式启动HTML5视频时，如何避免杀死它上的本机控件？

Question

好了，我已经开始制作一个小的视频播放器了，它的工作原理是点击一个有图像的div，展开div和图像，然后用一个html5-video标签交换图像。代码如下所示。

(它还很早，所以我知道有很多地方需要改进，比如不使用javascript来设置样式等等，但尽管如此，除了主要问题的答案之外，欢迎任何建议和技巧)

/*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();


        })

    })



});

然而，主要的问题是，当我像这样触发视频(video.play())时，本机控件停止工作，我不能再暂停视频，即使控件在那里，并且可点击，当我试图暂停视频时，视频只是立即开始播放。

这是一种遗憾，因为为了简单起见，我想使用本机控件。

Answer 1

我刚刚发现我可以用jquery设置“自动播放”-attriubute，看起来效果很好。我们仍然欢迎任何其他的建议。