关于html5中标签video播放的新解析-木庄网络博客

本文摘自PHP中文网，作者不言，侵删。

这篇文章主要介绍了关于html5中标签video播放的新解析，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

前端同学要使用 HTML5 播放器视频，必然会使用 video 标签，不过大多数同学只是使用了较简单的功能，其实它本身拥有不凡之力有待我们发现。

首先，我们先来看下 video 最基础的用法：

使用 src 属性
1
2
3
<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
你的浏览器不支持 <code>video</code> 标签。
</video>
使用 source 标签
1
2
3
4
5
<video controls>
  <source src="foo.ogg" type="video/ogg">
  <source src="foo.mp4" type="video/mp4">
  Your browser does not support the <code>video</code> element.
</video>

这是 MDN 关于 video 给出的基本用例。在这里我们简单介绍下两种方法的不同，src 只能赋予 video 一个播放地址，当浏览器不支持这种视频格式的解码时就会出现错误，导致视频播放失败。为了解决这个问题才有了 source 标签，利用多个 source 标签引入不同格式的视频，从上到下解析直到遇到看上述代码当浏览器不支持 ogg 格式时，浏览器会自动播放 foo.mp4。

实用技巧

我们会发现使用 video:src 属性播放视频的时候会经常出现播放失败，我们该怎么做能提升视频播放的质量？

这种情况一般都使用 cdn，为了更保险一般还会将不同的 cdn 厂商分为主用 cdn 和备用 cdn。那么问题来了，我们怎么利用 video 本身的特性并结合 cdn 保证我们的视频播放质量？

<video controls>
  <source src="//a.com/main.mp4" type="video/mp4">
  <source src="//b.com/backup.mp4" type="video/mp4">
  Your browser does not support the <code>video</code> element.
</video>

不难看出，source 标签不仅支持不同视频格式的自动切换，也适用于相同视频格式的失败切换，即 main.mp4 因网络问题无法获取时浏览器会自动切换到 backup.mp4 。

高阶技能

如果大家浏览视频的时候，可以发现很多网站的 video 是这个样子的：

1 2	`<video src="blob:http://abc.com/d0823f0f-2b2a-4fd6-a93a-e4c82173c107">` `</video>`

如果直接访问 blob 这个地址发现并不存在。

这个地址就是映射 Blob 对象的 DOMString，其实 video 属性 src 支持 Blob 的，不过新的标准是使用 srcObject 属性来替代这一个功能，目前代码可以这样写：

const mediaSource = new MediaSource();
const video = document.createElement('video');
try {
  video.srcObject = mediaSource;
} catch (error) {
  video.src = URL.createObjectURL(mediaSource);
}

在这段代码中除了 Blob 对象，还有 MediaSource 对象，让 video 拥有不凡之力的主要因素是浏览器对 MediaSource 对象的支持，才让 JavaScript 对 video 有了更大的操纵空间。关于如何使用 MediaSource 不在本文讲述，大家可以自行查阅，我们要说的是 video 结合 MediaSource 可以做哪些事情？

清晰度无缝切换

点播领域里 mp4 是最普遍、兼容性最好的视频容器，不过 mp4 也有它的局限性，比如常见的清晰度切换，我们是无法像youtube那样做到无缝切换的。我们可以看下普通的mp4播放的网络请求和youtube视频播放的网络请求的区别。

1264337558-5b46d0b161839_articlex[1].png

图1.1 普通mp4的下载请求过程

4187133081-5b46d0d9430b6_articlex[1].png

图1.2 Youtube视频下载请求过程

这两张图不难看出，在默认情况下 mp4 使用一次 http 请求所有的视频数据，Youtube 则分次请求。当然这个描述很不专业，但确实形象。造成这种差异的是 video 不支持流式的视频数据，Youtube 采用的是流式的视频容器 webm，而 mp4 是非流式的。那如何解释清楚流式的视频数据呢，从专业的角度三言两语很难说清楚，但用大白话翻译过来就是流式的视频数据支持分段独立播放，非流式的不可以。换句话说一个10M的视频文件，流式的视频可以把0~1M的数据请求回来单独播放，但是非流式的不可以。

阅读剩余部分