一.音频
<body>
<!-- audio 多媒体音频标签 -->
<!-- controls 是否显不默认播放控件 -->
<!-- autoplay 自动播放(目前很多浏览器不支持自动播放) -->
<!-- loop 循环播放 -->
<button class="btn">点击播放</button>
<audio controls autoplay class="audio" src=""></audio>
<script>
var btn = document.getElementsByClassName("btn")[0];
var audio = document.getElementsByClassName("audio")[0];
var flag = true;
btn.onclick = function() {
if (flag) {
audio.play();
flag = false
} else {
audio.pause();
flag = true;
}
}
</script>
</body>
</html>
二.视频
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
video {
width: 600px;
height: 600px;
}
</style>
</head>
<body>
<!-- video 视频 -->
<!-- autoplay 自动播放(18年开始,谷歌浏览器不支持自动播放) -->
<!-- muted 静音播放 -->
<!-- controls 是否显示默认播放控件 -->
<!-- loop 循环播放 -->
<!-- width 设置播放窗口宽度 -->
<!-- height 设置播放窗口的高度 -->
<iframe height=498 width=510 src=''></iframe>
<!-- <iframe height=498 width=510 src=''></iframe> -->
<iframe height=498 width=510 src=''></iframe>
<video controls src=""></video>
<!-- <video controls src="../../../03-JavaScript/01-js/视频/01.mp4"></video> -->
<video controls src=""></video>
</body>
</html>