HTML5如何播放ts视频流？

在HTML5中播放.ts（Transport Stream）视频流，通常需要一些额外的工具或库，因为HTML5原生的<video>标签直接支持的视频格式包括MP4、WebM和Ogg Theora等，但并不直接支持.ts格式。不过，你可以通过以下几种方法来实现.ts视频流的播放：

方法一：使用JavaScript库（如video.js和hls.js）

如果你正在处理HLS（HTTP Live Streaming）流，那么hls.js是一个流行的JavaScript库，它可以在现代浏览器中播放HLS流（通常封装在.m3u8播放列表中，但也可以处理纯.ts流）。

1. 引入hls.js库：

   你可以通过CDN引入hls.js库：

   <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
   

2. 创建HTML结构：

   <video id="video" controls></video>
   

3. 使用JavaScript代码播放.ts流：

   <script>
     if (Hls.isSupported()) {
       var video = document.getElementById('video');
       var hls = new Hls();
       hls.loadSource('https://your-ts-stream-url.ts'); // 替换为你的.ts流URL
       hls.attachMedia(video);
       hls.on(Hls.Events.MANIFEST_PARSED, function() {
         video.play();
       });
     } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
       // Safari原生支持HLS
       video.src = 'https://your-ts-stream-url.m3u8'; // 替换为你的HLS播放列表URL
       video.addEventListener('loadedmetadata', function() {
         video.play();
       });
     }
   </script>
   

方法二：将TS流转换为浏览器支持的格式

另一种方法是将.ts流转换为浏览器原生支持的格式（如MP4），然后播放转换后的流。这通常涉及服务器端的工作，比如使用FFmpeg等工具进行实时转换。

1. 在服务器端使用FFmpeg进行转换：

   ffmpeg -i input.ts -c:v copy -c:a aac -f mp4 -movflags +faststart output.mp4
   

   或者实时转换并流式传输：

   ffmpeg -i input.ts -c copy -f mpegts - | cvlc -vvv stream:///dev/stdin --sout '#standard{access=http,mux=ts,dst=:8080/stream}'
   

2. 在HTML中使用<video>标签播放转换后的流：

   <video src="http://your-server-ip:8080/stream" controls></video>
   

方法三：使用WebRTC或其他流媒体技术

对于需要实时性和低延迟的应用，可以考虑使用WebRTC等技术来传输和播放视频流。这通常涉及更多的后端设置和客户端JavaScript代码。

总结

对于简单的播放需求，使用hls.js是一个快速且有效的方法。如果你可以控制服务器端，那么将TS流转换为MP4或其他支持的格式也是一个可行的选择。对于更复杂的应用，可能需要考虑使用WebRTC等更高级的技术。