Recently, I studied the problem of automatic video playback and no control bar. Record it.

The article has been synced to my github github.com/zhangqiang0…

Try to solve

It is ok to add autoplay to the requirement of “automatic video play”, so I will add an Autoplay attribute on the video label. It runs smoothly in the PC browser and no problems are encountered, but when it is opened in the mobile browser, it is the same as if autoplay is not set.

When the page is loaded, I will monitor the video’s canplay and execute play(). But when you put it in your phone, it still doesn’t work.

<video id="video" src="video.mp4" controls></video>
var video = document.querySelector('#video');
video.addEventListener('canplay'.function () {
   video.play();
})
Copy the code

Manual trigger play with an extra action to guide an interaction with the user, trigger the video play, the effect is ok, but does not meet the need to play the video after entering the page.

$('html').one('touchstart'.function() {$('video')
        .get(0)
        .play()
    })
Copy the code

plan

1. Download jSMpeg.js

ffmpeg : ffmpeg.zeranoe.com/builds/ win64

evermeet.cx/ffmpeg/ mac OS X 64

Jsmpeg. Js: github.com/phoboslab/j…

2, use,Win 64 version for example: download FFmPEG, decompress FFmpeg, enter the bin directory to see several exe this is the processing program. Download after decompression:

Win +r Enter CMD to open the command window, go to the bin directory, and enter the transcoding code ffmpeg -I demo1.mp4 -f mPEGts-codec :v mpeg1video-codec :a mp2-b 0 ts.ts

Mp4 -f mPEGts-codec :v mPEG1Video-codec :a MP2-q 0 out22.ts

Demo1.mp4 is the raw video we want (here I put the video directly in the bin directory)

After you press Enter, the bin directory outputs ts.ts

More parameter configuration commands

ffmpeg -i 1.mp4 -f mpegts -codec:v mpeg1video -s 640×1040 -b:v 1500k -r 30 -bf 0 -codec:a mp2 -ar 44100 -ac 1 -b:a 128k Out. ts Original video export size Export bit rate Export frame rate Audio sampling rate Audio bit rate

Ps: See github.com/phoboslab/j… The document

Play control:

Play () — Start Playback stop() — Stop Playback and seek to the beginning destroy() — stops playback, “Disconnects the source and changes up WebGL and WebAudio state. The player can not be used afterwards. Volume — get or Set the Audio Volume (0-1) currentTime — Get or set the current playback position in seconds

For example, player. Pause ()

Note:

  1. When the definition of the video is almost the same as the original video, the bit rate needs to be set almost twice more;
  2. Cross-domain problem

Jsmpeg requests ts media files using XMLHttpRequest and setRequestHeader(“Range”, “bytes= XXXX “); To request to slice the data so that we can process the data as soon as we get the bytes we set XXX to (jSMPEG set parameter chunkSize is XXX here). Because it is cross-domain, slicing the data server considers this a secondary operation to the file and is rejected. 3. Demo must be placed on the server to run in order to load TS files normally. If it is local, it can not be directly dragged into the browser to run, so it needs to be a local server. Ts encoded in H.264 found that it could not play

Then configure the service: THE serve tool I use here can run a service

Serve instances:

  1. First, you need to install Node
  2. Use the NPM command line to install serve

== NPM install -g serve== 3. After installation, use serve-s. dist to go to the file directory

<body>
    <canvas id="video-canvas"></canvas>    
    <script type="text/javascript" src="jsmpeg.min.js"></script>
    <script type="text/javascript">
    window.onload=function(){
        var canvas = document.getElementById('video-canvas');
        var url = 'demo-ts.ts';
        //var url = 'ws://'+document.location.hostname+':8082/';
        var player = new JSMpeg.Player(url, {canvas: canvas,loop: true.autoplay: true});
    }
    </script>
</body>

Copy the code

conclusion

As a matter of fact, I have been troubled about browser video for a long time. Yesterday when I browsed the segment “Is there a better way to auto-play audio after chrome66 bans auto-play?”, I went in and saw the answer, and suddenly remembered whether video is the same. Sure enough, it is similar. I have solved the question for a long time, so I encourage myself to be good at discovering and drawing inferences by analogy. The above mentioned solutions or supplements can probably solve most of the problems related to mobile browser video, the rest of the problems can be supplemented.

Reference links: Chrome66 does not allow automatic playback of audio, is there a better way to implement automatic playback of video wechat Android (interactive, set the level, no control bar, Non-x5) FFmPEG, jSMPEg.js,.ts Video Homebrew install MAC OS install using FFMPEG HTML5 Audio and Video playback (Video,Audio) and common pit handling Video in wechat and QQ browser not full screen solution