Как проверить, выполнено ли видео?

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 объекта, и я хочу, чтобы быть в состоянии обнаружить, если видео закончилось в моем main объекта.

Возможно ли это?

Answer 1

Вы можете иметь несколько eventListeners на объекты DOM ...

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.

Кроме того, это приводит к созданию пользовательских систем событий - Publisher/Subscriber или Observer или «Emitters».
Если вы можете реализовать один из них, на объекте, то ваш объект может создавать/запускать пользовательские события и передавать пользовательские данные, и в любое время, когда у вас есть доступ к этому объекту, вы можете подписаться (если вы знаете, что события называются и как обрабатывать данные, которые вы получите).

Например, вы можете захотеть иметь систему воспроизведения видео, которая загружает следующий фильм (или экран обратного отсчета до следующего фильма и т. Д. Для непрерывного воспроизведения с помощью списка воспроизведения, который выделяет текущую пленку).

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 по сравнению с другими языками).

Но, как вы можете видеть, с небольшим размышлением, это действительно простой и универсальный способ отправки кода.

Answer 2

Вы можете использовать завершенный флаг в объекте 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') 
    } 
}