ios端video.js退出全屏和画中画之后 维持播放状态

// 监听ios退出全屏之后 维持播放状态
var _exitfullscreen = true;
var timer;
var pauseTimestamp;
var exitTimeStamp;

// 监听进入全屏
video.addEventListener('webkitbeginfullscreen', function() {
    _exitfullscreen = false;
});
// 监听退出全屏
video.addEventListener("webkitendfullscreen", function(){
    exitTimeStamp = new Date().getTime();
    // ios退出全屏之前 如果之前是播放状态,先触发paused状态(可以监听到)  
    // 如果是暂停状态,不会触发pause了。
    // 这个状态一直维持4毫秒左右 要等到5毫秒之后再执行play
    if(!_exitfullscreen){
        // 通过退出时间 跟 触发 退出时间 差
        if(exitTimeStamp - pauseTimestamp <= 100){
            if(timer) clearTimeout(timer);
            timer =  setTimeout(()=>{
            	// 播放视频
                that.play();
                _exitfullscreen = true;
            },500);
        }
    }
});

// 监听ios退出画中画之后 维持播放状态
video.addEventListener('leavepictureinpicture', function() {
    // 已退出画中画模式
    // 播放视频
    that.play();
});
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
iOS上,<video>标签默认是不支持自动全屏播放的。但是,你可以通过以下方式实现自动全屏播放,并且在横屏时自动切换到横屏模式: 1. 在<video>标签中添加webkit-playsinline属性,这将允许视频在页面内播放而不是全屏播放。 ``` <video src="video.mp4" webkit-playsinline></video> ``` 2. 为了实现自动全屏播放,你需要使用JavaScript来控制<video>标签。在页面加载完成后,使用以下代码将视频播放: ``` var video = document.querySelector('video'); video.play(); ``` 3. 为了在横屏时自动切换到横屏模式,你需要在JavaScript中监听屏幕旋转事件(orientationchange),并在事件发生时修改<video>标签的样式,将其宽度设置为屏幕的高度,将其高度设置为屏幕的宽度,同时还需要将页面的viewport元标签设置为允许横屏显示: ``` //监听屏幕旋转事件 window.addEventListener("orientationchange", function() { if (window.orientation == 90 || window.orientation == -90) { //横屏时将视频全屏,并修改viewport元标签 document.querySelector('video').style.width = window.innerHeight + 'px'; document.querySelector('video').style.height = window.innerWidth + 'px'; document.querySelector('meta[name=viewport]').setAttribute('content', 'width=device-height, initial-scale=1.0'); } else { //竖屏时将视频恢复原始尺寸,并修改viewport元标签 document.querySelector('video').style.width = '100%'; document.querySelector('video').style.height = 'auto'; document.querySelector('meta[name=viewport]').setAttribute('content', 'width=device-width, initial-scale=1.0'); } }); ``` 这样就可以实现iOS上<video>标签的自动全屏播放,并且在横屏时自动切换到横屏模式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值