Question

我想检测是否调用了对象的方法。

我的页面中有一个视频播放器，播放完毕后，我想显示一些内容。

例如：

function videoSet(){
    var instance = this;
    this.video   = $('#video')
    this.video.bind("ended", function() {
        instance.endVideo()
    });
}

videoSet.prototype.endVideo = function(){
    $('#test1').css('visibility','visible');
}

//more methods...        

function main(){
    this.init();
}

main.prototype.init = function(){
    this.video = new videoSet() //init an video object.
    // more code...
    //I need to know if the video is ended...
}

var mainObj = new main();

在我的endVideo方法中，我有$('#test1').css('visibility','visible');，但我的main对象中有很多代码，我希望能够检测到视频是否已在{{1}中结束1}}对象。

这可能吗？

Answer 1

您可以在videoSet对象中使用结束标志，例如

function videoSet() {
    var instance = this;
    this.ended=false;
    this.video = $('#video')
    this.video.bind("ended", function () {
        instance.endVideo()
    });
}

videoSet.prototype.endVideo = function () {
    $('#test1').css('visibility', 'visible');
    this.ended=true;
}
videoSet.prototype.isEnded = function () {
    return this.ended;
}

//more methods...        

function main() {
    this.init();
    //later
    if(myVideoSet.isEnded()){
        console.log('completed')
    }
}

Answer 2

您可以在DOM对象上拥有多个eventListener ...

var Video = function () { this.video = document.querySelector("#my-video"); };

var Main = function () {
    var myVideo = new Video();

    myVideo.video.addEventListener("ended", function () { console.log("It's over!"); });

    myVideo.video.addEventListener("ended", function () {
        console.log("Play something else.");
    });
};

Main();

没有什么可以阻止你从main内部向对象添加事件监听器。

此外，这会导致自定义事件系统 - 发布者/订阅者或观察者或“发射者” 如果您可以在一个对象上实现其中一个，那么您的对象可以创建/触发自定义事件，并传递自定义数据，并且只要您有权访问该对象，就可以订阅（只要您知道这些事件是什么调用，以及如何处理你将得到的数据。）

例如，您可能希望有一个视频播放系统加载下一部电影（或倒计时屏幕，直到下一部电影，等等，连续播放，播放列表突出显示当前电影）。 / p>

var VideoPlayer = function (id) {
    var player = this;
    player.video = document.getElementById(id);
    // attach an emitter-system with "on", "off" and "emit", or whatever you choose
    addEmitter(player);
    player.load = function (video) { player.video.src = video.src; };

    player.init = function () {
        player.video.addEventListener("ended", function () {
            // fire custom-event
            player.emit("video-ended");
        });
        player.video.addEventListener("canplay", function () {
            // auto-play video, fire event
            player.video.play();
            player.emit("video-playing");
        });
    };
},


VideoPlaylist = function (id, videos) {
    var playlist = this;
    playlist.root = document.getElementById(id);
    playlist.videos = videos;
    playlist.addVideo = function (video) { /* attach each video to the root */ };
    playlist.currentVideoIndex = 0;
    playlist.currentVideo = playlist.videos[playlist.currentVideoIndex];
    playlist.select = function (i) {
        playlist.currentVideoIndex = i;
        playlist.currentVideo = playlist.videos[i];

        // fire a custom event
        playlist.emit("load-video", playlist.currentVideo);
    };
    playlist.nextVideo = function () {
        var i = (playlist.currentVideoIndex + 1) % playlist.videos.length; // loops
        playlist.select(i);
    };
    addEmitter(playlist);
};


var Main = function () {
    var video_player   = new VideoPlayer("my-player"),
        video_playlist = new VideoPlaylist("my-playlist", [{ src : "...", title : "A" }, { src : "...", title : "B" }]);

    video_player.on("video-ended",  video_playlist.next);
    video_playlist.on("load-video", video_player.load  );

    // add another listener for another component, to handle on-screen controls
    video_player.on("video-playing", video_controller.show_playing);


    // add another listener for another component, to display the data about the video
    video_playlist.on("load-video", video_description.display);
    // add another listener for another component to load comments
    video_playlist.on("load-video", video_comments.load);
};

Main();

这不是一种特别类似于Java的编写程序的方式，但JavaScript并不是特别类似Java（尽管你可以使它看起来很相似）。

你会注意到Main函数内部所有我正在做的是将行为连接在一起，而不是写出自定义逻辑。

当然，你可以采取这种方式......

......我没有告诉你我的发射器是如何制造的，但它们也不难制作发布者/订阅者或观察者或发明者实现是JS的优秀实践（与其他语言相比，JS非常容易）。

但正如您所看到的，通过一点思考，这是一种非常简单且通用的调度代码方式。

如何检查视频是否播放完毕

2 个答案: