Android full screen problem

The full-screen H5 feature is well received by the industry. Although full-screen autoplay is not a big problem on iOS, on Android phones, when the video component is in full screen, it appears to “float” on the top of the browser, which makes the experience very bad. In addition, even if JS is used to set the video as the width and height of the container, ugly player controls will also appear. At this time, we have to artificially add blank at the bottom of the video, and calculate the appropriate height through JS to block ugly player controls, which is really annoying.

JSMpeg profile

JSMpeg accidentally found this project, can solve the android full-screen video floating problem.

The principle of it is to decode the Video with JS and render it with WebGL & Canvas2D, so as to avoid the problem of Video control in android wechat browser. However, there is a point to note that you need to convert your Video files (usually MP4) to TS format Video files. In addition, when using JSMPEG to play TS files in wechat browser of iOS, there is no sound. (In iOS, we use video+ MP4 directly, and this plug-in is also not needed.)

You can use convertio.co/zh/mp4-ts/ online conversion, but ffmpeg.org/ is more recommended.

Production ts video file command:

$ffmpeg-i Your source file. Mp4-fMpegts-codec :v mPEG1video-codec :a mp2-b 0 Output file tsCopy the code

JSMpeg call

	<canvas id = "canvas"></canvas>
	<script>
 	 var player = new JSMpeg.Player('video.ts', {
     	canvas: canvas, 
        loop: false,
        autoplay:true
     });  
  </script>
Copy the code

Of course you can use it directly in HTML

<div class="jsmpeg" 
	data-url="video.ts" 
    data-loop="false" 
    data-autoplay="true">
</div>
Copy the code

DEMO

Click here to experience the Demo

Or just scan it

This article is from Thinkerchan.com