html5播放器设置音量的方式实例源代码
warning:
这篇文章距离上次修改已过191天，其中的内容可能已经有所变动。
<!DOCTYPE html>
<html>
<body>
<h2>HTML5 视频播放器 - 调整音量</h2>
<video id="myVideo" width="320" height="176" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<div>
当前音量: <output id="volumeLevel">1</output>
</div>
<input type="range" min="0" max="1" step="0.1" id="volumeControl" value="1" onchange="setVolume(this.value)">
<script>
// 获取视频和音量控制条
var video = document.getElementById('myVideo');
var volumeControl = document.getElementById('volumeControl');
var volumeLevel = document.getElementById('volumeLevel');
// 设置音量的函数
function setVolume(newVolume) {
video.volume = newVolume;
volumeControl.value = newVolume;
volumeLevel.value = newVolume;
}
// 当视频可以播放时，将音量控制与视频同步
video.addEventListener('loadedmetadata', function() {
volumeControl.max = video.volumeMax;
volumeControl.step = (video.volumeMax - video.volumeMin) / 100;
setVolume(video.volume);
});
// 当音量改变时，更新显示的音量信息
video.addEventListener('volumechange', function() {
setVolume(video.volume);
});
</script>
</body>
</html>这个代码实例展示了如何使用HTML5和JavaScript来创建一个简单的视频播放器，并包括了调整视频音量的功能。代码中使用了HTML5的<video>元素来嵌入视频内容，并通过JavaScript来处理音量控制逻辑。代码还展示了如何使用output元素来显示当前的音量值，以及如何使用range类型的input元素来让用户可以拖动来设置音量。
评论已关闭