HTML5 Video 视频

前言

  • 直到现在,仍然不存在一项旨在网页上显示视频的标准。

  • 今天,大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。

  • HTML5 规定了一种通过 video 元素来包含视频的标准方法。

标签 描述 备注 🔗
<video> </video> 定义一个视频或者影片 H5 新加 🔗
<source /> 定义了 media 元素的多媒体资源(<video><audio>) H5 新加 🔗
<track /> 规定 media 元素的字幕文件或其他包含文本的文件 (<video><audio>) H5 新加 🔗

1、实例

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <!DOCTYPE html>

    <html>

    <head>
    <meta charset="utf-8" />
    <title>Qian Chia 工作室</title>
    </head>

    <body>
    <video width="320" height="240" controls>
    <source src="https://demo.qianchia.com/media/video/demo1.mp4" type="video/mp4" />

    您的浏览器不支持 HTML5 video 标签。
    </video>
    </body>

    </html>
  • 效果

  • 解析

    • <video> 元素提供了播放、暂停和音量控件来控制视频。

    • 同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸。如果设置的高度和宽度,所需的视频空间会在页面加载时保留。如果没有设置这些属性,浏览器不知道大小的视频,浏览器就不能在加载时保留特定的空间,页面就会根据原始视频的大小而改变。

    • <video></video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。

    • <video> 元素支持多个 <source> 元素。<source> 元素可以链接不同的视频文件,浏览器将使用第一个可识别的格式。

2、视频格式

  • 当前 <video> 元素支持三种视频格式:MP4,WebM 和 Ogg。
格式 MIME-type 描述
MP4 video/mp4 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM video/webm 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
Ogg video/ogg 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
  • 浏览器对视频格式的支持
浏览器 MP4 WebM Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES NO NO
Opera YES (从 Opera 25 起) YES YES

3、属性

3.1 < video > 标签属性

属性 描述 备注 🔗
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放 H5 新加 🔗
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮 H5 新加 🔗
height pixels 设置视频播放器的高度 H5 新加 🔗
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放 H5 新加 🔗
muted muted 如果出现该属性,视频的音频输出为静音 H5 新加 🔗
poster URL 规定视频正在下载时显示的图像,直到用户点击播放按钮 H5 新加 🔗
preload auto
metadata
none
如果出现该属性,则视频在页面加载时进行加载,并预备播放。
如果使用 “autoplay”,则忽略该属性
H5 新加 🔗
src URL 要播放的视频的 URL H5 新加 🔗
width pixels 设置视频播放器的宽度 H5 新加 🔗

3.2 < source > 标签属性

属性 描述 备注 🔗
media media_query 规定媒体资源的类型,供浏览器决定是否下载 H5 新加 🔗
src URL 规定媒体文件的 URL H5 新加 🔗
type MIME_type 规定媒体资源的 MIME 类型 H5 新加 🔗

3.3 < track > 标签属性

属性 描述 备注 🔗
default default 规定该轨道是默认的。如果用户没有选择任何轨道,则使用默认轨道 H5 新加 🔗
kind captions
chapters
descriptions
metadata
subtitles
规定文本轨道的文本类型 H5 新加 🔗
label text 规定文本轨道的标签和标题 H5 新加 🔗
src URL 必需的。规定轨道文件的 URL H5 新加 🔗
srclang language_code 规定轨道文本数据的语言。如果 kind 属性值是 “subtitles”,则该属性是必需的 H5 新加 🔗

4、DOM 属性、方法、事件

  • HTML5 DOM 为 <audio><video> 元素提供了方法、属性和事件。

  • 这些方法、属性和事件允许您使用 JavaScript 来操作 <audio><video> 元素。

4.1 音频/视频 属性

属性 描述 备注 🔗
audioTracks 返回表示可用音频轨道的 AudioTrackList 对象 🔗
autoplay 设置或返回是否在加载完成后随即播放音频/视频 🔗
buffered 返回表示音频/视频已缓冲部分的 TimeRanges 对象 🔗
controller 返回表示音频/视频当前媒体控制器的 MediaController 对象 🔗
controls 设置或返回音频/视频是否显示控件(比如播放/暂停等) 🔗
crossOrigin 设置或返回音频/视频的 CORS 设置
currentSrc 返回当前音频/视频的 URL 🔗
currentTime 设置或返回音频/视频中的当前播放位置(以秒计) 🔗
defaultMuted 设置或返回音频/视频默认是否静音 🔗
defaultPlaybackRate 设置或返回音频/视频的默认播放速度 🔗
duration 返回当前音频/视频的长度(以秒计) 🔗
ended 返回音频/视频的播放是否已结束 🔗
error 返回表示音频/视频错误状态的 MediaError 对象 🔗
loop 设置或返回音频/视频是否应在结束时重新播放 🔗
mediaGroup 设置或返回音频/视频所属的组合(用于连接多个音频/视频元素) 🔗
muted 设置或返回音频/视频是否静音 🔗
networkState 返回音频/视频的当前网络状态 🔗
paused 设置或返回音频/视频是否暂停 🔗
playbackRate 设置或返回音频/视频播放的速度 🔗
played 返回表示音频/视频已播放部分的 TimeRanges 对象 🔗
preload 设置或返回音频/视频是否应该在页面加载后进行加载 🔗
readyState 返回音频/视频当前的就绪状态 🔗
seekable 返回表示音频/视频可寻址部分的 TimeRanges 对象 🔗
seeking 返回用户是否正在音频/视频中进行查找 🔗
src 设置或返回音频/视频元素的当前来源 🔗
startDate 返回表示当前时间偏移的 Date 对象 🔗
textTracks 返回表示可用文本轨道的 TextTrackList 对象 🔗
videoTracks 返回表示可用视频轨道的 VideoTrackList 对象 🔗
volume 设置或返回音频/视频的音量 🔗

