Video video audio audio properties and monitoring events

If the video wants to cover the entire page, only setting the width and height to 100% has no effect. You need to add the following styles to achieve it:

object-fit: fill;

video video attributes:

src	The address of the video resource that needs to be imported
controls	Whether to display video controls, such as playback, pause, progress bar, volume, full screen, etc.
autoplay	Play the video as soon as it's ready. Use it with muted, otherwise it may not be able to play automatically.
muted	The video's audio is muted.
loop	Start playing again when the video finishes playing
poster	Preview image, specifying an image to display while the video is downloading, or before the user clicks the play button
volume	Video volume 0~1
duration	total length of the video
currentTime	current playback progress
paused	Whether the status of the current video is paused or paused true
width	set width
height	set height

dd

Instructions

play() play

pause() pause

load() reloads the current video

 An example of use is as follows:

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>

JS

//获取视频
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

The audio element is similar to video and is used to play audio. Its attribute method events are also almost consistent with the video element

<audio src="./1.mp3" ></audio>

Video video audio audio listening event

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);