[html] 第1356天 H5如何播放ts流？

[haizhilin2013]

第1356天 H5如何播放ts流？

3+1官网

我也要出题

[ShihHsing]

H5中如何播放视频资源

在H5中，可以使用 <video> 标签来播放视频资源。<video> 标签是HTML5中新增的标签，它提供了一种简单、便捷的方式来在网页上嵌入视频。下面是一个简单的示例：

<video src="video.mp4" controls></video>

其中，src 属性指定了视频资源的 URL，controls 属性会在视频下方显示播放/暂停、音量、全屏等控制按钮。

此外，还可以使用JavaScript来控制视频的播放。例如，可以使用 play() 方法来开始播放视频，使用 pause() 方法来暂停视频：

const video = document.querySelector('video');
video.play();  // 开始播放视频
video.pause(); // 暂停视频

还可以监听 play 、 pause 、 ended 等事件来实现对视频播放状态的监控和控制：

const video = document.querySelector('video');

video.addEventListener('play', function() {
  console.log('视频开始播放');
});

video.addEventListener('pause', function() {
  console.log('视频暂停');
});

video.addEventListener('ended', function() {
  console.log('视频播放结束');
});

需要注意的是，不同的浏览器支持的视频格式不同。一般来说，常用的视频格式有 MP4 、 WebM 、 Ogg 等。可以通过添加多个 <source> 标签来指定多个不同格式的视频文件，浏览器会自动选择支持的格式进行播放：

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogg" type="video/ogg">
</video>

播放TS流

在 HTML5 中播放 TS 流，需要使用 MSE（Media Source Extensions）技术。MSE 是一个 JavaScript API，可以让我们通过 JavaScript 创建和控制媒体源。MSE API 使得我们可以通过 JavaScript 控制流媒体内容的加载和播放。以下是使用 MSE 播放 TS 流的步骤：

1. 创建 video 元素

<video id="video-player"></video>

2. 创建 MediaSource 对象

const mediaSource = new MediaSource();

3. 为 video 元素设置 src 属性，src 属性为 URL.createObjectURL(mediaSource)

const videoPlayer = document.getElementById('video-player');
videoPlayer.src = URL.createObjectURL(mediaSource);

4. 添加 sourceBuffer 到 MediaSource

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

5. 获取 TS 流，分别添加到 sourceBuffer 中

fetch('your-ts-stream-url')
  .then(response => response.arrayBuffer())
  .then(arrayBuffer => {
    sourceBuffer.appendBuffer(arrayBuffer);
  });

6. 注册 sourceBuffer 的更新事件，当 sourceBuffer 更新时，调用 sourceBuffer 的 appendBuffer 方法，将新的 TS 分片添加到 sourceBuffer 中

sourceBuffer.addEventListener('updateend', function() {
  if (!sourceBuffer.updating && !mediaSource.updating) {
    fetch('your-ts-stream-url')
      .then(response => response.arrayBuffer())
      .then(arrayBuffer => {
        sourceBuffer.appendBuffer(arrayBuffer);
      });
  }
});

7. 播放视频

videoPlayer.play();

注意：不同的视频编码格式需要设置不同的 codecs 值。在步骤 4 中，可以通过 MIME 类型和 codecs 值来指定视频编码格式，以便让浏览器正确地解码和播放视频。