2 weixin 38330185 weixin_38330185 于 2018.03.12 09:05 提问

如何在video退出全屏按esc时用js执行操作?

我点击任意一个class为iframe的a按钮,会将alt的地址赋给video的src,然后全屏播放
现在我想做的是按esc退出视频全屏时将video的src地址清空

 <div class="vdobox">
    <video id="mario-video" controls autoplay="autoplay">
        <source src="">
    </video>
</div>
<a  alt="http://www.guangfan.com/Public/Gf2016/images/video2.mp4" class="iframe">video2</a>
<a  alt="http://www.guangfan.com/Public/Gf2016/images/video.mp4" class="iframe">video</a>
<h1 id="heool" align="center" style="color: #000;">hello</h1>

<script>
    var aLi = document.querySelectorAll('.iframe');
    for (var i = 0; i < aLi.length; i++) {
        aLi[i].addEventListener('click', function(){
            //开始视频弹出事件
            var marioVideo = document.getElementById("mario-video");
                    var hhh=document.getElementById("heool");
                    document.getElementById("heool").style.color="blue";
            if (marioVideo && this) {
                    marioVideo.src=this.getAttribute("alt");
                    if (marioVideo.requestFullscreen) {
                        marioVideo.requestFullscreen();
                    }
                    else if (marioVideo.msRequestFullscreen) {
                        marioVideo.msRequestFullscreen();
                    }
                    else if (marioVideo.mozRequestFullScreen) {
                        marioVideo.mozRequestFullScreen();
                    }
                    else if (marioVideo.webkitRequestFullScreen) {
                        marioVideo.webkitRequestFullScreen();
                    }
            }
            //结束
        }
        );
    }

    //网上找的退出全屏,不能在video全屏时执行下边的js事件
    $(function(){
        $(window).keyup(function (event) {
            if (event.keyCode == 27) {
                alert("执行退出全屏操作...");
                document.getElementById("heool").style.color="black";
            }
        });
    })



</script>

2个回答

showbo
showbo   Ds   Rxr 2018.03.12 10:46
已采纳

全部了无法响应keyup事件,可以用计时器定时检查video的高度,但是你的video标签要设置一个默认高度,计时器检查如果高度变回一样了就执行代码,如下下面的


<div class="vdobox">
    <video id="mario-video" controls autoplay="autoplay" height="500">
        <source src="">
    </video>
</div>
<a alt="http://www.guangfan.com/Public/Gf2016/images/video2.mp4" class="iframe">video2</a>
<a alt="http://www.guangfan.com/Public/Gf2016/images/video.mp4" class="iframe">video</a>
<h1 id="heool" align="center" style="color: #000;">hello</h1>

<script>
    var aLi = document.querySelectorAll('.iframe');
    var  timer, videoHight = 500;///////////
    for (var i = 0; i < aLi.length; i++) {
        aLi[i].addEventListener('click', function () {
            //开始视频弹出事件
            var marioVideo = document.getElementById("mario-video");
            var hhh = document.getElementById("heool");
            document.getElementById("heool").style.color = "blue";
           ///////////////////////////
            timer = setInterval(function () {
                if (marioVideo.offsetHeight == videoHight) {
                    alert("执行退出全屏操作...");
                    document.getElementById("heool").style.color = "black";
                    clearInterval(timer)
                }
            }, 500)
            ///////////////////////////
            if (marioVideo && this) {
                marioVideo.src = this.getAttribute("alt");
                if (marioVideo.requestFullscreen) {
                    marioVideo.requestFullscreen();
                }
                else if (marioVideo.msRequestFullscreen) {
                    marioVideo.msRequestFullscreen();
                }
                else if (marioVideo.mozRequestFullScreen) {
                    marioVideo.mozRequestFullScreen();
                }
                else if (marioVideo.webkitRequestFullScreen) {
                    marioVideo.webkitRequestFullScreen();
                }
            }
            //结束
        }
        );
    }
</script>
weixin_38330185
weixin_38330185 很6
3 个月之前 回复
zforler
zforler   2018.03.12 10:39

监听全屏变化事件
let mark = false;
document.addEventListener('fullscreenchange', function(){
mark = !mark;
//全屏
if(mark){

    //退出全屏      
    }else{

    }

console.log(111);

});
document.addEventListener('webkitfullscreenchange', function(){
console.log(222);
});
document.addEventListener('mozfullscreenchange', function(){
console.log(333);
});
document.addEventListener('MSFullscreenChange', function(){
console.log(444);
});
加一个标记变量,全屏时设置为true,退出全屏设置为false

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!