<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>音视频</title>
<style>
video{
width: 500px;
}
</style>
</head>
<body>
<!-- src 属性设置音视频资源路径
controls 属性设置播放控制器
autoplay 属性设置自动播放, 需要开启浏览器授权
loop 属性设置循环播放
-->
<audio src="./极乐净土.mp3" controls loop>此浏览器不支持播放</audio>
<video src="./demo.mp4" controls loop></video>
<button οnclick="next()">切换</button>
<button οnclick="mute()">静音</button>
<script>
var audio = document.querySelector("audio")
var video = document.querySelector("video")
function next(){
// video.load()
// video.src = "item14947.mp4"
audio.load() // 重载
audio.src = "丑八怪.mp3" // 换资源
audio.play() // 开始播放
// audio.pause() // 暂停
}
// audio.currentTime = 30 // 设置播放进度
// 更新进度
setInterval(() => {
console.log(audio.currentTime)
}, 1000);
// 静音
function mute(){
audio.volume = 0;
video.volume = 0;
}
</script>
</body>
</html>