iOS端html页面视频全屏播放点×返回页面

ios端的页面上全屏播放的视频,电脑和Android上摁返回即可返回本页面,ios需要再处理几句 

//全屏事件
document.getElementById("videoNode").addEventListener("fullscreenchange",
function(e) {
    if (document.fullscreenElement) {
        console.log("进入全屏");
    } else {
        console.log("退出全屏");
        infoContent.style.display = "none";
    }
})
//     //进入全屏
function launchFullscreen(element) {
    if (element.requestFullscreen) {
        element.requestFullscreen()
    } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen()
    } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen()
    } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullScreen()
    }
}
launchFullscreen(document.getElementById("videoNode")) //某个元素进入全屏
// //退出全屏
function exitFullscreen() {
    if (document.getElementById("videoNode").exitFullscreen) {
        document.getElementById("videoNode").exitFullscreen()
    } else if (document.getElementById("videoNode").msExitFullscreen) {
        document.getElementById("videoNode").msExitFullscreen()
    } else if (document.getElementById("videoNode").mozCancelFullScreen) {
        document.getElementById("videoNode").mozCancelFullScreen()
    } else if (document.getElementById("videoNode").webkitExitFullscreen) {
        document.getElementById("videoNode").webkitExitFullscreen()
    }
}
exitFullscreen()

// 监听进入全屏
document.getElementById("videoNode").addEventListener('webkitbeginfullscreen',
function() {
    _exitfullscreen = false;
});
// 监听退出全屏
$('#videoNode').on('webkitendfullscreen',
function() {
    $('#videoNode')[0].pause();
    $('#videoContent').hide();
});

//显示视频界面
function ShowVideo(params) {
    infoContent = document.getElementById("videoContent");
    infoContent.style.display = "inline";
    var videoNode = document.getElementById("videoNode");
    // videoNode.poster = "video/" + params + ".png";
    videoNode.src = "video/" + params + ".mp4";
    videoNode.play();
    videoNode.requestFullscreen();
    isEnterFullScreen = true;
    // infoContent.childNodes[1].src = 'img/房间圆点对应弹窗/' + params + '.png';
}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值