TS视频在移动终端上自动播放视频

TS（传输流，传输流）是一种封装格式，其全名是MPEG2-TS. 是一种视频格式，通常用于实时流媒体以及广播和电视领域.

Mp4可以在IOS中自动播放，但不能在某些Android机器上自动播放并生成黑屏.

Ts可以实现自动播放，IOS8或更高版本以及Android4.4或更高版本都支持

.

基于自动回放的优势ts文件音频，这个女孩在618大促销工厂的主要场所和各种活动的需求中使用了Ts技术.

您需要下载ffmpeg才能将Mp4转换为Ts视频. 下载操作如下:

可以在Mac上运行

 brew install ffmpeg

您可以在Windows中下载它.

然后使用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

建议使用jsmpeg-player，它基于jsmpeg软件包npm软件包.

在播放视频后ts文件音频，最好准备好封面，覆盖视频并取下封面. 详细信息如下:

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%;
    }
}

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

Android型号的声音没有问题.

％E6％B5％8B％E8％AF％95ts.ts

@ cycjimmy / jsmpeg-player

ffmpeg文档

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/bofangqi/article-240224-1.html