javascript - 如何在html中控制视频何时结束

Question

我按照一些教程制作了一个视频播放器，我想控制视频结束时发生的情况。
我希望它显示 2 个视频缩略图。一旦您单击其中之一，它将异步加载(无需刷新页面)并开始自行播放。

我该如何继续做到这一点？

这是我的代码:

CSS

div#video_player_box{ width:550px; background:#000; margin:0px auto;}
div#video_controls_bar{ background: #333; padding:10px; color:#CCC;}
input#seekslider{ width:180px; }
input#volumeslider{ width: 80px;}

JavaScript

var vid, playbtn, seekslider, curtimetext, durtimetext, mutebtn, volumeslider, fullscreenbtn;

function intializePlayer() {
    // Set object references
    vid = document.getElementById("my_video");
    playbtn = document.getElementById("playpausebtn");
    seekslider = document.getElementById("seekslider");
    curtimetext = document.getElementById("curtimetext");
    durtimetext = document.getElementById("durtimetext");
    mutebtn = document.getElementById("mutebtn");
    volumeslider = document.getElementById("volumeslider");
    fullscreenbtn = document.getElementById("fullscreenbtn");
    // Add event listeners
    playbtn.addEventListener("click", playPause, false);
    seekslider.addEventListener("change", vidSeek, false);
    vid.addEventListener("timeupdate", seektimeupdate, false);
    mutebtn.addEventListener("click", vidmute, false);
    volumeslider.addEventListener("change", setvolume, false);
    fullscreenbtn.addEventListener("click", toggleFullScreen, false);
}
window.onload = intializePlayer;

function playPause() {
    if (vid.paused) {
        vid.play();
        playbtn.innerHTML = "Pause";
    } else {
        vid.pause();
        playbtn.innerHTML = "Play";
    }
}

function vidSeek() {
    var seekto = vid.duration * (seekslider.value / 100);
    vid.currentTime = seekto;
}

function seektimeupdate() {
    var nt = vid.currentTime * (100 / vid.duration);
    seekslider.value = nt;
    var curmins = Math.floor(vid.currentTime / 60);
    var cursecs = Math.floor(vid.currentTime - curmins * 60);
    var durmins = Math.floor(vid.duration / 60);
    var dursecs = Math.floor(vid.duration - durmins * 60);
    if (cursecs < 10) {
        cursecs = "0" + cursecs;
    }
    if (dursecs < 10) {
        dursecs = "0" + dursecs;
    }
    if (curmins < 10) {
        curmins = "0" + curmins;
    }
    if (durmins < 10) {
        durmins = "0" + durmins;
    }
    curtimetext.innerHTML = curmins + ":" + cursecs;
    durtimetext.innerHTML = durmins + ":" + dursecs;
}

function vidmute() {
    if (vid.muted) {
        vid.muted = false;
        mutebtn.innerHTML = "Mute";
    } else {
        vid.muted = true;
        mutebtn.innerHTML = "Unmute";
    }
}

function setvolume() {
    vid.volume = volumeslider.value / 100;
}

function toggleFullScreen() {
    if (vid.requestFullScreen) {
        vid.requestFullScreen();
    } else if (vid.webkitRequestFullScreen) {
        vid.webkitRequestFullScreen();
    } else if (vid.mozRequestFullScreen) {
        vid.mozRequestFullScreen();
    }
}

Answer 1

请查看视频标签的“结束”事件。我不会给你写完整的代码，但我会告诉你大致的过程:

function showVideoSelector() {
    /*You must create a DOM for the menu, put it above the video or wherever, 
    and add some nice animations etc. :)
    Use the following functions to load and play 
    the selected video in the onclick event for your new menu.
    change someElement to something better... */
    ...
    someElement.onclick = function () {
        vid.src = "newVideo";
        vid.load();
        vid.play();
    }
}

vid.addEventListener("ended",showVideoSelector,false); // This is the important part