Question

我正在试图获得一个倒带功能（回到开始）和一个快进功能，但我似乎无法使倒带功能起作用，我不知道为什么，也许我错过了什么？

JavaScript代码：

var vid, playbtn, seekslider, currentTimeTxt, durationTimeTxt, mutebtn, volumeslider, playbackSpeed, speedBack;
function intializePlayer(){
// Set object references
    vid = document.getElementById("my_video");
    playbtn = document.getElementById("playpausebtn"); //element to get an id
    seekslider = document.getElementById("seekslider");
    currentTimeTxt = document.getElementById("currentTimeTxt");
    durationTimeTxt = document.getElementById("durationTimeTxt");
    mutebtn = document.getElementById("mutebtn");
    volumeslider = document.getElementById("volumeslider");
    playbackSpeed = document.getElementById("chosenSpeed");
    speedBack = document.getElementById("rewind");
    // Add event listeners
    playbtn.addEventListener("click",playPause); // 
    seekslider.addEventListener("change",vidSeek); // ("". function called)
    vid.addEventListener("timeupdate",seektimeupdate);
    mutebtn.addEventListener("click",vidmute);
    volumeslider.addEventListener("change",setvolume);
    playbackSpeed.addEventListener("change", chosenSpeed);
    speedBack.addEventListener("click", rewind);
}
window.onload = intializePlayer; // window.onload means that anything in between the curly brackets will run when the entire has loaded, including images, etc.
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 currentMinutes = Math.floor(vid.currentTime / 60);
    var currentSeconds = Math.floor(vid.currentTime - currentMinutes * 60);
    var durationMinutes = Math.floor(vid.duration / 60); // math.floor for rounding the numbers
    var durationSeconds = Math.round(vid.duration - durationMinutes * 60); //Math.round for a more precise rounding no. (test)
    if(currentSeconds < 10){ currentSeconds = "0"+currentSeconds; }
    if(durationSeconds < 10){ durationSeconds = "0"+durationSeconds; } 
    if(currentMinutes < 10){ currentMinutes = "0"+currentMinutes; } // calculates the current time of video
    if(durationMinutes < 10){ durationMinutes = "0"+durationMinutes; }
    currentTimeTxt.innerHTML = currentMinutes+":"+currentSeconds; //currentMinutes / currentSeconds = current mins / seconds
    durationTimeTxt.innerHTML = durationMinutes+":"+durationSeconds; //durationMinutes / durationSeconds = duration minutes / seconds 
}
function vidmute(){
    if(vid.muted){
        vid.muted = false;
        mutebtn.innerHTML = "Mute";
        volumeslider.value=vid.volume * 100;
    } else {
        vid.muted = true;
        mutebtn.innerHTML = "Unmute";
        volumeslider.value=0;
    }
}
function setvolume(){
    vid.volume = volumeslider.value / 100;
}
function chosenSpeed(){
    vid.playbackRate = (playbackSpeed.value); // uses the identifier for the playbackrate and connects value
}

function rewind() {
    speedBack.currentTime= 0;
}

HTML

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>Training Videos</title>
<script src="Scripts/videoScript.js"></script> <!-- calling script file -->
</head>
<body>
    <header><h1>Westin Tan, 21st November</h1></header>
<div id="video_player_box"> 
<video id="my_video" width="640" height="480" poster="Images/poster.jpg">
  <source src="Video/blur.mp4">
</video>
  <div id="video_controls_bar">
  <button id="rewind"><<</button>
    <button id="playpausebtn">Play</button>
        <button id="fastForward">>></button>
    <input id="seekslider" type="range" min="0" max="100" value="0" step="1">
    <span id="currentTimeTxt">00:00</span> / <span id="durationTimeTxt">00:00</span> <!-- display of the current time of video -->
    <button id="mutebtn">Mute</button> 
    <input id="volumeslider" type="range" min="0" max="100" value="100" step="1">
    <select id="chosenSpeed">
  <option value="2">2x</option>
  <option value="1.7">1.7x</option>
  <option value="1.5">1.5x</option>
  <option value="1.25">1.25x</option>
  <option value="1"selected>1x</option>
  <option value="0.75">0.75x</option> <!-- make speed playback rate method in javascript to link witt the values of the speed -->
  <option value="0.5">0.5x</option>
</select>
</div>
  </div>
</div>
  </div>
</div>
</body>
</html>

请你们能告诉我如何对我的快进做同样的事情，或者它是否相似？

Answer 1

您应该使用vid.currentTime而不是speedBack.currentTime。 speedBack是一个DOM按钮元素，没有currentTime属性。即

function rewind() {
    speedBack.currentTime= 0;
}

应该是

function rewind() {
    vid.currentTime= 0;
}

Javascript视频倒带和快进

1 个答案: