如何在网页上播放 mpeg-2 传输流(ts格式视频文件)?

用户上传了一个ts格式的视频,上传成功后,我需要让这个视频在页面上显示并能播放。HTML5好像不支持ts格式的视频播放?求教该怎么处理

阅读 19.9k
2 个回答
新手上路,请多包涵

我做网络电视广告上传后台,视频格式是ts,需要在web预览。方法是由后端转成m3u8格式,返回文件路径,前端来播放。
safari默认支持m3u8.
chrome 用这个播放 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 href="https://unpkg.com/video.js/dist/video-js.css" 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起个本地服务,然后访问就成功了。

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

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

app.listen(4004);

使用ffmpeg就可以将mp4的视频转换成m3u8的文件以及一堆ts类型的文件,所以反过来,只要将ts文件封装成m3u8,再把m3u8转mp4就可以直接放到video标签中了。
ffmpeg -i 你的m3u8地址 -acodec copy -vcodec copy -f mp4 output.mp4
下面是一个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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