iOS设备上怎么点击h5自定义的video全屏按钮实现全屏操作

Question

iOS设备上怎么点击h5自定义的video全屏按钮实现全屏操作，如下图：

Answer 1

答案如下

    <video src="..." id="video" playsinline="true" wekit-playsinline="true" controls="controls"></video>
    <button id="btn">点击</button>
    <script>
        var vid = document.getElementById('video');
        var btn = document.getElementById('btn');

        btn.addEventListener('click', function(e){
            if (vid.requestFullscreen) {
                vid.requestFullscreen();
            } else if (vid.mozRequestFullScreen) {
                vid.mozRequestFullScreen();
            } else if (vid.webkitRequestFullscreen) {
                vid.webkitRequestFullscreen();
            } else if (vid.webkitSupportsFullscreen) {
                vid.webkitEnterFullscreen();
            }
        });
    </script>`
    
    
    iOS全屏的实现关键在于webkitEnterFullscreen这个方法，vid.webkitSupportsFullscreen这一段代码是判断此元素是否支持全屏。

Answer 2

iOS 上并不禁止调用全屏的 API。获取到 video 对象直接调用 requestFullscreen。当然为了防止默认全屏，得加上playsinline属性

<video src="..." id="video" playsinline="true" wekit-playsinline="true" />
<button id="btn">点击</button>

var vid = document.getElementById('video');
var btn = document.getElementById('btn');

btn.addEventListener('click', function(e){
    if (vid.requestFullscreen) {
      vid.requestFullscreen();
    } else if (vid.mozRequestFullScreen) {
      vid.mozRequestFullScreen();
    } else if (vid.webkitRequestFullscreen) {
      vid.webkitRequestFullscreen();
    }
});