您好！欢迎访问家园网-www.jy.wang!

家园网

您当前的位置：首页 > 计算机技术 > HTML

嵌入并控制一个视频播放器

网络 作者：本站 点击：

嵌入并控制一个视频播放器

请逐行逐词（主要指函数、参数、方法、属性之类的）讲解一下下面的代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>媒体播放时的方法</title>
  <style>
    h1 {
      font-size: x-large;
      margin: 6px 0px 6px 0px;
    }

    video {
     max-width: 445px;
     height:auto;
      border: double 8px lightgray;
    }

    .videoContainer {
      max-width: 445px;
      margin:0 auto;
    }

    #positionBar {
      height: 28px;
      color:#333;
      font-weight: bolder;
      background: #33FFFF;
      text-align: center;
    }

    #positionBar span {
      display: inline-block;
      margin-top: 7px;
    }

    #durationBar {
     margin:0 auto;
      border: solid 1px #333;
      width: 60%;
      margin-bottom: 5px;
      box-shadow:15px 10px 30px #333;
    }

    #bufferBar {
      background: lightsteelblue;
      position: absolute;
    }
.btn {
  width:50%;
  margin:0 auto;
 margin-top:28px;
}
   .btn button{

    
   }
  </style>

 
</head>

<body>
<div class="videoContainer">
<!-- timeupdate事件：当前播放位置（currentTime属性）改变   -->
  <video id="videoPlayer"  ontimeupdate="progressUpdate()" >
    <source src="butterfly.mp4" type="video/mp4">
    <source src="butterfly.webm" type="video/webm">
  </video>
</div>

<div class="barContainer">
  <div id="durationBar">
    <div id="positionBar"><span id="displayStatus">进度条.</span></div>
  </div>
</div>

<div class="btn">
  <button onclick="play()">播放</button>
  <button onclick="pause()">暂停</button>
  <button onclick="stop()">停止</button>
  <button onclick="speedUp()">加速播放</button>
  <button onclick="slowDown()">减速播放</button>
  <button onclick="normalSpeed()">正常速度</button>
</div>

</body>
<script>
    var video;
    var display;

    window.onload = function() {
      video = document.getElementById("videoPlayer");//获取videoPlayer元素

      display = document.getElementById("displayStatus");

      video.onplaying = function() {
       //alert(1);
      }
      video.onpause = function() {
        display.innerHTML = "暂停";
      }
    }
    //进程更新函数
  //currentTime属性自然改变，触发ontimeupdate事件

//  1. 获取视频的当前时间点，将它保存在currentTime属性中
//  2.（当前时间点/视频的总的播放时间）保存到durantion属性中
//  3. 转换为#positionBar 百分比长度。
//  时间变化显示于进度条中：
    function progressUpdate() {
      var positionBar = document.getElementById("positionBar");
    //currentTime--当前的播放位置
    //duration--媒介时长
    //(video.currentTime / video.duration * 100)得到一个浮点数
    //即： positionBar.style.width=百分数，它 长度是相对于#durationBar而言的
      positionBar.style.width = (video.currentTime / video.duration * 100)  + "%";//播放时进度条的宽
      displayStatus.innerHTML = (Math.round(video.currentTime*100)/100) ;//播放时进度条的文字
    }

    function play() {//播放函数
      video.play();
    }

    function pause() {
      video.pause();
    }
//currentTime人为地改变当前播放位置改变，触发timeUpdate事件
    function stop() {
      video.pause();
      video.currentTime = 0;
    }

    function speedUp() {
      video.play();
      video.playbackRate = 2;
    }

    function slowDown() {
      video.play();
      video.playbackRate = 0.5;
    }

    function normalSpeed() {
      video.play();
      video.playbackRate = 1;
    }

  </script>
</html>


这段代码是一个简单的 HTML 页面结构，用于嵌入并控制一个视频播放器。下面逐行逐词进行讲解：

<body>

  • <body> 标签定义了 HTML 文档的主体部分，所有可见内容都应包含在该标签内。

<div class="videoContainer">

  • <div> 是一个通用容器标签，用于对文档进行分组。

  • class="videoContainer" 给这个 div 设置了一个 CSS 类名，便于后续通过样式表进行样式设置。

