Question

在我遇到问题之前，我想说这是我第一次尝试使用OOP编写javascript。所以，如果我做错了什么，请耐心指导我。

正如标题所说，我正在使用HTML5视频在我的应用程序中播放视频，这是我写的代码。

我创建了一个对象Screens，我有一个视频标记。

var Screens = {
    getVideoScreen:function(){
        return "<div id=\"celebration\"><video id=\"myvideo1\" width=\"300px\"  ><source src=\"video/winning.mp4\" type=\"video/mp4\"></video></div> "; 
    },
    getVideoElement:function() {
        return $("#celebration");
    }
};

这是我实际控制视频的对象。

var obj = Object.create(Screens);

obj.playVideo = (function() {
    var videoFile = "";
    var play = false;
    function start() {
        $("body").append(obj.getVideoScreen());
        document.getElementById("myvideo1").play();
        document.getElementById("myvideo1").addEventListener("ended",function(){
            end();  console.log("end");
        }, false);
    }
    function end() {
        obj.getVideoElement().remove(); 
    }
    return {
        startVideo:function(flag) {
            play = flag;
            if(play) {
                start();    
            }
            else {
                end();  
            }
        }
    }
})();

我有一个按钮，在click上播放视频，

 $("#start").click(function() {
        obj.playVideo.startVideo(true); 
 });

这适用于大约5到10次，之后就不起作用了。不工作意味着我得到一个白色的屏幕，视频不播放。我检查了页面和视频标签，但没有播放视频。我真的不知道出了什么问题。我看到几个帖子，但没有帮助。期待寻求帮助......

编辑：

我使用的是Chrome版本26.0.1410.64 m。我只关心这个浏览器。

您可以看到this页。

Html5视频只播放了一段时间

0 个答案: