|
|
@@ -0,0 +1,53 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <style>
|
|
|
+ video{
|
|
|
+ width: 300px;
|
|
|
+ height: 300px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <!-- 音频标签 -->
|
|
|
+ <!-- controls 控制条属性 如果没有当前属性页面无法显示播放器 -->
|
|
|
+ <audio src="./media/song.mp3" ></audio>
|
|
|
+ <button id="btnPlay">播放</button>
|
|
|
+ <button id="btnPause">暂停</button>
|
|
|
+ <button id="btnVolume">
|
|
|
+ 调整音量
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <!-- 视频标签 -->
|
|
|
+ <!-- controls 控制条属性 如果没有当前属性页面无法显示播放器 -->
|
|
|
+ <video src="./media/media.mp4" ></video>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ // 获取元素
|
|
|
+ var audio = document.querySelector("audio");
|
|
|
+ var btnPlay = document.querySelector("#btnPlay");
|
|
|
+ var btnPause = document.querySelector("#btnPause");
|
|
|
+ var btnVolume = document.querySelector("#btnVolume");
|
|
|
+ var video = document.querySelector("video");
|
|
|
+ // 播放 play()
|
|
|
+ btnPlay.onclick = function(){
|
|
|
+ // audio.play();
|
|
|
+ video.play();
|
|
|
+ }
|
|
|
+ // 暂停 pause()
|
|
|
+ btnPause.onclick = function(){
|
|
|
+ // audio.pause();
|
|
|
+ video.pause();
|
|
|
+ }
|
|
|
+ // 调整音量
|
|
|
+ btnVolume.onclick = function(){
|
|
|
+ // audio.volume = 0.1;
|
|
|
+ video.volume = 0.1;
|
|
|
+ }
|
|
|
+
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