<!-- timeupdate事件：当前播放位置（currentTime属性）改变   -->

  • 这是一段 HTML 注释，说明了 timeupdate 事件的作用：当视频播放位置改变时触发（即 currentTime 属性发生变化时）。

<video id="videoPlayer"  ontimeupdate="progressUpdate()" >

  • <video> 是 HTML5 中用于嵌入视频内容的标签。

  • id="videoPlayer" 为该视频元素指定唯一标识符，方便 JavaScript 调用。

  • ontimeupdate="progressUpdate()" 是一个事件处理器，表示当 timeupdate 事件发生时，将调用名为 progressUpdate() 的 JavaScript 函数。

<source src="butterfly.mp4" type="video/mp4">

  • <source> 标签用于指定多个视频源文件，浏览器会根据支持情况选择使用哪个文件。

  • src="butterfly.mp4" 指定视频文件路径。

  • type="video/mp4" 指定视频格式为 MP4。

<source src="butterfly.webm" type="video/webm">

  • 同上，提供另一个视频源文件，格式为 WebM。

</video>

  • 结束 <video> 标签。

</div>

  • 结束 videoContainer div。

<div class="barContainer">

  • 另一个容器 div，用于包裹进度条相关元素。

<div id="durationBar">

  • 定义一个用于显示视频总时长的容器。

<div id="positionBar"><span id="displayStatus">进度条.</span></div>

  • 嵌套的 div 和 span 元素，用于展示当前播放进度和状态信息。

  • id="positionBar" 表示当前播放位置的条形区域。

  • <span id="displayStatus">进度条.</span> 是一个内联容器，用于显示文字提示，如“进度条”。

</div></div>

  • 结束 durationBar 和 barContainer div。

<div class="btn">

  • 定义一个按钮容器，用于放置控制按钮。

<button onclick="play()">播放</button>

  • <button> 创建一个按钮。

  • onclick="play()" 表示点击按钮时调用 play() 函数，用于播放视频。

<button onclick="pause()">暂停</button>

  • 类似地，点击此按钮调用 pause() 函数，用于暂停视频。

<button onclick="stop()">停止</button>

  • 点击此按钮调用 stop() 函数，用于停止视频播放。

<button onclick="speedUp()">加速播放</button>

  • 点击此按钮调用 speedUp() 函数，用于加快视频播放速度。

<button onclick="slowDown()">减速播放</button>

  • 点击此按钮调用 slowDown() 函数，用于减慢视频播放速度。

<button onclick="normalSpeed()">正常速度</button>

  • 点击此按钮调用 normalSpeed() 函数，用于恢复视频的正常播放速度。

</div>

  • 结束 btn div。

</body>

  • 结束 <body> 标签。

整体来看，这段代码构建了一个基础的 HTML 视频播放器界面，包含播放控制按钮和进度条显示区域，但未包含实际的 JavaScript 实现逻辑。


下面是js代码逻辑讲解：

<script>
    var video;
    var display;

    window.onload = function() {
      video = document.getElementById("videoPlayer");//获取videoPlayer元素

      display = document.getElementById("displayStatus");

      video.onplaying = function() {
       //alert(1);
      }
      video.onpause = function() {
        display.innerHTML = "暂停";
      }
    }
    //进程更新函数
  //currentTime属性自然改变，触发ontimeupdate事件

//  1. 获取视频的当前时间点，将它保存在currentTime属性中
//  2.（当前时间点/视频的总的播放时间）保存到durantion属性中
//  3. 转换为#positionBar 百分比长度。
//  时间变化显示于进度条中：
    function progressUpdate() {
      var positionBar = document.getElementById("positionBar");
    //currentTime--当前的播放位置
    //duration--媒介时长
    //(video.currentTime / video.duration * 100)得到一个浮点数
    //即： positionBar.style.width=百分数，它 长度是相对于#durationBar而言的
      positionBar.style.width = (video.currentTime / video.duration * 100)  + "%";//播放时进度条的宽
      displayStatus.innerHTML = (Math.round(video.currentTime*100)/100) ;//播放时进度条的文字
    }

    function play() {//播放函数
      video.play();
    }

    function pause() {
      video.pause();
    }
