0
巻き戻し機能（早戻し）と早送り機能を取得しようとしていますが、巻き戻し機能が動作しないように見えることもありません。多分私は何かを逃している？Javascriptビデオ巻き戻しと早送り
の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>
そして、あなたたちは私の前方に私の速いと同じことを行う方法の助言を与えることができますしてくださいか、それが似ていますか？
来るんすべきか？そうでなければ、DOMが最初に読み込まれていることを確認する必要があります。それ以外の場合は 'id =" rewind "で要素が見つかりません" –
あなたのコードはうまくいくと思います。 DOMがロードされたときにinitializePlayer（）が実行されるかどうかは不明ですか？ – gie3d
@KScandrettあなたのために私のすべてのコードを追加しました。そして、わかりやすくするために、xD – GhostCheetah