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

Question

我点击任意一个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>

Answer 1

全部了无法响应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>