关于html5中标签video播放的新解析-

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

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

• 使用 src 属性

• 使用 source 标签

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

实用技巧

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

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

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

高阶技能

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

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

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

const mediaSource = new MediaSource();
const video = document.createElement(&＃39;video&＃39;);
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视频播放的网络请求的区别。

图1.5 mp4视频清晰度切换流程示意图

这个过程看上去比较繁琐，但是所有的操作都是在浏览器端完成，也就是说都是JS来实现的。这样之前说的所有成本问题都不存在，还能做到youtube相同体验的无缝切换。如果大家也想使用这个功能不需要自己再去实现一遍上述流程，可以使用如下代码：

import Player from &＃39;xgplayer&＃39;;
import &＃39;xgplayer-mp4&＃39;;

let player = new Player({
      el:document.querySelector(&＃39;#mse&＃39;),
      url: [{src:&＃39;/mp4/&＃39;,type:"video/mp4"},{src:&＃39;/mp5/&＃39;,type:&＃39;video/mp4&＃39;}]
});

player.emit(&＃39;resourceReady&＃39;, [{name: &＃39;高清&＃39;, url: &＃39;/mp4/&＃39;,cname:&＃39;高清&＃39;}, {name: &＃39;超清&＃39;, url: &＃39;/mp5/&＃39;,cname:&＃39;超清&＃39;}]);

如果对这段代码有什么疑惑或者想深入了解下它背后是如何实现的可以参考 文档 或者 Github。

节省视频流量

我们平时直接使用video加载视频，大概是这样的：

图2.2 播放器加载视频原理

• 设置每次加载的数据包大小

• 设置预加载时长

• 开启加载队列，完成第一次数据包下载，判断缓冲时间和预加载时长是否满足，不满足请求下一个数据包

具体实现代码如下：

  import Player from &＃39;xgplayer&＃39;;
  import &＃39;xgplayer-mp4&＃39;;
  const player = new Player({
    id:&＃39;vs&＃39;,
    url:&＃39;//abc.com/a/mp4&＃39;,
    preloadTime:10
  });

这样就实现了视频在播放过程中永远只预加载10秒的数据，进而保证节省流量。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！