文章: 阅读:

HTML 视频

HTMLHTML

前言

  • 在 HTML 中播放视频的方法有很多种。

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

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

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

1、多媒体标签

标签 描述 备注 🔗
<embed /> 定义内嵌对象。HTML4 中不赞成，HTML5 中允许 H5 新加 🔗
<object> </object> 定义内嵌对象 🔗
<param /> 定义对象的参数 🔗
<audio> </audio> 定义了声音内容 H5 新加 🔗
<video> </video> 定义一个视频或者影片 H5 新加 🔗
<source /> 定义了 media 元素的多媒体资源（<video> 和 <audio>) H5 新加 🔗
<track /> 规定 media 元素的字幕文件或其他包含文本的文件 (<video> 和 <audio>) H5 新加 🔗

2、内联视频的说明

  • 当视频被包含在网页中时，它被称为内联视频。

  • 如果您打算在 web 应用程序中使用内联视频，您需要意识到很多人都觉得内联视频令人恼火。

  • 同时请注意，用户可能已经关闭了浏览器中的内联视频选项。

  • 我们最好的建议是只在用户希望看到内联视频的地方包含它们。一个正面的例子是，在用户需要看到视频并点击某个链接时，会打开页面然后播放视频。

3、视频格式

  • 当前 <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 YES YES YES YES YES (从 25 起)
WebM YES NO YES NO YES
Ogg YES NO YES NO YES

4、属性

4.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 新加 🔗

4.2 < source > 标签属性

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

4.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 新加 🔗

5、播放视频

  • 在 HTML 中播放视频并不容易！

  • 需要谙熟大量技巧，以确保您的视频文件在所有浏览器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能够播放。

  • 在本章，总结了问题和解决方法。

5.1 使用 < embed > 标签

  • <embed> 标签的作用是在 HTML 页面中嵌入多媒体元素。这是一个 HTML5 标签，在 HTML4 中是非法的，但是所有浏览器中都有效。

  • 下面的 HTML 代码显示嵌入网页的 Flash 视频。

  • 示例

    1
    <embed src="https://demo.qianchia.com/media/video/demo/demo4.swf" width="480" height="220" />

  • 效果

  • 问题

    • HTML4 无法识别 <embed> 标签。您的页面无法通过验证。
    • 如果浏览器不支持 Flash，那么视频将无法播放
    • iPad 和 iPhone 不能显示 Flash 视频。
    • 如果您将视频转换为其他格式，那么它仍然不能在所有浏览器中播放。

5.2 使用 < object > 标签

  • <object> 标签的作用是在 HTML 页面中嵌入多媒体元素。

  • 下面的 HTML 片段显示嵌入网页的一段 Flash 视频。

  • 示例

    1
    <object data="https://demo.qianchia.com/media/video/demo/demo4.swf" width="480" height="270"></object>

  • 效果

  • 问题

    • 如果浏览器不支持 Flash，将无法播放视频。
    • iPad 和 iPhone 不能显示 Flash 视频。
    • 如果您将视频转换为其他格式，那么它仍然不能在所有浏览器中播放。

5.3 使用 < video > 标签

  • HTML5 <video> 标签定义了一个视频或者影片。

  • <video> 元素在所有现代浏览器中都支持。

  • 以下 HTML 片段会显示一段嵌入网页的 mp4、ogg 或 webm 格式的视频。

  • 示例

    1
    2
    3
    4
    5
    6
    7
    <video width="480" height="270" controls autoplay>
        <source src="https://demo.qianchia.com/media/video/demo/demo1.mp4" type="video/mp4" />
        <source src="https://demo.qianchia.com/media/video/demo/demo2.ogg" type="video/ogg" />
        <source src="https://demo.qianchia.com/media/video/demo/demo3.webm" type="video/webm" />
            
        您的浏览器不支持 HTML5 video 标签。
    </video>

  • 效果

  • 解析

    • <video> 元素提供了播放、暂停和音量控件来控制视频。
    • 同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸。如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能在加载时保留特定的空间，页面就会根据原始视频的大小而改变。
    • <video> 与 </video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
    • <video> 元素支持多个 <source> 元素。<source> 元素可以链接不同的视频文件，浏览器将使用第一个可识别的格式。

  • 问题

    • 必须把视频转换为很多不同的格式。
    • <video> 元素在老式浏览器中无效。

5.4 最好的 HTML 解决方法

  • 以下实例中使用了 4 种不同的视频格式。HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败，则回退到 <embed> 元素。

  • 示例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <video width="480" height="270" controls autoplay>
        <source src="https://demo.qianchia.com/media/video/demo/demo1.mp4" type="video/mp4" />
        <source src="https://demo.qianchia.com/media/video/demo/demo2.ogg" type="video/ogg" />
        <source src="https://demo.qianchia.com/media/video/demo/demo3.webm" type="video/webm" />

        <object data="https://demo.qianchia.com/media/video/demo/demo4.swf" width="480" height="270">
            <embed src="https://demo.qianchia.com/media/video/demo/demo4.swf" width="480" height="270" />
        </object>
    </video>

  • 效果

  • 问题

    • 必须把视频转换为很多不同的格式。

5.5 使用超链接

  • 如果网页包含指向媒体文件的超链接，大多数浏览器会使用 “辅助应用程序” 来播放文件。

  • 以下代码片段显示指向 AVI 文件的链接。如果用户点击该链接，浏览器会启动”辅助应用程序”，比如 Windows Media Player 来播放这个 AVI 文件。

  • 示例

    1
    <a href="https://demo.qianchia.com/media/video/demo/demo1.mp4">播放视频文件</a>

  • 效果

    播放视频文件

5.6 优酷解决方案

  • 在 HTML 中显示视频的最简单的方法是使用优酷等视频网站。

  • 如果您希望在网页中播放视频，那么您可以把视频上传到优酷等视频网站，然后在您的网页中插入 HTML 代码即可播放视频。

  • 你可以在各大视频网站的分享入口，找到嵌入的 HTML 代码。

6、DOM 属性、方法、事件

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

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

6.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 设置或返回音频/视频的音量 🔗

6.2 音频/视频 方法

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

6.3 音频/视频 事件

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

7、使用 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/demo/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。

8、浏览器支持

元素
video 支持 9.0 支持 支持 支持
  • 表格中的数字表示支持该元素的第一个浏览器版本号。

如果您觉得阅读本文对您有帮助，请用微信、支付宝 or QQ 扫码赞助，您的支持是我写作最大的动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文链接，否则保留追究法律责任的权利。

Qian Chia

Posted @ 2019-10-26 20:20


评论


文章目录
  1. 1. 前言
  2. 2. 1、多媒体标签
  3. 3. 2、内联视频的说明
  4. 4. 3、视频格式
  5. 5. 4、属性
    1. 5.1. 4.1 < video > 标签属性
    2. 5.2. 4.2 < source > 标签属性
    3. 5.3. 4.3 < track > 标签属性
  6. 6. 5、播放视频
    1. 6.1. 5.1 使用 < embed > 标签
    2. 6.2. 5.2 使用 < object > 标签
    3. 6.3. 5.3 使用 < video > 标签
    4. 6.4. 5.4 最好的 HTML 解决方法
    5. 6.5. 5.5 使用超链接
    6. 6.6. 5.6 优酷解决方案
  7. 7. 6、DOM 属性、方法、事件
    1. 7.1. 6.1 音频/视频 属性
    2. 7.2. 6.2 音频/视频 方法
    3. 7.3. 6.3 音频/视频 事件
  8. 8. 7、使用 DOM 进行控制
  9. 9. 8、浏览器支持
隐藏目录