//currentTime人为地改变当前播放位置改变，触发timeUpdate事件
    function stop() {
      video.pause();
      video.currentTime = 0;
    }

    function speedUp() {
      video.play();
      video.playbackRate = 2;
    }

    function slowDown() {
      video.play();
      video.playbackRate = 0.5;
    }

    function normalSpeed() {
      video.play();
      video.playbackRate = 1;
    }

  </script>


下面详细讲解：


var video;
var display;


定义两个全局变量 `video` 和 `display`，用于存储视频元素和显示状态的元素引用。


window.onload = function() {

  • 当页面完全加载完成后执行函数。

  video = document.getElementById("videoPlayer");//获取videoPlayer元素

  • 使用 document.getElementById() 方法获取 ID 为 "videoPlayer" 的 HTML 元素（即 <video> 标签），并将其赋值给全局变量 video。

  display = document.getElementById("displayStatus");

  • 获取 ID 为 "displayStatus" 的 HTML 元素（即 <span> 标签），并将其赋值给全局变量 display。

  video.onplaying = function() {
   //alert(1);
  }

  • 为视频元素设置 onplaying 事件处理器，当视频开始播放时触发。当前代码中注释掉了一个 alert 调用。

  video.onpause = function() {
    display.innerHTML = "暂停";
  }

  • 为视频元素设置 onpause 事件处理器，当视频暂停时触发，将显示状态元素的 HTML 内容设置为 "暂停"。

}

  • 结束 window.onload 函数。

//进程更新函数
//currentTime属性自然改变，触发ontimeupdate事件

  • 注释说明：进度更新函数，当 currentTime 属性自然改变时触发 ontimeupdate 事件。

//  1. 获取视频的当前时间点，将它保存在currentTime属性中
//  2.（当前时间点/视频的总的播放时间）保存到durantion属性中
//  3. 转换为#positionBar 百分比长度。
//  时间变化显示于进度条中：

  • 详细注释说明进度条更新的逻辑步骤。

function progressUpdate() {

  • 定义名为 progressUpdate 的函数，用于更新播放进度。

  var positionBar = document.getElementById("positionBar");

  • 获取 ID 为 "positionBar" 的 HTML 元素（即进度条），并将其赋值给局部变量 positionBar。

		//currentTime--当前的播放位置
		//duration--媒介时长
		//(video.currentTime / video.duration * 100)得到一个浮点数
		//即： positionBar.style.width=百分数，它 长度是相对于#durationBar而言的

  • 注释说明：currentTime 表示当前播放位置，duration 表示视频总时长，计算结果为百分比。

  positionBar.style.width = (video.currentTime / video.duration * 100)  + "%";//播放时进度条的宽

  • 设置 positionBar 元素的宽度为当前播放位置占总时长的百分比，实现进度条动态更新。

  displayStatus.innerHTML = (Math.round(video.currentTime*100)/100) ;//播放时进度条的文字

  • 将当前播放时间显示在进度条文字区域，使用 Math.round() 四舍五入到小数点后两位。

}

  • 结束 progressUpdate 函数。

function play() {//播放函数
  video.play();
}

  • 定义 play 函数，调用视频元素的 play() 方法开始播放视频。

function pause() {
  video.pause();
}

  • 定义 pause 函数，调用视频元素的 pause() 方法暂停播放视频。

//currentTime人为地改变当前播放位置改变，触发timeUpdate事件

  • 注释说明：通过人为改变 currentTime 属性来改变播放位置并触发 timeUpdate 事件。

function stop() {
  video.pause();
  video.currentTime = 0;
}

  • 定义 stop 函数，先暂停视频，然后将 currentTime 属性设置为 0，实现停止功能。

function speedUp() {
  video.play();
  video.playbackRate = 2;
}

  • 定义 speedUp 函数，先播放视频，然后将 playbackRate 属性设置为 2，实现加速播放。

function slowDown() {
  video.play();
  video.playbackRate = 0.5;
}

  • 定义 slowDown 函数，先播放视频，然后将 playbackRate 属性设置为 0.5，实现减速播放。

function normalSpeed() {
  video.play();
  video.playbackRate = 1;
}

  • 定义 normalSpeed 函数，先播放视频，然后将 playbackRate 属性设置为 1，实现正常播放速度。

}

  • 结束整个 JavaScript 代码块。

标签：