Reprinted content.
The big-breasted brothers who have done WeChat H5 video must have suffered tons of damage, even to the point of doubting life, automatic full screen, not full screen, not automatic playback, Android, IOS, Barabara...too outrageous! Today I sorted out the relevant solutions. Not all of the above are solved, but at least 60 points can be scored...
Step 1: Set x5videoplayertype to enable H5 same layer player
Use the video attribute "x5videoplayertype" to declare
the value type supported by the same layer of H5 player x5videoplayertype: h5
<video src="http://xxx.mp4" x5-video-player-type="h5"/>
Note: This attribute needs to be set before playing, and the setting is invalid after playing
The second part: set x5videoplayerfullscreen fullscreen mode
When the video is playing, it will enter the full-screen mode.
Note: Declaring this attribute requires the page to re-adapt to the new viewport size change. Resize events by listening can
be achieved
<video id="test_video" src="xxx" x5-video-player-type="h5" x5-video-player-fullscreen="true"/>
Need to monitor window size changes (resize) to achieve full screen
window.onresize = function(){test_video.style.width = window.innerWidth + "px";test_video.style.height = window.innerHeight + "px";}
Part 3: Set the horizontal and vertical screen orientation of the x5videoorientation player
Horizontal screen
<video x5-video-orientation="landscape"/>
Portrait
<video x5-video-orientation="portrait"/>
Follow the phone to rotate automatically
<video x5-video-orientation="landscape|portrait"/>
Note: This attribute only takes effect when x5videoplayertype="h5" is declared
Step 3: Set playsinline not to play in full screen
<video src="xxx.mp4" x5-video-player-type="h5" playsinline webkit-playsinline="true"></video>
Part 4: Set WeixinJSBridgeReady to automatically play
HTML
<video src="xxx.mp4" autoplay x5-video-player-type="h5" />
JS
document.addEventListener("WeixinJSBridgeReady", function() {document.getElementById('video').play();}, false);
Note: This autoplay can only be supported by IOS, Android is powerless, but there are solutions, Canvas can be solved, the specific code can be Googled, such as:
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Manipulating_video_using_canvas
Or written by a big breasted brother:
Sincerely, that salute.