原文url: 使用 HTML5 视频事件

由这篇文章关联出来的微软web开发

• Web 平台功能的 A-Z 索引
• Internet Explorer / Microsoft Edge API Reference
• JavaScript 语言参考
• html5

HTML5 视频事件提供改进和提高网页效率的方法。

• 为什么要使用事件？
• 我的网页准备好了么？
• 我处于什么位置？
• 现在该按钮可执行哪些操作？
• 该操作已完成？
• 相关主题

** 为什么要使用事件？ **
HTML5 视频对象提供了很多事件，这些事件可以帮助简化和增强网页的内容。 在此处将看到使用事件检查内容是否可用、视频播放状态以及如何在视频中监视当前播放位置的示例。

** 我的网页准备好了么？**
对于使用视频的网页，你会对两种级别的“准备”感兴趣；当加载页面元素时以及当可以播放内容时。
HTML5 视频页面中最常用的第一个任务就是查看浏览器是否支持视频。完成此操作的方法通常为：查看是否在页面上创建了视频元素，以及脚本所需的属性是否可用。如果已在文档对象模型 (DOM) 中加载或创建了元素，则脚本只能检查元素。检查网页元素是否完成加载的最好方法是在 document 对象上使用 DOMContentLoaded 事件。当页面元素完成加载并且基本 DOM 可用时引发此事件。 此示例为调用网页的 "init()" 函数的 DOMContentLoaded 创建处理程序。

*HTML *

//  When the HTML elements load, call init()
  document.addEventListener("DOMContentLoaded", init, false);
 
  //  Rotate the video by 30degrees when image is clicked
  function init() {
    var video = document.getElementById("theVideo");
    if (video) {
      var rotateVal = 0;       //  Global variable to hold current rotation value
      document.getElementById("rotateVideo").addEventListener("click", function () {
        rotateVal = (rotateVal += 30) % 360;  // Calculate the next value, but keep between 0 and 360
        var temp = "rotate(" + rotateVal + "deg)"; // Create a style string
        document.getElementById("theVideo").style.msTransform = temp;  // Set the style
      }, false);
    }
  }

该示例的 "init()" 函数封装了页面脚本部分的所有功能。

另一种方法是按照本主题的示例中的操作放置 <script> 部分。将加载 HTML 部分，然后加载脚本部分。这将确保所有的 HTML 元素均已加载。如果你在 HTML 部分加载任何内容，你可能需要使用 onload 事件来检查其完整性，因为相较于元素，媒体所需的加载时间通常更长。

脚本部分设置多个全局变量，即 "video"、"vLength" 和 "pgFlag"。这些变量提供视频对象、当前已加载的视频的长度（之后用于计算）以及用于跟踪进度的标志。
*HTML *

var video = document.getElementById("Video1");
var vLength;
var pgFlag = ""; // used for progress tracking

然后，测试视频变量以查看 canPlayType 属性是否可用。如果可用，则支持 HTML5 video 元素并且执行所有其他代码。如果不支持视频，则语句 (video.canPlayType) 将返回 False 并显示一条消息。确认支持视频后，通过显示样式启用输入字段。
*HTML *

