<!DOCTYPE
html>
<
html>
<head>
<title>
Video Player</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
video{
width: 600px;
height: 400px;
}
.controls{
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
bottom: 50px;
left: 50px;
width: 500px;
background-color: rgba(0,0,0,0.5);
padding: 10px;
border-radius: 5px;
color: #fff;
font-size: 20px;
}
.pause-icon{
display: none;
}
</style>
</head>
<body>
<div class="
video-container">
<
video controls>
<source src="your-
video-file.mp4" type="
video/mp4">
<source src="your-
video-file.webm" type="
video/webm">
</
video>
<div class="controls">
<div class="play-pause">
<i class="play-icon">►</i>
<i class="pause-icon">❚❚</i>
</div>
<div class="timeline">
<input type="range" class="seek-bar" value="0">
<span class="current-time">00:00</span> / <span class="duration">00:00</span>
</div>
<div class="volume">
<button class="mute"><i class="fa fa-volume-up"></i></button>
<input type="range" class="volume-bar" min="0" max="1" step="0.1" value="1">
</div>
<div class="fullscreen">
<button class="full"><i class="fa fa-arrows-alt"></i></button>
</div>
</div>
</div>
<script>
//get elements
const
video = document.querySelector('
video');
const play = document.querySelector('.play-icon');
const pause = document.querySelector('.pause-icon');
const seekBar = document.querySelector('.seek-bar');
const currentTime = document.querySelector('.current-time');
const durationTime = document.querySelector('.duration');
const volumeBar = document.querySelector('.volume-bar');
const muteButton = document.querySelector('.mute');
const fullScreenButton = document.querySelector('.full');
//play and pause button
play.addEventListener('click',function(){
video.play();
pause.style.display = 'block';
play.style.display = 'none';
});
pause.addEventListener('click',function(){
video.pause();
pause.style.display = 'none';
play.style.display = 'block';
});
//timeline
video.addEventListener('timeupdate',function(){
let currentTimeMin = Math.floor(
video.currentTime / 60);
let currentTimeSec = Math.floor(
video.currentTime - currentTimeMin * 60);
let durationMin = Math.floor(
video.duration / 60);
let durationSec = Math.floor(
video.duration - durationMin * 60);
if(currentTimeSec < 10){
currentTimeSec = '0' + currentTimeSec;
}
if(durationSec < 10){
durationSec = '0' + durationSec;
}
currentTime.innerText = currentTimeMin + ':' + currentTimeSec;
durationTime.innerText = durationMin + ':' + durationSec;
let progressPercent = (
video.currentTime /
video.duration) * 100;
seekBar.value = progressPercent;
});
seekBar.addEventListener('change',function(){
let seekTo = (
video.duration * seekBar.value) / 100;
video.currentTime = seekTo;
});
//volume bar
volumeBar.addEventListener('change',function(){
video.volume = volumeBar.value;
if(
video.volume === 0){
muteButton.inner
HTML = '<i class="fa fa-volume-mute"></i>';
}else{
muteButton.inner
HTML = '<i class="fa fa-volume-up"></i>';
}
});
muteButton.addEventListener('click',function(){
if(
video.volume === 0){
video.volume = volumeBar.value;
muteButton.inner
HTML = '<i class="fa fa-volume-up"></i>';
volumeBar.value = 1;
}else{
video.volume = 0;
muteButton.inner
HTML = '<i class="fa fa-volume-mute"></i>';
volumeBar.value = 0;
}
});
//full screen button
fullScreenButton.addEventListener('click',function(){
if(
video.requestFullscreen){
video.requestFullscreen();
}else if(
video.webkitRequestFullscreen){
video.webkitRequestFullscreen(); /* Safari */
}else if(
video.msRequestFullscreen){
video.msRequestFullscreen(); /* IE11 */
}
});
</script>
</body>
</
html>
909
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
