day18JavaScript中的audio和video

audio

audio: 音频标签

常见属性

var audio = document.querySelector('audio');
console.log(audio);

console.log(audio.duration); // 音频时长 以s为单位
console.log(audio.paused); // 暂停状态
console.log(audio.ended); // 结束状态

console.log(audio.src); // 地址 绝对地址
console.log(audio.currentSrc); // 当前播放地址
console.log(audio.currentTime); // 当前播放时间
console.log(audio.controls); // 控制器是否显示  true -- 显示 false--不显示
console.log(audio.autoplay); // 是否自动播放  true -- 播放 false--不播放
console.log(audio.muted); // 是否静音
console.log(audio.loop); // 是否循环播放
audio.volume = 0.5;
console.log(audio.volume); // 音量大小  0-1  可以设置0和1

常见事件

// 事件
// 缓冲到可播放状态的时候触发的事件
audio.oncanplay = function(){
    // console.log(audio.duration);
    audio.muted = false;
    // console.log(audio.muted);
    // audio.currentTime = audio.duration / 2;
}

// 播放时间改变 播放时间改变的时候触发的事件
audio.ontimeupdate = function(){
    // console.log(audio.paused); // 暂停状态
    // console.log(audio.ended); // 结束状态
    // console.log(audio.currentSrc); // 当前播放地址
    // console.log(audio.currentTime); // 当前播放时间
    // console.log(audio.currentTime / audio.duration);
}

// 播放触发的事件
audio.onplay = function(){
    console.log('我正在准备播放');
}

// 播放暂停
audio.onpause = function(){
    console.log('我暂停了');
}

// 播放结束
audio.onended = function(){
    console.log('我结束了');
}

常见方法

var btns = document.querySelectorAll('button');
console.log(btns);

btns[0].onclick = function(){
    // 让音频播放  play
    audio.play();
}

btns[1].onclick = function(){
    audio.pause(); // 暂停方法
}

video

常见属性

console.log(video.src); // 播放地址
console.log(video.currentSrc); // 当前播放地址
console.log(video.duration); // 播放时长 以s为单位
console.log(video.poster); // 海报地址
console.log(video.width, video.height); // 宽 高
console.log(video.loop); // 循环
console.log(video.autoplay); // 是否自动播放
console.log(video.muted); // 是否静音
console.log(video.controls); // 是否显示控制条
video.volume = 0.5;
console.log(video.volume); // 音量 0-1
console.log(video.currentTime); // 播放时间
console.log(video.playbackRate); // 播放速度
console.log(video.paused); // 是否暂停
console.log(video.ended); // 是否结束
console.log(video.defaultPlaybackRate); // 默认播放速度

常见方法

btns[3].onclick = function(){
    video.load(); // 加载视频 从头
    video.play(); // 视频开始播放方法
}

btns[4].onclick = function(){
    video.pause(); // 视频暂停播放方法
}

常见事件

// 当视频可以开始播放的时候触发的事件
video.oncanplay  = function(){
    // console.log(video.currentSrc); // 当前播放地址
    // console.log(video.duration); // 播放时长
}

// 时间改变
video.ontimeupdate = function(){
    // console.log(video.currentTime); // 播放时间
    // console.log(video.paused); // 是否暂停
    // console.log(video.ended); // 是否结束
}

var btns = document.querySelectorAll('button');

// 可播放
video.onplay = function(){
    console.log('我可以开始播放');
}

// 暂停触发事件
video.onpause = function(){
    console.log('我暂停了');
}

// 播放结束
video.onended = function(){
    console.log('播放结束');
}

// 播放速度改变触发事件
video.onratechange = function(){
    console.log('当前播放速度' + video.playbackRate);
}

btns[5].onclick = function(){
    video.src = './media/微微.mp4';
}