上一篇
如何获取HTML播放器的源代码？
html，，，，，，HTML5 Video Player，，，，， Your browser does not support the video tag.，，，，“
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=devicewidth, initialscale=1.0">
<title>HTML播放器</title>
<style>
#videocontainer {
position: relative;
width: 100%;
maxwidth: 640px;
margin: 0 auto;
}
video {
width: 100%;
height: auto;
}
.controls {
position: absolute;
bottom: 10px;
left: 10px;
right: 10px;
display: flex;
justifycontent: spacebetween;
alignitems: center;
}
button {
background: rgba(255, 255, 255, 0.7);
border: none;
padding: 5px 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="videocontainer">
<video id="video" src="yourvideofile.mp4"></video>
<div class="controls">
<button id="playpause">播放/暂停</button>
<button id="mute">静音</button>
<input type="range" id="volumeslider" min="0" max="1" step="0.1" value="1">
<span id="currenttime">00:00</span>
<input type="range" id="seekslider" min="0" max="100" step="1" value="0">
<span id="duration">00:00</span>
</div>
</div>
<script>
const video = document.getElementById('video');
const playPauseBtn = document.getElementById('playpause');
const muteBtn = document.getElementById('mute');
const volumeSlider = document.getElementById('volumeslider');
const currentTimeDisplay = document.getElementById('currenttime');
const seekSlider = document.getElementById('seekslider');
const durationDisplay = document.getElementById('duration');
function formatTime(seconds) {
const minutes = Math.floor(seconds / 60);
seconds = Math.floor(seconds % 60);
return${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')};
}
function updateDuration() {
const duration = video.duration;
durationDisplay.textContent = formatTime(duration);
seekSlider.max = Math.ceil(duration);
}
function updateCurrentTime() {
const currentTime = video.currentTime;
currentTimeDisplay.textContent = formatTime(currentTime);
seekSlider.value = Math.ceil(currentTime);
}
function updateSeekSlider() {
const value = seekSlider.value;
video.currentTime = value;
}
function togglePlayPause() {
if (video.paused) {
video.play();
playPauseBtn.textContent = '暂停';
} else {
video.pause();
playPauseBtn.textContent = '播放';
}
}
function toggleMute() {
video.muted = !video.muted;
muteBtn.textContent = video.muted ? '取消静音' : '静音';
}
function updateVolume() {
video.volume = volumeSlider.value;
}
video.addEventListener('loadedmetadata', updateDuration);
video.addEventListener('timeupdate', updateCurrentTime);
playPauseBtn.addEventListener('click', togglePlayPause);
muteBtn.addEventListener('click', toggleMute);
volumeSlider.addEventListener('input', updateVolume);
seekSlider.addEventListener('input', updateSeekSlider);
</script>
</body>
</html>
各位小伙伴们，我刚刚为大家分享了有关“html播放器源码”的知识，希望对你们有所帮助。如果您还有其他相关问题需要解决，欢迎随时提出哦！
本站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本站，有问题联系侵删！
本文链接：http://www.xixizhuji.com/fuzhu/12980.html
