ts简介TS(Transport Stream,传输流)是一种封装的格式,它的全称为MPEG2-TS。是一种视频格式,一般用于实时流媒体和广播电视领域。
Ts与Mp4优势对比Mp4在IOS下可以自动播放,但是在部分安卓机下无法自动播放产生黑屏。Ts可实现自动播放,IOS8以上和Android4.4以上都支持。基于自动播放的优势,本妹子在本厂的618大促主会场及各个活动需求上就用了Ts技术。
生成ts视频需要下ffmpeg来将Mp4转化成Ts视频。下面下载操作如下所示:mac下可以运行
brew install ffmpegwindows下可以在https://ffmpeg.zeranoe.com/builds/中下载。
然后用ffmpeg 转化
ffmpeg -i in.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 -b 0 out.ts还可以控制视频大小(-s),帧速率(-r),视频比特率(-b:v),音频比特率(-b:a),音频通道数(-ac),采样率(-ar ) 以及更多。 有关详细信息,请参阅ffmpeg文档。如下所示
ffmpeg -i in.mp4 -f mpegts \ -codec:v mpeg1video -s 960x540 -b:v 1500k -r 30 -bf 0 \ -codec:a mp2 -ar 44100 -ac 1 -b:a 128k \ out.ts注意:尽量用高质量的MP4来转成Ts,如果在手机上显示,采用比特率1500k即可。ffmpeg -i in.mp4 -f mpegts -codec:v mpeg1video -b:v 1500k -codec:a mp2 out.ts播放ts视频推荐用jsmpeg-player,它是基于jsmpeg封装的npm包。最好准备一个封面,将视频盖住,等视频播发再去掉封面,详情如下:
import React, { useEffect, useState, useRef } from 'react';import './index.less';import JSMpeg from '@cycjimmy/jsmpeg-player';export default function VideoTs(props) { //封面 const cover ='https://img11.360buyimg.com/imagetools/jfs/t1/105707/30/17596/32160/5e8c8ae6Ee2bfd8db/1ef4084de9ec103f.jpg' const tsSrc='https://storage.360buyimg.com/xingdianzhang/%E6%B5%8B%E8%AF%95ts.ts' const hdVideo = useRef(null); var [isCover, setIsCover] = useState(true);//是否用封面覆盖 useEffect(() => { initTs() }, []) function initTs() { let canvas = hdVideo.current.querySelector('.hdVideo-ts'); canvas.style.width = '0px' new JSMpeg.VideoElement(canvas, tsSrc, { canvas, autoplay: true, loop: true, progressive: false,//是否为chunk control: false, poster: cover, preserveDrawingBuffer: true, decodeFirstFrame: true, disableGl: true, }, { audio: false, //静音 onPlay: () => { canvas.style.width = hdVideo.current.clientWidth + 'px' setIsCover(false) } }) } return ( <div ref={hdVideo} className='hdVideo'> {isCover ? <img className="hdVideo-image" src={cover} /> : null} <canvas className="hdVideo-ts"></canvas> </div> );}<!--index.less-->.hdVideo{ width: 750px; height: 400px; .hdVideo-image{ width: 100%; height: 100%; } .hdVideo-ts{ width: 100%; height: 100%; }}注意的坑兼容性问题Ts存在兼容问题,系统版本 < android7 || 系统版本 < ios 11, Ts不兼容,可以以图片第一帧为兜底图片
...