video元素与audio元素

_花卷
133 阅读2分钟

「这是我参与2022首次更文挑战的11天，活动详情查看：2022首次更文挑战」

一、video元素

1-1、属性

  1. autoplay：是否自动播放
  2. controls：是否显示控件
  3. loop：是否循环播放
  4. preload：是否预加载，包含3个取值：
    • auto：预加载
    • metadata：只预加载元数据，即：媒体字节数、第一帧、播放列表等
    • none：不预加载

示例：

<video width="320" height="240" src="..." autoplay controls loop></video>

  • 建议用width和height定义视频的宽高，如果不定义则浏览器显示的是视频原来的大小，视频本身过大则会影响页面布局

1-2、视频格式

  1. 主要有：ogg mp4 webm
  2. 各浏览器对视频格式的支持情况：Chrome都支持、Firefox和Opera不支持mp4 、IE9和Safari只支持mp4 可以配合video和source实现多种格式的视频播放：
<video controls>
  <source type="video/ogg" src="文件路径" />
  <source type="video/mp4" src="文件路径" />
  <source type="video/webm" src="文件路径" />
</video>
  • 要注意：这种方式的src写在source上，而不是video上。如果能同时识别多种，则最终使用第一个可识别的格式

1-3、自定义视频

在自定义视频中，我们不仅需要使用CSS重新制作外观样式，还需要借助JavaScript来将播放、暂停、进度条显示、音量控制功能实现才行。

1-3-1、video元素的DOM属性

属性功能
volume音量
currentTime当前播放时间（秒）
startTime设置播放时间（秒）
duration总的播放时间（秒）
playbackRate当前播放速率（默认值1）
muted是否静音（默认值false）
paused是否处于暂停，取值false / true
end是否播放完毕，取值为true / false

1-3-2、video元素的DOM方法

video元素的DOM方法包括：

  • play() ：播放
  • pause() ：暂停

1-3-3、video元素的DOM事件

video元素的DOM事件为：timeupdate：视频时间改变时触发

1-3-4、代码示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>20-video元素</title>
    <script>
      window.onload = function(){
        let oVideo = document.getElementsByTagName("video")[0];
        let oPlay = document.getElementById("play");
        let oPause = document.getElementById("pause");
        let oAdd = document.getElementById("add");
        let oReduce = document.getElementById("reduce");
        let btn = document.getElementById("btn");
        let oFast = document.getElementById("fast");
        let oSlow = document.getElementById("slow");
        let oRange = document.getElementById("range");
        let oCurrentTime = document.getElementsByClassName("currentTime")[0];
        let oDuration = document.getElementsByClassName("duration")[0];

        let flag = 1; // 控制是否静音
        // 视频的播放与暂停
        oPlay.onclick = function () {
          oVideo.play();
        }
        oPause.onclick = function() {
          oVideo.pause();
        }
        // 视频音量的增大与减小
        oAdd.onclick = function () {
          oVideo.volume += 0.2;
        }
        oReduce.onclick = function () {
          oVideo.volume -= 0.2;
        }
        // 视频静音
        btn.onclick = function () {
          if (flag == 1) {
            oVideo.muted = true;
            btn.value = "开启";
            flag = 0;
          }else {
            oVideo.muted = false;
            btn.value = "静音";
            flag = 1;
          }
        };
        // 视频的快进和慢进
        oFast.onclick = function () {
          // 快进：速率小于1时每次增加0.2；大于1时，每次增加1
          if (oVideo.playbackRate <= 1) {
            oVideo.playbackRate += 0.2;
          } else {
            oVideo.playbackRate += 1;
          }
        };
        oSlow.onclick = function () {
          if (oVideo.playbackRate <= 1) {
            oVideo.playbackRate -= 0.2;
          } else {
            oVideo.playbackRate -= 1;
          }
        };

        // 视频进度条
        // 初始化进度条
        oRange.min = 0;
        oRange.max = oVideo.duration;
        oRange.value = 0;
        // 触发滑动条的onchange事件
        oRange.onchange = function () {
          oVideo.currentTime = oRange.value;
          oCurrentTime.innerHTML = getTime(oVideo.currentTime);
        };
        // 触发video的timeupdate事件
        oVideo.addEventListener("timeupdate", function() {
          oRange.value = oVideo.currentTime;
          oCurrentTime.innerHTML = getTime(oVideo.currentTime);
        }, false);

        // 添加时间
        oDuration.innerHTML = getTime(oVideo.duration);

        function getTime(time) {
          let hours = parseInt(time / 3600);
          let minutes = parseInt((time - hours*3600) / 60);
          let seconds = parseInt(time - hours * 3600 - minutes * 60);
          if (hours < 10) {
            hours = "0" + hours;
          }
          if (minutes < 10) {
            minutes = "0" + minutes;
          }
          if (seconds < 10) {
            seconds = "0" + seconds;
          }
          let result = hours + ":" + minutes + ":" + seconds;
          return result;
        }
      }
    </script>
  </head>
  <body>
    <video width="320" height="240" src="media/movie.mp4"></video><br/>
    <input id="play" type="button" value="播放"/>
    <input id="pause" type="button" value="暂停"/>
    <input id="add" type="button" value="增大"/>
    <input id="reduce" type="button" value="减小"/>
    <input id="btn" type="button" value="静音"/>
    <input id="fast" type="button" value="快进"/>
    <input id="slow" type="button" value="慢进"/>
    <br/>
    <input id="range" type="range" />
    <div class="time">
      <span class="currentTime"></span>
      <span class="duration"></span>
    </div>
  </body>
</html>

二、audio元素

2-1、属性

  1. autoplay：是否自动播放
  2. controls：是否显示控件
  3. loop：是否循环播放
  4. preload：是否预加载（auto metadata none）

2-2、音频格式

  1. 主要有三种：ogg、mp3、wav
  2. 各浏览器对不同格式的音频的支持情况：Chrome和IE9不支持wav，Firefox和Opera不支持mp3，Safari只支持mp3
  • 一般来说，只需要提供ogg和mp3这两种格式就可以支持所有主流浏览器
<audio autoplay controls loop>
  <source src="路径" type="audio/mp3"/>
  <source src="路径" type="audio/ogg"/>
</audio

2-3、自定义音频

2-3-1、audio元素的DOM属性

属性功能
volume音量
currentTime当前播放时间（秒）
startTime设置播放时间（秒）
duration总的播放时间（秒）
playbackRate当前播放速率（默认值1）
muted是否静音（默认值false）
paused是否处于暂停，取值false / true
end是否播放完毕，取值为true / false

2-3-2、audio元素的DOM属性

audio元素的DOM方法包括：

  • play() ：播放
  • pause() ：暂停

2-3-3、audio元素的DOM事件

audio元素的DOM事件为：timeupdate：音频时间改变时触发

avatar
文章
阅读
粉丝