HTML5+JavaScript实现本地视频/音频播放器
<!DOCTYPE html>
<html>
<head>
<title>HTML5 视频播放器</title>
<style>
#videoPlayer {
width: 100%;
height: auto;
}
#controls {
background-color: #000;
color: #fff;
padding: 5px;
text-align: left;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
#controls button {
background-color: #fff;
color: #000;
padding: 5px;
margin: 0 5px;
border: none;
}
</style>
</head>
<body>
<div id="videoContainer">
<video id="videoPlayer" controls preload="auto" poster="poster.jpg">
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持视频标签。
</video>
<div id="controls">
<button onclick="playPause()">播放/暂停</button>
<button onclick="muteVolume()">静音</button>
<button onclick="increaseVolume()">增大音量</button>
<button onclick="decreaseVolume()">减小音量</button>
</div>
</div>
<script>
var myVideo = document.getElementById("videoPlayer");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function muteVolume() {
if (myVideo.muted)
myVideo.muted = false;
else
myVideo.muted = true;
}
function increaseVolume() {
if (myVideo.volume < 1)
myVideo.volume += 0.1;
}
function decreaseVolume() {
if (myVideo.volume > 0)
myVideo.volume -= 0.1;
}
</script>
</body>
</html>这段代码提供了一个简单的HTML5视频播放器，并包括了播放、暂停、静音、增大和减小音量的功能。使用了HTML5的<video>元素以及JavaScript来控制视频播放。这个示例可以作为开发者学习和实践HTML5视频播放的起点。
评论已关闭