如何檢查視頻是否播放完畢

我有一個視頻播放器在我的頁面，當它完成播放時，我想顯示一些內容。

例如：

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對象已經結束。

這可能嗎？

來源

2014-01-29 FlyingCat

你可以有多個事件監聽器的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內部的對象。

此外，這導致自定義事件系統 - 發佈者/訂戶或觀察者或「發射器」。
如果你可以在一個對象上實現其中的一個，那麼你的對象可以創建/觸發自定義事件，並傳遞自定義數據，並且任何時候你有權訪問該對象，你都可以訂閱（只要你知道什麼事件被調用，以及如何處理你將返回的數據）。例如，您可能希望有一個視頻播放系統加載下一部電影（或倒計時屏幕，直到下一部電影等等才能進行連續播放，並帶有突出顯示當前電影的播放列表）。

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函數中，我所做的只是將行爲連接在一起，而不是寫出自定義邏輯。

當然，你也可以採取這種方式進一步...

...我還沒有表現出你我的發射器是怎麼做的，但他們不是很難做出，無論是。
發佈者/訂閱者或Observer或Emitter實現是JS的偉大實踐（與其他語言相比，JS非常容易）。

但正如你所看到的，有一點思考，這是一個非常簡單和多功能的調度代碼的方式。

來源

2014-01-29 02:06:51 Norguard

可以在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') 
    } 
}

來源

2014-01-29 02:02:40

如何檢查視頻是否播放完畢

回答

相關問題