返回

浏览器播放视频流实践指南

前端

作为一名小白前端，我最近接到了一个播放视频流的项目。虽然之前也有一些视频播放的经验，但这次的要求比较复杂，需要同时播放多个视频流。而且，视频流的格式也不尽相同，有HLS、MPEG-DASH和Smooth Streaming。

一开始，我信心满满，觉得这对我来说应该不是什么难事。然而，当我真正开始做的时候，却遇到了各种各样的问题。比如，视频流卡顿、视频黑屏、音视频不同步等。

为了解决这些问题，我查阅了大量的资料，并请教了其他工程师。最后，终于摸索出了一些经验。现在，我就把我的一些经验分享给大家，希望能帮助到有需要的人。

视频流格式

视频流格式有很多种，最常见的有HLS、MPEG-DASH和Smooth Streaming。

  • HLS（HTTP Live Streaming）：HLS是苹果公司开发的一种流媒体传输协议。它将视频流分割成小的片段，然后通过HTTP协议传输到客户端。HLS是目前最流行的视频流格式，支持所有主流的浏览器。
  • MPEG-DASH（Dynamic Adaptive Streaming over HTTP）：MPEG-DASH是一种国际标准的流媒体传输协议。它与HLS类似，也将视频流分割成小的片段，然后通过HTTP协议传输到客户端。MPEG-DASH的主要优势在于它支持自适应比特率（ABR），可以根据网络情况自动调整视频质量。
  • Smooth Streaming：Smooth Streaming是微软公司开发的一种流媒体传输协议。它与HLS和MPEG-DASH类似，也将视频流分割成小的片段，然后通过HTTP协议传输到客户端。Smooth Streaming的主要优势在于它支持平滑切换（Smooth Switch），可以无缝地切换到不同质量的视频流。

浏览器播放视频流

浏览器播放视频流需要用到HTML5 video标签。HTML5 video标签支持所有主流的视频流格式，并提供了丰富的API。

为了播放视频流，我们需要先创建一个HTML5 video标签，然后设置video标签的src属性。src属性的值就是视频流的URL。

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
</video>

上面的代码中，我们创建了一个HTML5 video标签，并设置了video标签的src属性。src属性的值是两个视频文件的URL，一个是MP4格式的，另一个是OGG格式的。

当浏览器加载页面时，它会自动选择一个合适的视频文件进行播放。如果浏览器不支持MP4格式，那么它就会选择OGG格式的视频文件进行播放。

Media Source Extensions

Media Source Extensions（MSE）是HTML5的一个扩展标准，它允许我们在运行时动态地向video标签添加视频流。

MSE的主要优点在于它支持自适应比特率（ABR），可以根据网络情况自动调整视频质量。而且，MSE还支持平滑切换（Smooth Switch），可以无缝地切换到不同质量的视频流。

为了使用MSE，我们需要先创建一个MediaSource对象，然后将MediaSource对象添加到video标签的src属性中。

var mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);

上面的代码中，我们创建了一个MediaSource对象，并将MediaSource对象添加到video标签的src属性中。

接下来，我们需要创建一个SourceBuffer对象，然后将SourceBuffer对象添加到MediaSource对象中。

var sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');

上面的代码中，我们创建了一个SourceBuffer对象，并将其添加到MediaSource对象中。

最后，我们需要将视频流数据添加到SourceBuffer对象中。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'video.mp4');
xhr.responseType = 'arraybuffer';
xhr.onload = function() {
  sourceBuffer.appendBuffer(xhr.response);
};
xhr.send();

上面的代码中，我们使用XMLHttpRequest对象加载视频流数据，然后将视频流数据添加到SourceBuffer对象中。

WebRTC

WebRTC（Web Real-Time Communication）是HTML5的一个扩展标准，它允许我们在浏览器中进行实时通信。

WebRTC的主要优点在于它支持点对点通信，可以实现低延迟、高可靠的视频通话。而且，WebRTC还支持多媒体共享，可以实现多人同时在线视频通话。

为了使用WebRTC，我们需要先创建一个RTCPeerConnection对象，然后创建一个RTCDataChannel对象。

var peerConnection = new RTCPeerConnection();
var dataChannel = peerConnection.createDataChannel('video');

上面的代码中，我们创建了一个RTCPeerConnection对象，并创建了一个RTCDataChannel对象。

接下来，我们需要将RTCPeerConnection对象添加到页面中。

document.body.appendChild(peerConnection);

上面的代码中，我们将RTCPeerConnection对象添加到页面中。

最后，我们需要将RTCDataChannel对象添加到video标签中。

video.src = URL.createObjectURL(dataChannel);

上面的代码中，我们将RTCDataChannel对象添加到video标签中。

播放HLS流

现在，我们来详细说明一下如何播放HLS流。

首先，我们需要创建一个HTML5 video标签，然后设置video标签的src属性。src属性的值就是HLS流的URL。

<video width="320" height="240" controls>
  <source src="video.m3u8" type="application/x-mpegURL">
</video>

上面的代码中，我们创建了一个HTML5 video标签，并设置了video标签的src属性。src属性的值是HLS流的URL。

接下来，我们需要创建一个MediaSource对象，然后将MediaSource对象添加到video标签的src属性中。

var mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);

上面的代码中，我们创建了一个MediaSource对象，并将MediaSource对象添加到video标签的src属性中。

接下来，我们需要创建一个SourceBuffer对象，然后将SourceBuffer对象添加到MediaSource对象中。

var sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');

上面的代码中，我们创建了一个SourceBuffer对象，并将其添加到MediaSource对象中。

最后，我们需要将HLS流数据添加到SourceBuffer对象中。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'video.m3u8');
xhr.responseType = 'text';
xhr.onload = function() {
  var manifest = xhr.response;
  var segments = manifest.split('\n');
  for (var i = 0; i < segments.length; i++) {
    if (segments[i].indexOf('.ts') > -1) {
      var xhr2 = new XMLHttpRequest();
      xhr2.open('GET', segments[i]);
      xhr2.responseType = 'arraybuffer';
      xhr2.onload = function() {
        sourceBuffer.appendBuffer(xhr2.response);
      };
      xhr2.send();
    }
  }
};
xhr.send();

上面的代码中，我们使用XMLHttpRequest对象加载HLS流数据，然后将HLS流数据添加到SourceBuffer对象中。

实验过程

现在，我们来做一个小实验，验证一下我们刚才讲的这些内容。

首先，我们需要创建一个HTML页面，然后将以下代码添加到HTML页面中。

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <video width="320" height="240" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
  </video>
  <script>
    var video = document.querySelector('video');
    var mediaSource = new MediaSource();
    video.src = URL.createObjectURL(mediaSource);
    var sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'video.mp4');