移动端自动播放视频之TS视频

ts 简介

TS（Transport Stream，传输流）是一种封装的格式，它的全称为 MPEG2-TS。是一种视频格式，一般用于实时流媒体和广播电视领域。

Ts 与 Mp4 优势对比

Mp4在 IOS 下可以自动播放，但是在部分安卓机下无法自动播放产生黑屏。
Ts可实现自动播放，IOS8以上和 Android4.4 以上都支持。
基于自动播放的优势，本妹子在本厂的 618 大促主会场及各个活动需求上就用了 Ts 技术。

生成 ts 视频

需要下 ffmpeg 来将 Mp4 转化成 Ts 视频。下面下载操作如下所示：
mac下可以运行

 brew install ffmpeg

windows下可以在 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不兼容，可以以图片第一帧为兜底图片

Apple 自动播放没有声音

Apple 设备会自动播放无声音的声音，您需要引导用户单击视频图标右下角的视频以解锁声音。（在非自动播放模式下没有类似问题）
安卓机型声音没有问题。

npm 插件

根据兼容性问题，本妹子写了个自动播放视频插件 jdyfe-tpl-videots，欢迎小伙伴们使用。

使用方法

cover是指兜底图片，当视频加载或不兼容 TS 时显示。
tsSrc是 TS 视频路径。

import VideoTs from '@zero/jdyfe-tpl-videots';
import React, {Component} from 'react'
export default function Home(props) {
  return (
    <VideoTs className='tsClass' cover='https://img11.360buyimg.com/imagetools/jfs/t1/105707/30/17596/32160/5e8c8ae6Ee2bfd8db/1ef4084de9ec103f.jpg' 
    tsSrc='https://storage.360buyimg.com/xingdianzhang/%E6%B5%8B%E8%AF%95ts.ts'  />
  )
}

Happy coding .. :)

相关链接

博客原文

jdyfe-tpl-videots 包

https://www.reneelab.com.cn/what-is-ts-file-and-how-to-play-ts-video.html

ffmpeg 文档

jsmpeg-player 包