4.2 音频/视频 方法

方法 描述 备注 🔗
addTextTrack() 向音频/视频添加新的文本轨道 🔗
canPlayType() 检测浏览器是否能播放指定的音频/视频类型 🔗
load() 重新加载音频/视频元素 🔗
play() 开始播放音频/视频 🔗
pause() 暂停当前播放的音频/视频 🔗

4.3 音频/视频 事件

事件 描述 备注 🔗
abort 当音频/视频的加载已放弃时触发 🔗
canplay 当浏览器可以开始播放音频/视频时触发 🔗
canplaythrough 当浏览器可在不因缓冲而停顿的情况下进行播放时触发 🔗
durationchange 当音频/视频的时长已更改时触发 🔗
emptied 当目前的播放列表为空时触发
ended 当目前的播放列表已结束时触发 🔗
error 当在音频/视频加载期间发生错误时触发 🔗
loadeddata 当浏览器已加载音频/视频的当前帧时触发 🔗
loadedmetadata 当浏览器已加载音频/视频的元数据时触发 🔗
loadstart 当浏览器开始查找音频/视频时触发 🔗
pause 当音频/视频已暂停时触发 🔗
play 当音频/视频已开始或不再暂停时触发 🔗
playing 当音频/视频在因缓冲而暂停或停止后已就绪时触发 🔗
progress 当浏览器正在下载音频/视频时触发 🔗
ratechange 当音频/视频的播放速度已更改时触发 🔗
seeked 当用户已移动/跳跃到音频/视频中的新位置时触发 🔗
seeking 当用户开始移动/跳跃到音频/视频中的新位置时触发 🔗
stalled 当浏览器尝试获取媒体数据,但数据不可用时触发 🔗
suspend 当浏览器刻意不获取媒体数据时触发 🔗
timeupdate 当目前的播放位置已更改时触发 🔗
volumechange 当音量已更改时触发 🔗
waiting 当视频由于需要缓冲下一帧而停止时触发 🔗

5、使用 DOM 进行控制

  • HTML5 <video><audio> 元素同样拥有方法、属性和事件。

  • <video><audio> 元素的方法、属性和事件可以使用 JavaScript 进行控制.

  • 其中的方法用于播放、暂停以及加载等。其中的属性(比如时长、音量等)可以被读取或设置。其中的 DOM 事件能够通知您,比方说,<video> 元素开始播放、已暂停,已停止,等等。

  • 实例,为视频创建简单的播放/暂停以及调整尺寸控件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <div style="text-align:center">
    <button onclick="playPause()">播放/暂停</button>
    <button onclick="makeBig()">放大</button>
    <button onclick="makeSmall()">缩小</button>
    <button onclick="makeNormal()">普通</button>
    <br /><br />

    <video id="video1" width="420">
    <source src="https://demo.qianchia.com/media/video/demo1.mp4" type="video/mp4" />
    您的浏览器不支持 HTML5 video 标签。
    </video>
    </div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <script>
    var myVideo = document.getElementById("video1");

    function playPause() {
    if (myVideo.paused) {
    myVideo.play();
    } else {
    myVideo.pause();
    }
    }

    function makeBig() {
    myVideo.width = 560;
    }

    function makeSmall() {
    myVideo.width = 320;
    }

    function makeNormal() {
    myVideo.width = 420;
    }
    </script>
  • 效果

  • 例中简单的方法,向我们演示了如何使用 <video> 元素,读取并设置属性,以及如何调用方法。

  • 上面的例子调用了两个方法:play() 和 pause()。它同时使用了两个属性:paused 和 width。

6、浏览器支持

元素
video 支持 9.0 支持 支持 支持
  • 表格中的数字表示支持该元素的第一个浏览器版本号。
文章目录
  1. 1. 前言
  2. 2. 1、实例
  3. 3. 2、视频格式
  4. 4. 3、属性
    1. 4.1. 3.1 < video > 标签属性
    2. 4.2. 3.2 < source > 标签属性
    3. 4.3. 3.3 < track > 标签属性
  5. 5. 4、DOM 属性、方法、事件
    1. 5.1. 4.1 音频/视频 属性
    2. 5.2. 4.2 音频/视频 方法
    3. 5.3. 4.3 音频/视频 事件
  6. 6. 5、使用 DOM 进行控制
  7. 7. 6、浏览器支持
隐藏目录