网页元素接口之 <video> 与 <audio> 元素

<video>,<audio>

[TOC]

概述

<video>元素用来加载视频,是HTMLVideoElement对象的实例。<audio>元素用来加载音频,是HTMLAudioElement对象的实例。而HTMLVideoElementHTMLAudioElement都继承了HTMLMediaElement,所以这两个 HTML 元素有许多共同的属性和方法,可以放在一起介绍。

理论上,这两个 HTML 元素直接用src属性指定媒体文件,就可以使用了。

  1. <audio src="background_music.mp3"/>
  2. <video src="news.mov" width=320 height=240/>

注意,<video>元素有width属性和height属性,可以指定宽和高。<audio>元素没有这两个属性,因为它的播放器外形是浏览器给定的,不能指定。

实际上,不同的浏览器支持不同的媒体格式,我们不得不用<source>元素指定同一个媒体文件的不同格式。

  1. <audio id="music">
  2. <source src="music.mp3" type="audio/mpeg">
  3. <source src="music.ogg" type='audio/ogg; codec="vorbis"'>
  4. </audio>

浏览器遇到支持的格式,就会忽略后面的格式。

这两个元素都有一个controls属性,只有打开这个属性,才会显示控制条。注意,<audio>元素如果不打开controls属性,根本不会显示,而是直接在背景播放。

HTMLMediaElement 接口

HTMLMediaElement并没有对应的 HTML 元素,而是作为<video><audio>的基类,定义一些它们共同的属性和方法。

HTMLMediaElement接口有以下属性。

  • HTMLMediaElement.audioTracks:返回一个类似数组的对象,表示媒体文件包含的音轨。
  • HTMLMediaElement.autoplay:布尔值,表示媒体文件是否自动播放,对应 HTML 属性autoplay
  • HTMLMediaElement.buffered:返回一个 TimeRanges 对象,表示浏览器缓冲的内容。该对象的length属性返回缓存里面有多少段内容,start(rangeId)方法返回指定的某段内容(从0开始)开始的时间点,end()返回指定的某段内容结束的时间点。该属性只读。
  • HTMLMediaElement.controls:布尔值,表示是否显示媒体文件的控制栏,对应 HTML 属性controls
  • HTMLMediaElement.controlsList:返回一个类似数组的对象,表示是否显示控制栏的某些控件。该对象包含三个可能的值:nodownloadnofullscreennoremoteplayback。该属性只读。
  • HTMLMediaElement.crossOrigin:字符串,表示跨域请求时是否附带用户信息(比如 Cookie),对应 HTML 属性crossorigin。该属性只有两个可能的值:anonymoususe-credentials
  • HTMLMediaElement.currentSrc:字符串,表示当前正在播放的媒体文件的绝对路径。该属性只读。
  • HTMLMediaElement.currentTime:浮点数,表示当前播放的时间点。
  • HTMLMediaElement.defaultMuted:布尔值,表示默认是否关闭音量,对应 HTML 属性muted
  • HTMLMediaElement.defaultPlaybackRate:浮点数,表示默认的播放速率,默认是1.0。
  • HTMLMediaElement.disableRemotePlayback:布尔值,是否允许远程回放,即远程回放的时候是否会有工具栏。
  • HTMLMediaElement.duration:浮点数,表示媒体文件的时间长度(单位秒)。如果当前没有媒体文件,该属性返回0。该属性只读。
  • HTMLMediaElement.ended:布尔值,表示当前媒体文件是否已经播放结束。该属性只读。
  • HTMLMediaElement.error:返回最近一次报错的错误对象,如果没有报错,返回null
  • HTMLMediaElement.loop:布尔值,表示媒体文件是否会循环播放,对应 HTML 属性loop
  • HTMLMediaElement.muted:布尔值,表示音量是否关闭。
  • HTMLMediaElement.networkState:当前网络状态,共有四个可能的值。0表示没有数据;1表示媒体元素处在激活状态,但是还没开始下载;2表示下载中;3表示没有找到媒体文件。
  • HTMLMediaElement.paused:布尔值,表示媒体文件是否处在暂停状态。该属性只读。
  • HTMLMediaElement.playbackRate:浮点数,表示媒体文件的播放速度,1.0是正常速度。如果是负数,表示向后播放。
  • HTMLMediaElement.played:返回一个 TimeRanges 对象,表示播放的媒体内容。该属性只读。
  • HTMLMediaElement.preload:字符串,表示应该预加载哪些内容,可能的值为nonemetadataauto
  • HTMLMediaElement.readyState:整数,表示媒体文件的准备状态,可能的值为0(没有任何数据)、1(已获取元数据)、2(可播放当前帧,但不足以播放多个帧)、3(可以播放多帧,至少为两帧)、4(可以流畅播放)。该属性只读。
  • HTMLMediaElement.seekable:返回一个 TimeRanges 对象,表示一个用户可以搜索的媒体内容范围。该属性只读。
  • HTMLMediaElement.seeking:布尔值,表示媒体文件是否正在寻找新位置。该属性只读。
  • HTMLMediaElement.src:布尔值,表示媒体文件的 URL,对应 HTML 属性src
  • HTMLMediaElement.srcObject:返回src属性对应的媒体文件资源,可能是MediaStreamMediaSourceBlobFile对象。直接指定这个属性,就可以播放媒体文件。
  • HTMLMediaElement.textTracks:返回一个类似数组的对象,包含所有文本轨道。该属性只读。
  • HTMLMediaElement.videoTracks:返回一个类似数组的对象,包含多有视频轨道。该属性只读。
  • HTMLMediaElement.volume:浮点数,表示音量。0.0 表示静音,1.0 表示最大音量。

