家里有个兔崽子
2018-03-12 01:05
采纳率: 50%
浏览 3.4k

如何在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条回答 默认 最新

  • 已采纳

    全部了无法响应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>
    
    点赞 打赏 评论
  • 单调的黑白灰 2018-03-12 02: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

    点赞 打赏 评论

相关推荐 更多相似问题