移動端自動播放視頻之TS視頻

ts簡介

TS（Transport Stream澄暮，傳輸流）是一種封裝的格式蝌以，它的全稱為MPEG2-TS糊啡。是一種視頻格式，一般用于實時流媒體和廣播電視領域豪娜。

Ts與Mp4優(yōu)勢對比

Mp4在IOS下可以自動播放餐胀，但是在部分安卓機下無法自動播放產(chǎn)生黑屏。
Ts可實現(xiàn)自動播放瘤载，IOS8以上和Android4.4以上都支持否灾。
基于自動播放的優(yōu)勢，本妹子在本廠的618大促主會場及各個活動需求上就用了Ts技術(shù)鸣奔。先show下具體效果:

renjialun.gif

生成ts視頻

需要下ffmpeg來將Mp4轉(zhuǎn)化成Ts視頻墨技。下面下載操作如下所示：
mac下可以運行

 brew install ffmpeg

windows下可以在https://ffmpeg.zeranoe.com/builds/中下載。

然后用ffmpeg 轉(zhuǎn)化

ffmpeg -i in.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 -b 0 out.ts

還可以控制視頻大锌胬辍（-s）扣汪，幀速率（-r），視頻比特率（-b：v）锨匆，音頻比特率（-b：a）私痹，音頻通道數(shù)（-ac），采樣率（-ar ）以及更多统刮。有關(guān)詳細信息紊遵，請參閱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

注意：盡量用高質(zhì)量的MP4來轉(zhuǎn)成Ts侥蒙，如果在手機上顯示暗膜，采用比特率1500k即可。ffmpeg -i in.mp4 -f mpegts -codec:v mpeg1video -b:v 1500k -codec:a mp2 out.ts

播放ts視頻

推薦用jsmpeg-player,它是基于jsmpeg封裝的npm包鞭衩。
最好準備一個封面学搜，將視頻蓋住，等視頻播發(fā)再去掉封面论衍，詳情如下：

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存在兼容問題瑞佩，系統(tǒng)版本 < android7 || 系統(tǒng)版本 < ios 11, Ts不兼容，可以以圖片第一幀為兜底圖片

Apple自動播放沒有聲音

Apple設備會自動播放無聲音的聲音坯台，您需要引導用戶單擊視頻圖標右下角的視頻以解鎖聲音炬丸。（在非自動播放模式下沒有類似問題）
安卓機型聲音沒有問題。

npm插件

根據(jù)兼容性問題蜒蕾，本妹子寫了個自動播放視頻插件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://img30.360buyimg.com/ling/jfs/t1/111077/7/8742/256800/5ed202f4Ef1221073/cf0fcf7a6c39eb3d.jpg' 
    tsSrc='http://storage.360buyimg.com/icepublic/rennjialun.ts'  />
  )
}

Happy coding .. :)