|
|
@@ -0,0 +1,84 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+ <head>
|
|
|
+ <meta charset="UTF-8" />
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
+ <title>Document</title>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <!-- audio:音频 video：视频
|
|
|
+ 1. src:视频路径;
|
|
|
+ 2. controls:显示控件：
|
|
|
+ 属性值 ：controls
|
|
|
+ 3. 是否循环播放：
|
|
|
+ 属性名：loop;
|
|
|
+ 属性值：loop;
|
|
|
+ 4.视频当前播放的时间：
|
|
|
+ dom.currentTime
|
|
|
+ 指示音频/视频播放的当前时间(以秒计);
|
|
|
+ 5.playbackRate
|
|
|
+ 设置或返回音频/视频播放的速度
|
|
|
+ 注意：
|
|
|
+ 设置播放的速度,1--16最大16倍速;
|
|
|
+ 6.dom.duration
|
|
|
+ 返回当前音频/视频的长度（以秒计）
|
|
|
+ 7.ended
|
|
|
+ 返回音频/视频的播放是否已结束(结束返回true 没结束返回false);
|
|
|
+ 8.muted
|
|
|
+ 设置或返回音频/视频是否静音 布尔值
|
|
|
+ 9.paused
|
|
|
+ 返回音频/视频是否暂停 布尔值
|
|
|
+ 10.volume
|
|
|
+ 设置或返回音频/视频的音量
|
|
|
+
|
|
|
+ 方法：
|
|
|
+ 1.load() 重新加载音频/视频元素
|
|
|
+ 2.play() 开始播放音频/视频
|
|
|
+ 3.pause() 暂停当前播放的音频/视频
|
|
|
+ 事件:
|
|
|
+ canplaythrough 音频/视频缓冲完成 当资源加载完毕 再触发这个事件
|
|
|
+ timeupdate (播放进度改变的时候触发); 正在播放的事件
|
|
|
+ ended 当目前的播放列表已结束时 当播放结束的是
|
|
|
+
|
|
|
+ -->
|
|
|
+ <audio src="./周杰伦-花海.mp3" controls></audio>
|
|
|
+ <button id="btn1">加载</button>
|
|
|
+ <button id="btn2">播放</button>
|
|
|
+ <button id="btn3">暂停</button>
|
|
|
+ <!-- <video src="./222.mp4" controls></video> -->
|
|
|
+ <script>
|
|
|
+ var audios = document.querySelector("audio");
|
|
|
+ var btn1 = document.querySelector("#btn1");
|
|
|
+ var btn2 = document.querySelector("#btn2");
|
|
|
+ var btn3 = document.querySelector("#btn3");
|
|
|
+ audios.addEventListener("canplaythrough",function() {
|
|
|
+ console.log("加载完成")
|
|
|
+ })
|
|
|
+ audios.addEventListener("timeupdate",function() {
|
|
|
+ console.log("正在播放")
|
|
|
+ })
|
|
|
+ audios.addEventListener("ended",function() {
|
|
|
+ console.log("播放完成")
|
|
|
+ })
|
|
|
+ btn1.onclick = function() {
|
|
|
+ audios.load();
|
|
|
+ }
|
|
|
+ btn2.onclick = function() {
|
|
|
+ audios.play();
|
|
|
+ }
|
|
|
+ btn3.onclick = function() {
|
|
|
+ audios.pause();
|
|
|
+ }
|
|
|
+ setInterval(() => {
|
|
|
+ // console.log(audios.currentTime);
|
|
|
+ // console.log(audios.duration);
|
|
|
+ // console.log(audios.ended)
|
|
|
+ // console.log(audios.paused)
|
|
|
+ }, 1000);
|
|
|
+ audios.playbackRate = 2;
|
|
|
+ // audios.muted = false;
|
|
|
+ audios.volume = 1;
|
|
|
+ // console.log(audios.duration);
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|
e