HTML5 视频的常用操作

Hillbox

已于 2022-08-15 15:06:33 修改

阅读量402

点赞数 1

分类专栏： html5 文章标签： html5 javascript 前端

于 2022-08-15 03:45:24 首次发布

本文链接：https://blog.csdn.net/qq_33514421/article/details/126339328

版权

html5 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

对书上的案例进行合并、改进和注释。该案例包括视频的进度条、播放/暂停、音量调节、静音、快进/慢进。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script>
    // 简写id获取DOM函数
    function $$(id) {
      return document.getElementById(id);
    }
    // 秒转换为时、分、秒
    function getTime(time) {
      var hours = parseInt(time / 3600);
      var minutes = parseInt((time - hours * 3600) / 60);
      var 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;
      }
      var result = hours + ":" + minutes + ":" + seconds;
      return result;
    }
    window.onload = function () {
      // 获取DOM
      var oVideo = $$("video");
      var oPlay = $$("play");
      var oAdd = $$("add");
      var oReduce = $$("reduce");
      var oVolume = $$("volume");
      var oMuted = $$("muted");
      var oRange = $$("range");
      var oProgress = $$("progress");
      var oTotal = $$("total");
      var oFast = $$("fast");
      var oSlow = $$("slow");
      var oPlaybackRate = $$("playbackRate");

      // 初始化
      oVolume.value = oVideo.volume.toFixed(1);
      oRange.min = 0;
      oRange.max = oVideo.duration;
      oRange.value = 0;
      oProgress.innerHTML = getTime(0);
      oTotal.innerHTML = getTime(oVideo.duration);
      oPlaybackRate.value = oVideo.playbackRate.toFixed(1);

      // 播放按钮
      oPlay.onclick = function () {
        if(oVideo.paused){// 如果视频是暂停的
          oVideo.play();
          oPlay.value="暂停";
        }else{
          oVideo.pause();
          oPlay.value="播放";
        }
      };
      // 音量增加按钮
      oAdd.onclick = function(){
        oVideo.volume += 0.1;
        oVolume.value = oVideo.volume.toFixed(1);
      };
      // 音量减少按钮
      oReduce.onclick = function(){
        oVideo.volume -= 0.1;
        oVolume.value = oVideo.volume.toFixed(1);
      };
      // 静音按钮
      oMuted.onclick = function(){
        if(oVideo.muted){// 如果视频是静音的
          oVideo.muted = false;
          oMuted.value="正常";
        }else{
          oVideo.muted = true;
          oMuted.value="静音";
        }
      };
      // 当视频在播放时，会触发timeupdate事件
      oVideo.addEventListener("timeupdate", function(){
        oRange.value = oVideo.currentTime;
        oProgress.innerHTML = getTime(oRange.value);
      }, false);
      // 拖动进度条，会改变视频播放进度
      oRange.onchange = function(){
        oVideo.currentTime = oRange.value;
        oProgress.innerHTML = getTime(oRange.value);
      }
      // 快进
      oFast.onclick = function(){
        if(oVideo.playbackRate<1){
          oVideo.playbackRate += 0.1;
        }else{
          oVideo.playbackRate += 1;
        }
        oPlaybackRate.value = oVideo.playbackRate.toFixed(1);
      }
      // 慢进
      oSlow.onclick = function(){
        if(oVideo.playbackRate>1){
          oVideo.playbackRate -= 1;
        }else{
          oVideo.playbackRate -= 0.1;
        }
        oPlaybackRate.value = oVideo.playbackRate.toFixed(1);
      }
      
    }
  </script>
</head>
<body>
    <video id="video" width="480" height="auto" src="movie.mp4"></video><br/>
    <!-- 进度条 -->
    <input id="range" type="range" step="0.1" />
    <output><span id="progress"></span> / <span id="total"></span></output><br/>
    <!-- 各种按钮 -->
    <input id="play" type="button" value="播放"/>
    <input id="add" type="button" value="音量增大"/>
    <output id="volume"></output>
    <input id="reduce" type="button" value="音量减小"/>
    <input id="muted" type="button" value="正常"/>
    <input id="fast" type="button" value="快进">
    <output id="playbackRate"></output>
    <input id="slow" type="button" value="慢进">
</body>
</html>