<!DOCTYPE html>
<html>
<head>
<title>Video</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" type="text/css" />
<a href="http://index.js">http://index.js</a>
</head>
<body>
<section>
<video id="video-player" poster="poster.png"></video>
<div id="progress-wrap">
<div id="progress-out">
<div id="progress-in"></div>
</div>
</div>
<div id="controller-box">
<button id="video-play">Play</button>
<button id="video-stop">Stop</button>
<button id="video-pause">Pause</button>
<button id="video-fullscreen">FullScreen</button>
<button id="video-select">File</button>
</div>
<input id="video-file" type="file"/>
</section>
</body>
</html>
const main = () => {
const video = document.getElementById(*video-player*);
// ビデオファイル選択ボタン
const fileSelector = document.getElementById(*video-file*);
const videoSelectButton = document.getElementById(*video-select*);
videoSelectButton.addEventListener(*click*, (e) => {
e.preventDefault();
e.stopPropagation();
fileSelector.click();
});
// ビデオファイル選択
fileSelector.addEventListener(*change*, (e) => {
const file = e.target.files[0];
if (!file.type.match(*video.**)) {
console.log(*This file is not video.*);
return;
}
video.src = window.URL.createObjectURL(file);
video.load();
video.play();
});
// ビデオ再生ボタン
const videoPlayButton = document.getElementById(*video-play*);
videoPlayButton.addEventListener(*click*, (e) => {
e.preventDefault();
e.stopPropagation();
video.play();
});
// ビデオ停止ボタン
const videoStopButton = document.getElementById(*video-stop*);
videoStopButton.addEventListener(*click*, (e) => {
e.preventDefault();
e.stopPropagation();
video.pause();
video.currentTime = 0.0;
});
// ビデオポーズボタン
const videoPauseButton = document.getElementById(*video-pause*);
videoPauseButton.addEventListener(*click*, (e) => {
e.preventDefault();
e.stopPropagation();
video.pause();
});
// ビデオフルスクリーンボタン
const videoFullScreenButton = document.getElementById(*video-fullscreen*);
videoFullScreenButton.addEventListener(*click*, (e) => {
e.preventDefault();
e.stopPropagation();
if (video.requestFullScreen) {
video.requestFullScreen();
}
else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen();
}
else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen();
}
else if (video.msRequestFullscreen) {
video.msRequestFullscreen();
}
});
// プログレスバー長さ更新
const progressOut = document.getElementById("progress-out");
const progressIn = document.getElementById("progress-in");
video.addEventListener(*timeupdate*, () => {
progressIn.style.transform = `scaleX(${video.currentTime / video.duration})`;
});
// プログレスバークリック時イベント
progressOut.addEventListener(*click*, (e) => {
const percent = (e.pageX - (progressOut.getBoundingClientRect().left + window.pageXOffset)) / progressOut.clientWidth;
video.currentTime = video.duration * percent;
});
};
document.addEventListener(*DOMContentLoaded*, () => {
main();
});
[メールボックス]
- MOBI-PAGE -