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

iOS设备上怎么点击h5自定义的video全屏按钮实现全屏操作,如下图:图片描述

阅读 6.2k
2 个回答

答案如下

    <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这一段代码是判断此元素是否支持全屏。

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();
    }
});
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题