视频video音频audio属性及监听事件

视频想要铺满整个页面，只设置宽高100%是没有效果的，需要加上下面样式即可实现：

object-fit: fill;

video视频属性：

src	需要引入的视频资源地址
controls	是否显示视频的控件，比如播放暂停进度条音量全屏等。
autoplay	在视频就绪后马上播放。跟muted搭配使用，否则可能不能自动播放。
muted	视频的音频为静音。
loop	当视频完成播放后再次开始播放
poster	预览图片，指定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像
volume	视频的音量 0～1
duration	视频的总时长
currentTime	当前播放的进度
paused	当前视频的状态是否暂停暂停true
width	设置宽度
height	设置高度

使用方法

play() 播放

pause() 暂停

load() 重新加载当前视频

使用示例如下：

HTML

    <progress value="50" max="100"></progress>
    <input type="number">
    <video src="./videos.mp4" controls></video>
    <div class="btns">
        <button>播放</button>
        <button>暂停</button>
        <button>快进</button>
        <button>快退</button>
        <button>快倍速</button>
        <button>慢倍速</button>
    </div>
    <div class="play">
        <button id="play">播放</button>
        <button id="progress">获得播放百分比</button>
    </div>
    <div class="showprogress"></div>

//获取视频
var video=document.getElementsByTagName('video')[0];
//获取音频
var btns=document.getElementsByClassName('btns')[0];
console.log(btns);
//判断按钮的文本内容、绑定事件
btns.onclick=function(){
     //4.获取按钮内的事件 因为这里产生了点击 所以有点击事件
     var text=event.target.innerText;
     if(text == '播放'){
           // console.log(video.volume);   // 视频的音量
           // console.log(video.duration);   //视频的总长度                
           // console.log(video.cuttertTime);   //视频当前播放的时长                  
           // console.log(video.paused);   //视频当前播放状态   true为暂停
           video.play()
      }
      if(text == '暂停'){
           video.pause()
      }
      if(text == '快进'){
           video.currentTime +=10
           video.play()
      }
      if(text == '快退'){
           video.currentTime -=10
           video.play()
      }
      if(text == '快倍速'){
           console.log(video.playbackRate);
           video.playbackRate *= 1.8
           video.play()
      }
      if(text == '慢倍速'){
           video.playbackRate *= 0.5
           video.play()
      }
}
 
//同一个按钮实现暂停播放
var play_btn = document.getElementById('play')
play_btn.onclick = function(){
     if(video.paused){            //判断视频播放状态  true为暂停
           video.play()
           play_btn.innerText = '暂停'
      }else{
           video.pause()
           play_btn.innerText = '播放'
      }
}
 
// 获得播放的百分比
var progress = document.getElementById('progress')
progress.onclick= function(){
      var total = video.duration
      var current = video.currentTime
      var res = (current/total*100).toFixed(2) +'%'
      console.log(res);
      //将百分比存入div
      var showprogress = document.getElementsByClassName('showprogress')[0]
      showprogress.innerText = res
}

audio音频

audio元素和video类似，是用来播放音频的。其属性方法事件也几乎与video元素一致

视频video音频audio监听事件


let audio = document.getElementById("audio");
// 音频不循环播放
audio.loop = false;
// addEventListener:
// true - 事件句柄在捕获阶段执行
// false - 默认。事件句柄在冒泡阶段执行
audio.addEventListener('loadstart', function () {
    console.log("客户端开始请求数据");
}, false);
audio.addEventListener('progress', function () {
    console.log("客户端正在请求数据");
}, false);
audio.addEventListener('error', function () {
    console.log("请求数据时遇到错误 ");
}, false);
audio.addEventListener('stalled', function () {
    console.log("网速失速 ");
}, false);
audio.addEventListener('play', function () {
    console.log("play()和autoplay开始播放时触发 ");
}, false);
audio.addEventListener('pause', function () {
    console.log("暂停触发");
}, false);
audio.addEventListener('loadedmetadata', function () {
    console.log("当指定的音频/视频的元数据已加载时");
}, false);
audio.addEventListener('loadeddata', function () {
    console.log("当当前帧的数据已加载，但没有足够的数据来播放指定音频/视频的下一帧时，会发生 loadeddata 事件。");
}, false);
audio.addEventListener('waiting', function () {
    console.log("等待数据，并非错误");
}, false);
audio.addEventListener('playing', function () {
    console.log("正在播放时触发。");
}, false);
audio.addEventListener('canplay', function () {
    console.log("可以播放，但中途可能因为加载而暂停");
}, false);
audio.addEventListener('canplaythrough', function () {
    console.log("可以播放，歌曲全部加载完毕");
}, false);
audio.addEventListener('seeking', function () {
    console.log("当用户开始移动/跳跃到音频/视频中的新位置时");
}, false);
audio.addEventListener('seeked', function () {
    console.log("当用户已移动/跳跃到音频/视频中的新位置时");
}, false);
audio.addEventListener('timeupdate', function () {
    console.log("播放时间改变");
}, false);
audio.addEventListener('ended', function () {
    console.log("播放结束");
}, false);
audio.addEventListener('ratechange', function () {
    console.log("播放速率改变");
}, false);
audio.addEventListener('durationchange', function () {
    console.log("资源长度改变");
}, false);
audio.addEventListener('volumechange', function () {
    console.log("音量改变");
}, false);

视频video音频audio属性及监听事件

猜你喜欢