帶有javascript的HTML5視頻 - 多個視頻的自定義按鈕
[英]HTML5 video with javascript - custom buttons for multiple videos
問題描述
我正在使用這里找到的代碼，我已經破解了一些以擺脫音量按鈕等。我想要做的是有大約8個視頻，每個自動播放，循環，並有按鈕來改變速度播放。 如何修改此代碼以使其適用於任意數量的視頻元素，我是否已將多個變量賦予init（）函數或其他內容？
<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>
1 個解決方案
解決方案1
2 2016-12-23 18:09:15
有很多方法可以實現，但是因為你想讓它適用於任意數量的視頻，我會把標記的創建和控件的綁定放到一個接受視頻網址作為參數的函數中，如下所示：
<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">
window.videos = 0;
function createVideo (src) {
var container = document.createElement('div'),
video = document.createElement('video'),
buttonContainer = document.createElement('div'),
faster = document.createElement('button'),
forward = document.createElement('button'),
normal = document.createElement('button'),
playPause = document.createElement('button'),
restart = document.createElement('button'),
rewind = document.createElement('button'),
slower = document.createElement('button'),
error = document.createElement('div'),
showError = function (message) {
error.textContent = message;
setTimeout(function () {
error.textContent = '';
}, 5000);
};
++window.videos;
document.body.appendChild(container);
container.id = 'container-' + window.videos;
container.appendChild(video);
video.id = 'video-' + window.videos;
video.autoplay = true;
video.controls = true;
video.loop = true;
video.src = src;
video.load();
video.addEventListener('error', function (err) {
showError(err);
}, true);
container.appendChild(buttonContainer);
buttonContainer.id = 'buttonContainer-' + window.videos;
buttonContainer.appendChild(restart);
buttonContainer.appendChild(slower);
buttonContainer.appendChild(rewind);
buttonContainer.appendChild(playPause);
buttonContainer.appendChild(forward);
buttonContainer.appendChild(faster);
buttonContainer.appendChild(normal);
faster.id = 'faster-' + window.videos;
faster.textContent = '+';
faster.title = 'Faster playback button';
faster.addEventListener('click', function () {
video.playbackRate += .25;
}, false);
forward.id = 'forward-' + window.videos;
forward.textContent = '>>';
forward.title = 'Forward button';
forward.addEventListener('click', function () {
video.currentTime += 10;
}, false);
normal.id = 'normal-' + window.videos;
normal.textContent = '=';
normal.title = 'Reset playback rate button';
normal.addEventListener('click', function () {
video.playbackRate = 1;
}, false);
playPause.id = 'playPause-' + window.videos;
playPause.textContent = '||';
playPause.title = 'Play button';
playPause.addEventListener('click', function (evt) {
button = evt.target;
if (video.paused) {
video.play();
button.textContent = '||';
}
else {
video.pause();
button.textContent = '>';
}
}, false);
restart.id = 'restart-' + window.videos;
restart.textContent = '[]';
restart.title = 'Restart button';
restart.addEventListener('click', function () {
video.currentTime = 0;
}, false);
rewind.id = 'rewind-' + window.videos;
rewind.textContent = '<<';
rewind.title = 'Rewind button';
rewind.addEventListener('click', function () {
video.currentTime -= 10;
}, false);
slower.id = 'slower-' + window.videos;
slower.textContent = '-';
slower.title = 'Slower playback button';
slower.addEventListener('click', function () {
video.playbackRate -= .25;
}, false);
container.appendChild(error);
error.id = 'error-' + window.videos;
error.title = 'Error message area';
error.style.color = 'red';
};
function init() {
createVideo('/lib/exe/fetch.php?media=experiment_log_books:sig0700.mp4');
createVideo('/lib/exe/fetch.php?media=experiment_log_books:sig0700.mp4');
}
</script>
</head>
<body onload="init();"></body>
</html>
如何在 reactJS 中使用 onClick 為多個視頻播放 HTML5 視頻？
[英]How to play HTML5 video with onClick in reactJS for multiple videos?
如何編寫帶有多個循環視頻的 HTML5 全屏視頻播放器？
[英]How to code a HTML5 fullscreen video player with multiple videos in loop?
如何在javascript中的多個html5視頻中使用播放/暫停按鈕？
[英]How to use a play/pause button for multiple html5 videos in javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.