if (video.canPlayType) {   // tests that we have HTML5 video support

此时，可以在输入字段中键入文件并进行加载。根据视频文件所在的位置，如果任何网络或服务器速度缓慢，则可能会在加载其余部分网页时阻止准备视频。以下示例使用 oncanplay 事件通知何时视频加载内容已足够用于开始播放。引发 oncanplay 事件时，处理程序显示播放控件以通知它已准备就绪可以开始播放了。
*HTML *

// content has loaded, display buttons and set up events
video.addEventListener("canplay", function () {
  document.getElementById("buttonbar").style.display = "block";
}, false);

视频加载到视频对象中时，要加载的首要内容之一就是元数据，它包含有关视频的信息。以下示例使用 onloadedmetadata 事件来确定视频有多长。 当 video 对象获取有关内容的足够信息以了解持续时间后，引发 onloadedmetadata 事件。
*HTML *

//  display video duration when available
video.addEventListener("loadedmetadata", function () {
  vLength = video.duration.toFixed(1);
  document.getElementById("vLen").textContent = vLength; // global variable
}, false);

** 我处于什么位置？**
上一示例显示了如何在加载视频后获取视频的持续时间或长度。视频开始播放后，可以使用 ontimeupdate 事件来获取视频中的当前位置。当 currentTime 属性发生更改时，引发 ontimeupdate 事件。在事件处理程序中，从视频对象中检索 currentTime 的值并进行显示。currentTime 属性是浮点型变量，该变量可以从 12 位中获取小数位置。但是，出于性能方面的考虑，在 Windows Internet Explorer 中一秒内仅引发该事件四次。若要在示例中显示，则需要使用 "toFixed()" 方法将 currentTime 取舍为一位。运行视频时，会更新和显示当前时间。
*HTML *

//  display the current and remaining times
video.addEventListener("timeupdate", function () {
  //  Current time  
  var vTime = video.currentTime;
  document.getElementById("curTime").textContent = vTime.toFixed(1);
  document.getElementById("vRemaining").textContent = (vLength - vTime).toFixed(1);
}, false);

该示例还通过从持续时间中减去当前时间来报告剩余时间。

** 现在该按钮可执行哪些操作？**
在视频播放器控件中的一个常见趋势是在两个状态之间切换按钮，如“播放”****和“暂停”****或者“声音”****和“静音”****。使用 JavaScript 控制 HTML5 视频播放器中的示例在按钮处理程序中实现该操作。例如，在单击“播放”****按钮时，单击处理程序检查 paused 属性并播放或暂停视频播放。播放视频时，它还会将该按钮切换为暂停文本，暂停视频时将该按钮切换为播放文本。大多数时间它都是这样工作的，但如果视频元素启用了 controls，则两个按钮设置无法同步。此示例显示在播放按钮处理程序中暂停属性的用法。
*HTML *

//  play video
                function vidplay(evt) {
                    if (video.src == "") {  // inital source load
                        getVideo();
                    }
                    button = evt.target; //  get the button id to swap the text based on the state                                    
                    if (video.paused) {   // play the file, and display pause symbol
                        video.play();
                        button.textContent = "||";
                    } else {              // pause the file, and display play symbol  
                        video.pause();
                        button.textContent = ">";
                    }
                }

最好是使用 onpause 和 onplaying 事件保持按钮同步。与在单击按钮时只检查暂停属性的上一示例不同，下一示例在视频播放状态更改时切换按钮，而不管按钮如何切换。
*HTML *

//  paused and playing events to control buttons
video.addEventListener("pause", function () {
  document.getElementById("play").textContent = ">";
}, false);

video.addEventListener("playing", function () {
  document.getElementById("play").textContent = "||";
}, false);

在此页面的结尾处尝试该示例并注意外部按钮和视频对象中的内置控件如何保持同步。

可以对 onvolumechange 事件使用相同的技术以控制静音按钮上的图形。由于没有单独的静音和音量事件，因此下一示例使用 onvolumechange 来处理两个状态。
*HTML *

video.addEventListener("volumechange", function () {
   if (video.muted) {
       // if muted, show mute image 
       document.getElementById("mute").innerHTML = "[站外图片上传中……(3)]";
   } else {
       // if not muted, show not muted image 
      document.getElementById("mute").innerHTML = "[站外图片上传中……(4)]"; 
   }
}, false);

在此示例中，引发 onvolumechange 事件时，"if" 语句测试 muted 属性。如果 video 对象的声道为静音，则显示静音图形；否则显示声音图形。随着图形更改，alt 文本也会更改以提供精确描述作为辅助功能。
注意 在用户将其鼠标悬停在元素上方时，所有按钮、输入元素以及视频元素都使用 title 特性来提供工具提示。这种做法还会为屏幕读取器设备提供标识文本。

** 该操作已完成？**
HTML5 视频播放器需要缓冲用于播放的内容。如果视频内容较大，在页面可能需要管理播放并发送消息以为用户提供更好的体验。例如，如果下载需要的时间较长，则可以使用事件来通知用户出现的问题，而不只是在没有任何说明的情况下停止视频。可以使用 onstalled、onwaiting 或 onended 来确定视频中断时的操作。 下表描述可以用来管理播放和用户期望的事件。

此代码示例是本主题中所示示例的完整代码，它包含显示适用于此处提到的下载和缓冲的事件的内容。
注意 此示例使用图像来表示声音打开