1. 获取元素引用
<audio id="myAudio" controls>
<source src="example.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<video id="myVideo" controls>
<source src="example.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
const audio = document.getElementById('myAudio');
const video = document.getElementById('myVideo');
2. 播放和暂停
播放:使用play()方法。
暂停:使用pause()方法。
// 播放音频
audio.play();
// 暂停视频
video.pause();
3. 调整音量
音量值范围从0(静音)到1(最大音量)。可以使用volume属性来设置或获取当前音量。
// 设置音频音量为50%
audio.volume = 0.5;
// 获取当前视频音量
console.log(video.volume);
4. 跳转到特定时间点
可以使用currentTime属性来设置或获取当前播放的位置(单位为秒)。
// 跳转到音频的第30秒
audio.currentTime = 30;
// 查看当前视频播放的位置
console.log(video.currentTime);
5. 监听事件
可以监听各种事件来响应用户的交互或媒体状态的变化。常用的事件包括:
play:当播放开始时触发。
pause:当播放暂停时触发。
ended:当播放结束时触发。
timeupdate:当播放位置改变时定期触发。
// 当音频播放时执行函数
audio.addEventListener('play', function() {
console.log('音频正在播放');
});
// 当视频结束时执行函数
video.addEventListener('ended', function() {
console.log('视频播放结束');
});
6. 全屏播放
可以使用requestFullscreen()方法让视频全屏播放。
// 让视频全屏播放
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.mozRequestFullScreen) { // Firefox
video.mozRequestFullScreen();
} else if (video.webkitRequestFullscreen) { // Chrome, Safari and Opera
video.webkitRequestFullscreen();
} else if (video.msRequestFullscreen) { // IE/Edge
video.msRequestFullscreen();
}