Question

我想在我的电影播放器中为我的电影添加字幕。一切都很好，但我不能添加方便的字幕。这是我的网络播放器代码：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#video_player_box{
    width: 550px;
    background: #000;
    margin: 0px auto;
    text-align: center;
}
div#video_controls_bar{ background: #333; padding:10px; color:#CCC; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}
button#playpausebtn{
    background:url(pause.png);
    border:none;
    width:16px;
    height:20px;
    cursor:pointer;
    opacity:0.5;
}
button#playpausebtn:hover{ opacity:1; }
input#seekslider{ width:180px; }
input#volumeslider{ width: 80px;}
input[type='range'] {
    -webkit-appearance: none !important;
    background: #000;
    border:#666 1px solid;
    height:4px;
}
input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    background: #FFF;
    height:15px;
    width:15px;
    border-radius:100%;
    cursor:pointer;
}
body { background-color: black; }
p { background-color: #FFFFFF; }
{color: #FFFFFF;}
.classe1 { background-color: rgb(0, 0, 0)}
body,td,th {
    color: #FFF;
}
.centra{
margin:10px 0px 10px 0px;
text-align:center;
}
</style>
<script>
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.style.background = "sprites/Pause.png";
    } else {
        vid.pause();
        playbtn.style.background = "sprites/Play.png";
    }
}
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();
    }
}
</script>
<meta charset="utf-8">
</head>
<body>
<div id="video_player_box">

  <video id="my_video" width="550" height="310" autoplay>
    <source src="video/Divergent.mp4" type="video/mp4" />
    <track src="video/Divergent.vtt" label="English" </track>
  </video>
  <div id="video_controls_bar">
    <button id="playpausebtn"></button>
    <input id="seekslider" type="range" min="0" max="100" value="0" step="1">
    <span id="curtimetext">00:00</span> / <span id="durtimetext">00:00</span>
    <button id="mutebtn">Mute</button>
    <input id="volumeslider" type="range" min="0" max="100" value="100" step="1">
    <button id="fullscreenbtn">[ &nbsp; ]</button>
  </div>
</body>
</html>

我可以在ps4上播放电影，所以我无法使用闪光灯。

HTML - 带字幕的网络播放器

0 个答案: