京东星店长移动端自动播放视频实践-京东云开发者社区

## 前言
在直播和短视频行业日益火热的发展形势下，视频开发技术也随之成为互联网各大巨头争相关注的重点。由于现在的网络用户要求他们在浏览网页的时候不仅能与之交互还要可以保证页面整体的流畅性，因此如何使视频加载迅速而且流畅自动播放，成了开发者需要关注的问题。本文章就视频自动播放开发过程中所运用到的技术和原理进行梳理和总结。

## 难点和挑战
传统的视频播放技术都是用`MP4`格式进行播放。`MP4`格式在手机上自动播放存在兼容性问题，在部分安卓机下无法自动播放产生黑屏。但是用户对页面效果要求越来越多元化，用视频自动播放来做为动态背景，已经成为页面设计上不可或缺的亮点。

## 解决方案
我们引用了新的视频技术`TS`。`TS`（Transport Stream，传输流）是一种视频格式，它的全称为MPEG2-TS，可以实现视频的自动播放。`618`京东主会场和京东明星店长活动都引入了这个技术，下面将介绍下该技术的用法。

![京东星店长TS视频效果.gif](https://img12.360buyimg.com/imagetools/jfs/t1/130141/27/3745/2100617/5f02bf42E5097091d/646927dd079cbfc9.gif)

## 生成ts视频
需要安装`ffmpeg`来将`Mp4`转化成`Ts`视频。安装操作如下所示：
`mac`下可以运行
```bash
 brew install ffmpeg
```
`windows`下可以在[https://ffmpeg.zeranoe.com/builds/](https://ffmpeg.zeranoe.com/builds/)中下载。

然后用`ffmpeg`  转化
```bash
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文档](https://github.com/phoboslab/jsmpeg)。
如下所示
```bash
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](https://www.npmjs.com/package/@cycjimmy/jsmpeg-player)，它是基于[jsmpeg](https://github.com/phoboslab/jsmpeg)封装的npm包。
最好准备一个封面，先将视频盖住，等视频播放后再去掉封面，详情如下：
```javascript
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()
  }, [])

```

## 注意的坑
#### 视频加载问题
问题：当网速特别慢时，视频刚开始加载时需要时间缓冲，缓冲时视频数据还没有加载出来就会显示黑屏。

解决方案：可以准备张图片，图片建议为视频的第一帧，该图片盖在视频上。监听视频的`onPlay`事件，当视频加载完开始播放时会触发`onPlay`事件，这时将图片移除。
```javascript
...
new JSMpeg.VideoElement(document.querySelector('.hdVideo-ts'),'https://storage.360buyimg.com/xingdianzhang/ts_oulaiya.ts', {
        ...options
      }, {
        onPlay: () => {
          document.querySelector('.hdVideo-imagehdVideo-image').remove()
        }
      })
...
```

#### 兼容性问题
问题：`TS`在`Android7`以及`Ios11`版本以下都存在兼容性问题。

解决方案：可以降级处理。首先判断手机系统版本，如果手机是不兼容版本，则以图片来做兜底展示，图片可以为视频的第一帧。
```javascript
// 获取 android 版本号
function getAndroidVersion(ua) {
	ua = ua || navigator.userAgent
	let match = ua.match(/android\s([0-9\.]*)/i)
	return match ? match[1] : 'unknown'
}

// 获取 ios 版本号
function getIOSVersion(ua) {
	ua = ua || navigator.userAgent
	let match = ua.match(/OS ((\d+_?){2,3})\s/i)
	return match ? match[1].replace(/_/g, '.') : 'unknown'
}

if(versionCompare(getIOSVersion(), '11.0.0') > 0 || versionCompare(getAndroidVersion(), '7.0.0') > 0){
    initTs() //开始初始化Ts视频
}
```

#### Apple自动播放没有声音

问题：`Apple`设备会自动播放会默认静音

解决方案：可以引导用户单击视频图标右下角的视频以解锁声音。 
安卓机型声音是没有问题。在非自动播放模式下没有类似问题。

## TS的npm插件
根据上面提到的加载和兼容性问题，并结合了解决方案，本妹子写了个自动播放视频插件[jdyfe-tpl-videots](https://www.npmjs.com/package/jdyfe-tpl-videots)，已发布到`npm`网站中，欢迎小伙伴们使用。
#### 使用方法
`cover`:必填。指兜底图片，当视频加载或不兼容`TS`时显示。

`tsSrc`:必填。`TS`视频路径。

`className`:选填。可以添加class自定义样式

`option`:选填。默认为`{}`，详细参数[查看](https://www.npmjs.com/package/@cycjimmy/jsmpeg-player)

`overlayOptions`:选填。默认为`{}`，详细参数[查看](https://www.npmjs.com/package/@cycjimmy/jsmpeg-player)

```js
import VideoTs from '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'  />
  )
}
```
### 后记
本文中的视频案例来自京东星店长618大促活动，附上核心团队成员的照片

![image.png](https://img12.360buyimg.com/imagetools/jfs/t1/126677/40/8830/1141351/5f2a88eaEfa3dac1f/a44e39dffef59a4b.png)

Happy coding .. :)

### 相关链接
> [jdyfe-tpl-videots包](https://www.npmjs.com/package/jdyfe-tpl-videots)

> [https://www.reneelab.com.cn/what-is-ts-file-and-how-to-play-ts-video.html](https://www.reneelab.com.cn/what-is-ts-file-and-how-to-play-ts-video.html)

> [ffmpeg文档](https://github.com/phoboslab/jsmpeg)

> [jsmpeg-player包](https://www.npmjs.com/package/@cycjimmy/jsmpeg-player)