音频和视频共有属性
播放方法:
audio.play(); |
暂停方法:
audio.pause(); |
是否暂停属性:
audio.paused; |
静音属性:
audio.muted; |
音量属性:[ 0 -1 ]
audio.volume; |
总时长属性: 单位s
audio.duration; |
当前播放进度: 单位s
audio.currentTime; |
2.2 视频的封面属性
video.poster = '图片的地址' |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>音频</title> </head> <body> <audio id="audio" src="./video/1.mp3" controls> </audio> <button id="play">播放</button> <button id="pause">暂停</button> <button id="muted">静音</button> <button id="voiceplus">音量+</button> <button id="voicemin">音量-</button> <button id="jump">快进</button> <script type="text/javascript"> // 获取元素 var audio = document.getElementById("audio"); var play = document.getElementById("play"); var pause = document.getElementById("pause"); var muted = document.getElementById("muted"); var voiceplus = document.getElementById("voiceplus"); var voicemin = document.getElementById("voicemin"); var jump = document.getElementById("jump"); // 播放 play.onclick = function() { audio.play(); } // 暂停 pause.onclick = function() { audio.pause(); } // 静音 muted.onclick = function() { audio.muted = !audio.muted; } // 音量+ voiceplus.onclick = function() { var volume = ((audio.volume * 10 + 1) / 10).toFixed(1); if(volume >= 1) { volume = 1; } audio.volume = volume; } // 音量- voicemin.onclick = function() { var volume = ((audio.volume * 10 - 1) / 10).toFixed(1); if(volume <= 0) { volume = 0; } audio.volume = volume; } // 快进3秒 // 所谓的快进是增加3秒 jump.onclick = function() { // 获取当前播放进度(时间单位 s) // console.log(); audio.currentTime += 3; // 获取整个视频的时长 console.log(audio.duration); } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>视频</title> </head> <body> <video id="video" src="./video/2.mp4" controls> </video> <button id="play">播放</button> <button id="pause">暂停</button> <button id="muted">静音</button> <button id="voiceplus">音量+</button> <button id="voicemin">音量-</button> <button id="jump">快进</button> <script type="text/javascript"> // 获取元素 var video = document.getElementById("video"); var play = document.getElementById("play"); var pause = document.getElementById("pause"); var muted = document.getElementById("muted"); var voiceplus = document.getElementById("voiceplus"); var voicemin = document.getElementById("voicemin"); var jump = document.getElementById("jump"); // 设置封面 // 如果视频没有封面属性 那么会默认使用该视频的第一帧当做封面 video.poster = "./imgs/timg.jpg" // 播放 play.onclick = function() { video.play(); } // 暂停 pause.onclick = function() { video.pause(); } // 静音 muted.onclick = function() { video.muted = !video.muted; } // 音量+ voiceplus.onclick = function() { var volume = ((video.volume * 10 + 1) / 10).toFixed(1); if(volume >= 1) { volume = 1; } video.volume = volume; } // 音量- voicemin.onclick = function() { var volume = ((video.volume * 10 - 1) / 10).toFixed(1); if(volume <= 0) { volume = 0; } video.volume = volume; } // 快进3秒 // 所谓的快进是增加3秒 jump.onclick = function() { // 获取当前播放进度(时间单位 s) // console.log(); video.currentTime += 3; // 获取整个视频的时长 console.log(video.duration); } </script> </body> </html>