0

在我讨论这个问题之前，我想说这是我第一次尝试使用 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。我只关心这个浏览器。

你可以看到这个页面。

4

0 回答 0