2
私はコードを使用していますhere、私はボリュームボタンなどを取り除くためにちょっとハッキングしました。それぞれの自動再生、ループ、および再生の速度を変更するためのボタンがあります。任意の数のビデオ要素に対して機能するようにこのコードを変更するにはどうすればいいですか？init（）関数などに複数の変数を指定していますか？JavaScriptを使用したHTML5ビデオ - 複数の動画のカスタムボタン
<html>
<head>
<title>Full player example</title>
<!-- Uncomment the following meta tag if you have issues rendering this page on an intranet or local site. -->
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"/> -->
<script type="text/javascript">
function init() { // Master function, encapsulates all functions
var video = document.getElementById("Video1");
if (video.canPlayType) { // tests that we have HTML5 video support
document.getElementById("buttonbar").style.display = "block";
video.src == "";
function vidplay(evt) {
if (video.src == "") { // inital source load
getVideo();
}
button = evt.target; // get the button id to swap the text based on the state
if (video.paused) { // play the file, and display pause symbol
video.play();
button.textContent = "||";
} else { // pause the file, and display play symbol
video.pause();
button.textContent = ">";
}
}
// load video file from input field
function getVideo() {
var fileURL = "/lib/exe/fetch.php?media=experiment_log_books:sig0700.mp4"; // get input field
if (fileURL != "") {
video.src = fileURL;
video.load(); // if HTML source element is used
document.getElementById("play").click(); // start play
} else {
errMessage("Enter a valid video URL"); // fail silently
}
}
// skip forward, backward, or restart
function setTime(tValue) {
try {
if (tValue == 0) {
video.currentTime = tValue;
}
else {
video.currentTime += tValue;
}
} catch (err) {
// errMessage(err) // show exception
errMessage("Video content might not be loaded");
}
}
// display an error message
function errMessage(msg) {
// displays an error message for 5 seconds then clears it
document.getElementById("errorMsg").textContent = msg;
setTimeout("document.getElementById('errorMsg').textContent=''", 5000);
}
// Play
document.getElementById("play").addEventListener("click", vidplay, false);
// Restart
document.getElementById("restart").addEventListener("click", function() {
setTime(0);
}, false);
// Skip backward 10 seconds
document.getElementById("rew").addEventListener("click", function() {
setTime(-10);
}, false);
// Skip forward 10 seconds
document.getElementById("fwd").addEventListener("click", function() {
setTime(10);
}, false);
// set src == latest video file URL
document.getElementById("loadVideo").addEventListener("click", getVideo, false);
// fail with message
video.addEventListener("error", function (err) {
errMessage(err);
}, true);
// playback speed buttons
document.getElementById("slower").addEventListener("click", function() {
video.playbackRate -= .25;
}, false);
document.getElementById("faster").addEventListener("click", function() {
video.playbackRate += .25;
}, false);
document.getElementById("normal").addEventListener("click", function() {
video.playbackRate = 1;
}, false);
document.getElementById("play").click();
} // end of runtime
}// end of master
</script>
</head>
<body onload="init();" >
<video id="Video1" controls autoplay loop height="320" width="640" title="Sig 0700">
HTML5 Video is required for this example
</video>
<div id="buttonbar" style="display: none;")>
<button id="restart" title="Restart button">[]</button>
<button id="slower" title="Slower playback button">-</button>
<button id="rew" title="Rewind button" ><<</button>
<button id="play" title="Play button">></button>
<button id="fwd" title="Forward button" >>></button>
<button id="faster" title="Faster playback button">+</button>
<button id="normal" title="Reset playback rate button">=</button>
</div>
<div id= "inputField" style="display:none;" >
<label>Type or paste a video URL: <br/>
<input type="text" id="videoFile" style="width: 300px;" title="video file input field" value="http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4" />
<button id="loadVideo" title="Load video button" >Load</button>
</label>
</div>
<div title="Error message area" id="errorMsg" style="color:Red;"></div>
</body>
</html>
すべてのビデオを同期しますか？ – Piou
いいえ、それぞれ個別のコントロール。 – James
同じページのすべての動画が同時に表示されますか？ – theoretisch