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

如何在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条回答

  • Go 旅城通票 2018-03-12 02: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>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 flink cdc无法实时同步mysql数据
  • ¥100 有人会搭建GPT-J-6B框架吗?有偿
  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决