Mobile video playback solution-JSMpeg

1. Application scenarios

• Full screen video playback on mobile

It mainly circumvents the following compatibility issues with native video tags:

• Native UI is inconsistent
• Domestic browser hijacks the player (call name: QQ browser, Baidu browser, UC browser...)
• Play inline and the video level cannot be overridden
• 🤣 other questions

Two, JSMpeg introduction

• A video player written in JavaScript
• Composed of MPEG-TS demultiplexer, MPEG1 video and MP2 audio decoder, WebGL and Canvas2D renderer and WebAudio sound output
• Can load static videos via Ajax and allow low-latency streaming via WebSockets (approximately 50 milliseconds)
• Can decode 720p video at 30fps on iPhone 5S
• Can be used in any modern browser (Chrome, Firefox, Safari, Edge), and compressed only 20kb

Three, development process

1. Prepare video resources

FFmpeg

1. introduce

   • FFmpeg Video Processing | Ruan
   • FFmpeg|Official website
   • ffmpeg Chinese document

2. Install

   • Know | ffmpeg detailed installation tutorial

3. use

   • FFmpeg tutorial
   • short book | ffmpeg tutorial

🌰Lizi 1: Transcode MP4 format to TS format

1.mp4 video to

Video is mpeg1video , bit rate is 3500k , and is scaled to a width of 750px , and the audio is encoded by mp2

out.ts video

ffmpeg \
-i 1.mp4 \
-f mpegts -codec:v mpeg1video -b:v 3500k -vf scale=750:-1 -codec:a mp2 \
out.ts

🌰Lizi 2: Intercept a video clip with a specified length of time

ffmpeg \
-ss 00:00:00 -t 00:00:05 \
-i 1.mp4 -f mpegts -codec:v mpeg1video -b:v 3500k -vf scale=750:-1 -codec:a mp2 \
out1.ts

2. Write relevant code

1. Introduce the JSMpeg library

<script src="jsmpeg.min.js"></script>

2. Place the video container

<canvas id="video"></canvas>

3. Create a video object (see detailed parameter configuration official documents )

var demo = new JSMpeg.Player('https://jsmpeg.com/bjork-all-is-full-of-love.ts', {
    canvas: document.getElementById('video'), // 容器id
    throttled: false, // 这里设置为false，不然不触发onSourceCompleted事件
    chunkSize: 4 * 1024 * 1024, // 使用分块加载数据时，一次加载的块大小。默认1024*1024(1mb)
    progressive: false, // 是否分块加载数据
    loop: false, // 是否循环播放视频。默认true
    onSourceCompleted: () => {
        console.log('completed')
    },
    onPlay: () => {
        console.log('play')
    },
    onPause: () => {
        console.log('pause')
    },
    onEnded: () => {
        console.log('end')
    },
    onStalled: () => {
        console.log('没有足够的数据用于播放')
    },
    onSourceEstablished: () => {
        console.log('第一次收到数据')
    }
})

4. Play video

demo.audioOut.unlock() // 需要用户交互以解锁音频功能
demo.target.play() // 播放视频

5. Destroy the video object

demo.destroy()

Four, 🐞 related issues archive

1. Prompt cross-domain when loading data in chunks

   • The origin site is not configured to allow cross-domain

2. Choice of bit rate (from a certain degree)

   • 1080*720 resolution, use about 5000K
   • 720*576 resolution, use about 3500K
   • 640*480 resolution, use about 1500K

3. The first video appears to be out of sync on most native Android browsers

   • Broadcast a video of 1s before the start of the first video

Six, related documents

• JSMpeg|Official website
• JSMpeg|github
• Use of

1. Mainstream video decoding library

• JSMpeg
• Broadway.js
• ogv.js

JSMpeg's support is well assessed

2. Mobile video solution

• Xinxu | JS video decoding JSMpeg and Broadway out of the box evaluation
• Xinxu | Use ogv.js to parse webM video in Android browser
• Nuggets | Mobile h5 video solution

3. Video player related libraries

• Chimee|A set of extensible H5 video player componentized framework
• watermelon player

None of the above solves the level of QQ browser and Baidu browser and the inability to close the problem

4. Transparent video

• vap