HTMLMediaElement接口有如下方法。

  • HTMLMediaElement.addTextTrack():添加文本轨道(比如字幕)到媒体文件。
  • HTMLMediaElement.captureStream():返回一个 MediaStream 对象,用来捕获当前媒体文件的流内容。
  • HTMLMediaElement.canPlayType():该方法接受一个 MIME 字符串作为参数,用来判断这种类型的媒体文件是否可以播放。该反复返回一个字符串,有三种可能的值,probably表示似乎可播放,maybe表示无法在不播放的情况下判断是否可播放,空字符串表示无法播放。
  • HTMLMediaElement.fastSeek():该方法接受一个浮点数作为参数,表示指定的时间(单位秒)。该方法将媒体文件移动到指定时间。
  • HTMLMediaElement.load():重新加载媒体文件。
  • HTMLMediaElement.pause():暂停播放。该方法没有返回值。
  • HTMLMediaElement.play():开始播放。该方法返回一个 Promise 对象。

下面是play()方法的一个例子。

  1. var myVideo = document.getElementById('myVideoElement');
  2. myVideo
  3. .play()
  4. .then(() => {
  5. console.log('playing');
  6. })
  7. .catch((error) => {
  8. console.log(error);
  9. });

HTMLVideoElement 接口

HTMLVideoElement接口代表了<video>元素。这个接口继承了HTMLMediaElement接口,并且有一些自己的属性和方法。

HTMLVideoElement 接口的属性。

  • HTMLVideoElement.height:字符串,表示视频播放区域的高度(单位像素),对应 HTML 属性height
  • HTMLVideoElement.width:字符串,表示视频播放区域的宽度(单位像素),对应 HTML 属性width
  • HTMLVideoElement.videoHeight:该属性只读,返回一个整数,表示视频文件自身的高度(单位像素)。
  • HTMLVideoElement.videoWidth:该属性只读,返回一个整数,表示视频文件自身的宽度(单位像素)。
  • HTMLVideoElement.poster:字符串,表示一个图像文件的 URL,用来在无法获取视频文件时替代显示,对应 HTML 属性poster

HTMLVideoElement 接口的方法。

  • HTMLVideoElement.getVideoPlaybackQuality():返回一个对象,包含了当前视频回访的一些数据。

HTMLAudioElement 接口

HTMLAudioElement接口代表了<audio>元素。

该接口继承了HTMLMediaElement,但是没有定义自己的属性和方法。浏览器原生提供一个Audio()构造函数,返回的就是HTMLAudioElement实例。

  1. var song = new Audio([URLString]);

Audio()构造函数接受一个字符串作为参数,表示媒体文件的 URL。如果省略这个参数,可以稍后通过src属性指定。

生成HTMLAudioElement实例以后,不用插入 DOM,可以直接用play()方法在背景播放。

  1. var a = new Audio();
  2. if (a.canPlayType('audio/wav')) {
  3. a.src = 'soundeffect.wav';
  4. a.play();
  5. }

事件

<video><audio>元素有以下事件。

  • loadstart:开始加载媒体文件时触发。
  • progress:媒体文件加载过程中触发,大概是每秒触发2到8次。
  • loadedmetadata:媒体文件元数据加载成功时触发。
  • loadeddata:当前播放位置加载成功后触发。
  • canplay:已经加载了足够的数据,可以开始播放时触发,后面可能还会请求数据。
  • canplaythrough:已经加载了足够的数据,可以一直播放时触发,后面不需要继续请求数据。
  • suspend:已经缓冲了足够的数据,暂时停止下载时触发。
  • stalled:尝试加载数据,但是没有数据返回时触发。
  • play:调用play()方法时或自动播放启动时触发。如果已经加载了足够的数据,这个事件后面会紧跟playing事件,否则会触发waiting事件。
  • waiting:由于没有足够的缓存数据,无法播放或播放停止时触发。一旦缓冲数据足够开始播放,后面就会紧跟playing事件。
  • playing:媒体开始播放时触发。
  • timeupdate:currentTime属性变化时触发,每秒可能触发4到60次。
  • pause:调用pause()方法、播放暂停时触发。
  • seeking:脚本或者用户要求播放某个没有缓冲的位置,播放停止开始加载数据时触发。此时,seeking属性返回true
  • seeked:seeking属性变回false时触发。
  • ended:媒体文件播放完毕时触发。
  • durationchange:duration属性变化时触发。
  • volumechange:音量变回或者静音时触发。
  • ratechange:播放速度或默认的播放速度变化时触发。
  • abort:停止加载媒体文件时触发,通常是用户主动要求停止下载。
  • error:网络或其他原因导致媒体文件无法加载时触发。
  • emptied:由于errorabort事件导致networkState属性变成无法获取数据时触发。


本文转载自 GitHub 开源项目 wangdoc / javascript-tutorial ,用于个人学习,无任何商业用途,该开源项目由阮一峰发起,在此感谢阮一峰老师的无私奉献。如本文有任何变更或修改,也会积极提交到开源项目做贡献。

(完)