1, ask questions
One day received a demand, need to join in the phone's video page H5, I happily finished, ready for delivery when the question came, PM wants the user to enter a page, the video will start playing, no user manual click.
2, try to solve
加autoplay
"Video Auto Play" The demand is ok, then I would add autoplay attribute thing on video label, interview in the PC browser a bit, run smoothly, did not encounter any problems, but the browser on the phone is inside open, just not set autoplay is the same.
Listening canplay
That does not work, when I finished loading the page, the video monitor canplay, then perform the play (), should be able to run, right? However, a look into the phone, or not.
<video id="video" src="video.mp4" controls></video>
var video = document.querySelector('#video');
video.addEventListener('canplay', function () {
video.play();
})3, thinking
The question is, plus autoplay not, you can understand, the mobile browser may not support this attribute it, but I loaded the video monitor, to manually play (), which is the conventional method program, why does not work?
I try to listen for callbacks which added more alert, I found no pop-up box.
So I think for a long time, your phone can not play video automatically, because the memory size restrictions, resulting in not finished loading the video monitor.
4. Solution
Scheme 1 using popup box
Yesterday wandering in the segment, is now found in the original mobile browser is not allowed to auto-play video pages, and only had a the interaction with the user, it can play video. (Audio Similarly, not repeat it here to mention)
after I tried it, plus a bomb on the page box, the user clicks on a bomb box (equivalent to one interaction is completed), start the video, can be found playing, part of the code as follows.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width">
<title>视频自动播放</title>
<style>
html, body {
width: 100%;
height: 100%;
}
.video-container {
width: 300px;
height: 600px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
margin: 0 auto;
}
#video {
display: block;
width: 100%;
}
#mask {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.83);
position: absolute;
top: 0;
left: 0;
z-index: 2;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.pop-container {
width: 250px;
height: 200px;
background: white;
border-radius: 5px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
button {
width: 50px;
height: 30px;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="video-container">
<video id="video" src="video.mp4"></video>
</div>
<div id="mask">
<div class="pop-container">
<p>页面内有自动播放视频 请注意流量</p>
<button onclick="playVideo()">我知道了</button>
</div>
</div>
<script>
function playVideo() {
document.getElementById('mask').style.display = 'none';
var video = document.querySelector('#video');
video.play();
}
</script>
</body>
</html>Therefore, the general practice is to solve the video autoplay, when the page is loaded with a bomb box user interaction occurs before you can start playing automatically (It seems that your phone is really very great importance to the user traffic.)
Problems
According to the above method, as long as you want to achieve at the end of the page to enter the phone page, automatically and immediately play the video, you must be using an additional action to guide a user to interact with the occurrence, it would be ugly, there is no way that you can not With bomb box it? The answer is yes.
Scenario 2 Use jsmpeg.js
jsmpeg is a video decoder, specifically how to use, you can Baidu related documents, to be honest I am not familiar with, first heard when heard live video function jsmpeg utilize page-end, this time to solve video autoplay demand also learn from other people's ideas.
The key code is as follows :( premise: the project has been introduced jsmpeg.min.js)
<canvas id="canvas" height="750" width="750"></canvas>
页面加载完成的时候执行下面的js代码：
var canvas = document.querySelector('#canvas');
// 注意这里需要将video.mp4转换成ts格式的文件 才能生效
var player = new JSMpeg.Player('video.ts', { canvas: canvas, loop: false, autoplay: false, audio: true });
player.audioOut.unlock(this.onUnlocked);
player.play();
// onUnlocked方法
function onUnlocked() {
player.volume = 1;
}So even if no user interaction with video can automatically play,
pay attention to the point
1.demo must be placed on top of the server to run properly loaded ts file, if it is in the local dialect, not directly dragged into the browser to run, need to play a local server
2 .ts file encoding must be MPEG encoding, taking into account the current advanced ts coding scheme is the H.264, and H.264 encoded before found with ts not broadcast
problems
1. such broadcast video is no sound
attached reference link: micro-channel auto-play video Android (interactive, hierarchical set, no strip, non-X5) ffmpeg, jsmpeg.js, .ts video
5, supplement
1. While the final no matter by what method, be realized demand video auto play, but in the example of a real player, you will find that when using the video tag, though set the width and height of the video, but it does not work, so apply the following video attributes in
<video id = "video" src = "" controls webkit-playsinline = "webkit-playsinline" playsinline> </ video>
in this way the video can be played in a fixed area.
2. With the idea of Scheme 1, in fact, can be achieved when users upload video preview
<input type="file" id="filepicker" accept="video/mp4" onchange="chooseVideoInput()">
<div class="video-container">
<video id="video" src="" controls webkit-playsinline="webkit-playsinline" playsinline></video>
</div>
<script>
function chooseVideoInput() {
var files = document.getElementById('filepicker').files[0];
var video = document.getElementById('video');
// 注意下面3行代码
var url = URL.createObjectURL(files);
video.src = url;
video.play();
}
</script>3. The method of converting into ts mp4 file playable jsmpeg
mounted homebrew under mac os, after use brew install jsmpeg, run the following command: ffmpeg -i in.mp4 -f mpegts -codec: v mpeg1video -codec: a mp2 - b 0 out.ts (in.mp4 and wherein the original video out.ts fill path and the transfer path of the ts), effective pro-test
6, summed up
In fact, the issue of browser video of puzzled me for a long time yesterday to browse in the segment "after chrome66 ban autoplay, what better way to achieve audio autoplay you" when such a question, go to see the answer, suddenly is not think video is the same situation, looked under today, it really is like, the solution of the question for a long time, so he must be good at discovering encouraged and replicability.
The above-mentioned solution, whether or supplement, would be able to solve the problem more than half of the mobile browser video-related, the remaining question have the opportunity to add.
Reference Links:
After chrome66 disable auto play, what better way to achieve it autoplay audio
micro-channel Android autoplay video (interactive, hierarchical set, no control bar, non-X5) ffmpeg, jsmpeg.js, .ts video
mac under homebrew osx install
mac system to install ffmpeg
HTML5 audio and video player (video, Audio) and common pit processing
video full-screen playback is not resolved in the micro-channel and QQ browser