鍍金池/ 問答/HTML5  HTML/ 如何在網(wǎng)頁上播放 mpeg-2 傳輸流（ts格式視頻文件）？

如何在網(wǎng)頁上播放 mpeg-2 傳輸流（ts格式視頻文件）？

用戶上傳了一個(gè)ts格式的視頻，上傳成功后，我需要讓這個(gè)視頻在頁面上顯示并能播放。HTML5好像不支持ts格式的視頻播放？求教該怎么處理

回答
編輯回答
老梗

使用ffmpeg就可以將mp4的視頻轉(zhuǎn)換成m3u8的文件以及一堆ts類型的文件，所以反過來，只要將ts文件封裝成m3u8,再把m3u8轉(zhuǎn)mp4就可以直接放到video標(biāo)簽中了。
ffmpeg -i 你的m3u8地址 -acodec copy -vcodec copy -f mp4 output.mp4
下面是一個(gè)playlist.m3u8文件，同目錄下有output001.ts到output142.ts

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-ALLOW-CACHE:YES
#EXT-X-TARGETDURATION:15
#EXTINF:11.093667,
output000.ts
#EXTINF:9.633711,
output001.ts
#EXTINF:10.093756,
output002.ts
#EXTINF:14.889711,
output003.ts
#EXTINF:8.925756,
output004.ts
...
output139.ts
#EXTINF:6.006744,
output140.ts
#EXTINF:12.011667,
output141.ts
#EXTINF:7.382700,
output142.ts
#EXT-X-ENDLIST
2017年4月7日 15:47
編輯回答
我甘愿

我做網(wǎng)絡(luò)電視廣告上傳后臺(tái)，視頻格式是ts，需要在web預(yù)覽。方法是由后端轉(zhuǎn)成m3u8格式，返回文件路徑，前端來播放。
safari默認(rèn)支持m3u8.
chrome 用這個(gè)播放 http://videojs.github.io/vide...
在html里長這樣

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>video</title>

    <link  rel="stylesheet">
    <script src="https://unpkg.com/video.js/dist/video.js"></script>
    <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
</head>
<body>

<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268"
       data-setup='{}'>
    <source src="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8" type="application/x-mpegURL">
</video>
</body>
</html>

用node起個(gè)本地服務(wù)，然后訪問就成功了。

var express = require('express');
var app = express();

app.use(express.static(__dirname ));

app.listen(4004);
2017年6月1日 22:03