H5视频全屏下如何ESC事件监听？

H5视频全屏下如何ESC事件监听？

只实现了点击按钮退出全屏，觉得还有改进空间。目前无法全屏时按ESC退出恢复网页原样，全屏是退出了但视频宽高并没有变小！老师帮忙看看。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>HTML5 AudioVideo</title>
    <link rel="stylesheet" type="text/css" href="index.css">
    <script type="text/javascript" src="demo4自定义/js/jquery.min.js"></script>
</head>

<body>
 <!-- <video width="640px" autoplay preload controls loop poster="poster.png">
        <source src="imooc.mp4" type="video/mp4">
        <source src="imooc.ogv" type="video/ogv">
        <source src="http://video.mukewang.com/mk.mp4" type="video/mp4"> 您的浏览器不支持video标签。
    </video>
    <button id="start">start</button>
    <button id="pause">pause</button>
    <br>
    <audio src="../../Music/网易云音乐/Ahrix - Left Behind.mp3" controls>
        您的浏览器不支持video标签。
    </audio> -->
 <hr>
    <div class="vCon">
        <video poster="poster.png" id="myVid">
            <source src="http://video.mukewang.com/mk.mp4" type="video/mp4" type="video/mp4">
 您的浏览器不支持video标签。
        </video>
        <div class="vCap">我的视频播放器</div>
        <div class="ctrl">
            <div class="top">
                <div class="progress">
                    <span class="barTime"></span>
                </div>
                <div class="time">
                    <span id="curTime">00:00</span>
                    <span>/</span>
                    <span id="durTime">00:00</span>
                </div>
            </div>
            <div class="bottom">
                <div class="button play" id="playBtn"></div>
                <div class="button stop" id="stopBtn"></div>
                <div class="button txt selected" id="speed1Btn">x1</div>
                <div class="button txt" id="speed3Btn">x3</div>
                <div class="button fullScreen" id="fullScreenBtn"></div>
                <div class="vol">
                    <span class="volBar"></span>
                </div>
                <div class="button sound" id="soundBtn"></div>
            </div>
        </div>
        <div class="loading"></div>
    </div>
</body>
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript">
/*var v = document.getElementById('myVid');

// v.onloadedmetadata=function(){
//     console.log(loadedmetadata);
// };

// var bindEvent=function(event){
//     v["on"+event]=function(){
//         console.log(event);
//     };
// };

// bindEvent('loadedmetadata');
// bindEvent('loadstart');

["loadstart", "progress", "suspend", "abort", "emptied", "stalled", "loadedmetadata", "loadeddata", "canplaythrough", "playing", "waiting", "seeking", "ended", "durationchange", "timeupdate", "play", "seeked", "ratechange", "volumechange", "pause", "error", "canplay"]
.forEach(function(event){
    v["on"+event]=function(){
        console.log(event);
    };
});*/

// var v = document.getElementById('myVid'),
//     startBtn=document.getElementById('start'),
//     pauseBtn=document.getElementById('pause');

// v.onloadedmetadata=function(){
//     console.log("视频地址："+v.currentSrc);
//     console.log("视频总时长："+v.duration);
//     console.log("视频播放速率："+v.playbackRate);
//     console.log("视频是否暂停："+v.paused);
//     console.log("视频是否结束："+v.ended);
//     console.log("视频是否静音："+v.muted);
// };
// v.ontimeupdate=function(){
//     console.log("视频当前时间："+v.currentTime);
//     console.log("视频当前缓冲量："+v.buffered.end(0));
// };
// v.onvolumechange=function(){
//     console.log("视频当前音量："+v.volume);
// };
// startBtn.onclick=function(){
//     v.play();
// };
// pauseBtn.onclick=function(){
//     v.pause();
// };
</script>

</html>
/*Body*/
body { margin: 0; padding: 0; }

/*整体*/
.vCon { position: relative; overflow: hidden; width: 640px; height: 360px; margin: 30px auto; background: #dedede; }

/*界面头部*/
.vCap { font-size: 20px; font-weight: bold; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; padding: 10px; color: #ccc; background: #1f1f1f; }

/*界面底部*/
.ctrl { position: absolute; z-index: 1; bottom: 0; left: 0; width: 100%; color: #ccc; background: #1f1f1f; }

/*界面底部进度条和时间*/
.ctrl .top { height: 11px; padding: 1px 5px; border-bottom: 1px solid #404040; background: #1f1f1f; }
.ctrl .top .progress { position: relative; float: left; width: 85%; height: 10px; cursor: pointer; border-radius: 5px; background: #404040; }
.ctrl .top .progress .barTime { position: absolute; z-index: 3; top: 0; left: 0; display: block; width: 0; height: 100%; border-radius: 5px; background: #f9d43a; }
.ctrl .top .time { font-size: 0; line-height: 12px; float: right; width: 15%; text-align: center; }
.ctrl .top .time span { font-size: 11px; }

/*界面底部按钮等*/
.ctrl .bottom { clear: both; background: #1f1f1f; }
.ctrl .bottom .button { float: left; width: 32px; height: 32px; padding: 0 5px; cursor: pointer; }
.ctrl .bottom .play { background: url('image/play.png') no-repeat 7px 2px; }
.ctrl .bottom .pause { background: url('image/pause.png') no-repeat 7px 2px; }
.ctrl .bottom .stop { background: url('image/stop.png') no-repeat 7px 2px; }
.ctrl .bottom .sound { background: url('image/sound.png') no-repeat 7px 2px; }
.ctrl .bottom .mute { background: url('image/mute.png') no-repeat 7px 2px; }
.ctrl .bottom .txt { font-size: 16px; font-weight: bold; line-height: 32px; text-align: center; color: #777; }
.ctrl .bottom .selected { color: #fff; }
.ctrl .bottom .sound, .ctrl .bottom .mute { float: right; }
.ctrl .bottom .fullScreen { float: right; background: url('image/full-screen.png') no-repeat 5px; background-size: 24px; }
.ctrl .bottom .exitfullScreen { float: right; background: url('image/exit-full-screen.png') no-repeat 5px; background-size: 24px; }
.ctrl .bottom .vol { position: relative; float: right; width: 70px; height: 10px; margin-top: 10px; margin-right: 10px; cursor: pointer; background: #404040; }
.ctrl .bottom .vol .volBar { position: absolute; z-index: 2; top: 0; left: 0; display: block; width: 0; height: 100%; background: #eee; }

/*Loading图片*/
.vCon .loading { position: absolute; z-index: 1; top: 50%; left: 50%; width: 54px; height: 55px; margin-top: -27px; margin-left: -27px; background: url('image/loading.gif') no-repeat;
(function($){
    var vid=$('#myVid');

    var timeFormat=function(sec){
        var min=Math.floor(sec/60);

        if(min<10){
            min='0'+min;
        }

        var Sec=Math.floor(sec%60);

        if(Sec<10){
            Sec='0'+Sec;
        }

        return min+':'+Sec;
    };

    var showTitleAndControl=function(shouldShow){
        if(shouldShow){
            $('.vCap').stop().animate({'top':0},500);
            $('.ctrl').stop().animate({'bottom':0},500);
        }else{
            $('.vCap').stop().animate({'top':-50},500);
            $('.ctrl').stop().animate({'bottom':-50},500);
        }
    };

    var playAndPause=function(){
        if(vid[0].paused || vid[0].ended){
            vid[0].play();
            $('#playBtn').removeClass('play').addClass('pause');
        }else{
            vid[0].pause();
            $('#playBtn').removeClass('pause').addClass('play');
        }
    }

    var stopVid=function(){
        vid[0].pause();
        updateProgress($('.progress').offset().left);
        $('#playBtn').removeClass('pause').addClass('play');
    }

    var playSpeed=function(speed){
        if(speed==1){
            $('#speed1Btn').addClass('selected');
            $('#speed3Btn').removeClass('selected');
        }else if(speed==3){
            $('#speed1Btn').removeClass('selected');
            $('#speed3Btn').addClass('selected');
        }
        vid[0].playbackRate=speed;
    }

    var progressDrag=function(){
        var drag=false;

        $('.progress').on('mousedown',function(e){
            drag=true;
            updateProgress(e.pageX);
        });
        $(document).on('mouseup',function(e){
            if(drag){
                drag=false;
                updateProgress(e.pageX);
            }
        });
        $(document).on('mousemove',function(e){
            if(drag){
                updateProgress(e.pageX);
            }
        })
    }

    var updateProgress=function(x){
        var progress=$('.progress'),
            percent=100*(x-progress.offset().left)/progress.width();

        if(percent>100){
            percent=100;
        }
        if(percent<0){
            percent=0;
        }

        $('.barTime').css('width',percent+'%');
        vid[0].currentTime=vid[0].duration*percent/100;
    }

    var soundDrag=function(){
        var Sdrag=false;

        $('.vol').on('mousedown',function(e){
            Sdrag=true;
            updateSound(e.pageX);
            vid[0].muted=false;
            $('#soundBtn').removeClass('mute').addClass('sound');
        });
        $(document).on('mouseup',function(e){
            if(Sdrag){
                Sdrag=false;
                updateSound(e.pageX);
            }
        });
        $(document).on('mousemove',function(e){
            if(Sdrag){
                updateSound(e.pageX);
            }
        })
    }

    var updateSound=function(x,defaultVOL){
        var vol=$('.vol'),
            percent=100*(x-vol.offset().left)/vol.width();

        if(defaultVOL){
            percent=defaultVOL*100;
        }else{
            if(percent>100){
                percent=100;
            }
            if(percent<0){
                percent=0;
            }
        }

        $('.volBar').css('width',percent+'%');
        vid[0].volume=percent/100;
    }

    var soundAndmute=function(){
        if(vid[0].muted){
            vid[0].muted=false;
            $('#soundBtn').removeClass('mute').addClass('sound');
            $('.volBar').css('width',vid[0].volume*100+'%');
        }else{
            vid[0].muted=true;
            $('#soundBtn').removeClass('sound').addClass('mute');
            $('.volBar').css('width',0);
        }
    }

    var FullScreen=function(){
        var docElm = $(".vCon")[0]; 

        //进入全屏
        if($('#fullScreenBtn').hasClass('fullScreen')){
            //W3C
            if(docElm.requestFullscreen){
                docElm.requestFullscreen();
            }
            //FireFox
            else if (docElm.mozRequestFullScreen) {
                docElm.mozRequestFullScreen();
            }
            //Chrome等
            else if (docElm.webkitRequestFullScreen) {
                docElm.webkitRequestFullScreen();
            }
            //IE11
            else if (elem.msRequestFullscreen) {
                elem.msRequestFullscreen();
            }

            $('#fullScreenBtn').removeClass('fullScreen').addClass('exitfullScreen');
            $(docElm).css({'width':$(window)[0].screen.availWidth+'px','height':$(window)[0].screen.availHeight+'px'});
            vid.width($(window)[0].screen.availWidth);
            vid.height($(window)[0].screen.availHeight);
            $('.progress').css('width','94%');
            $('.time').css('width','5%');

        }else if($('#fullScreenBtn').hasClass('exitfullScreen')){
            
            //退出全屏
            //W3C
            if (document.exitFullscreen) {
                document.exitFullscreen();
            }
            //FireFox
            else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            }
            //Chrome
            else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
                //document.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
            }
            //IE
            else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }

            $('#fullScreenBtn').removeClass('exitfullScreen').addClass('fullScreen');
            $('.vCon').width(640);
            $('.vCon').height(360);
            vid.width($('.vCon').width());
            vid.height($('.vCon').height());
            $('.progress').css('width','85%');
            $('.time').css('width','15%');
        }
        //监听是否全屏
        // document.addEventListener("fullscreenchange", function(){
        // fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";}, false);
        // document.addEventListener("mozfullscreenchange", function () {
        // fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";}, false);
        // document.addEventListener("webkitfullscreenchange", function () {
        // fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";}, false);
        // document.addEventListener("msfullscreenchange", function () {
        // fullscreenState.innerHTML = (document.msFullscreenElement)? "" : "not ";}, false);
    }

    vid.on('loadedmetadata',function(){

        vid.width($('.vCon').width());
        vid.height($('.vCon').height());

        showTitleAndControl(false);

        $('#curTime').html(timeFormat(0));

        $('#durTime').html(timeFormat(vid[0].duration));

        $('.vCon').hover(function(){
            showTitleAndControl(true);
        },function(){
            showTitleAndControl(false);
        });

        $('#playBtn').on('click',playAndPause);
        $('#stopBtn').on('click',stopVid);
        $('#speed1Btn').on('click',function(){
            playSpeed(1);
        });
        $('#speed3Btn').on('click',function(){
            playSpeed(3);
        });
        $('#soundBtn').on('click',soundAndmute);
        $('#fullScreenBtn').on('click',FullScreen);

        progressDrag();
        soundDrag();

        updateSound(null,.7);
    });

    var loadingTimer=null;

    vid.on('timeupdate',function(){
        var curT=vid[0].currentTime,
            durT=vid[0].duration,
            Tpercent=100*curT/durT;

        $('.barTime').css('width',Tpercent+'%');
        $('#curTime').html(timeFormat(curT));

        $('.loading').fadeOut(100);
        //设置一个计时器，500ms内没有暂停或者播放结束的情况下，
        //没有触发timeupdate事件就不能清除计时器，然后加载gif动画。
        //这是监听waiting事件的替代方法。
        // clearTimeout(loadingTimer);
        // loadingTimer=setTimeout(function(){
        //     if(!vid[0].paused && !vid[0].ended){
        //         $('.loading').fadeIn(100);
        //     }
        // },500);
    });

    vid.on('waiting',function(){
        $('.loading').fadeIn(100);
    });

    vid.on('canplay',function(){
        $('.loading').fadeOut(100);
    });

    vid.on('ended',function(){
        updateProgress($('.progress').offset().left);
        $('#playBtn').removeClass('pause').addClass('play');
    });

    //按两下ESC才可恢复原始视频尺寸
    // $(document).on('keyup',function(e){
    //     if(e.keyCode==27){
    //         console.log(e.keyCode);
    //         console.log($('#fullScreenBtn')[0].className);
    //         if($('#fullScreenBtn').hasClass('exitfullScreen')){
    //             console.log('1');
    //             if (document.exitFullscreen) {
    //                 document.exitFullscreen();
    //             }
    //             else if (document.mozCancelFullScreen) {
    //                 document.mozCancelFullScreen();
    //             }
    //             else if (document.webkitCancelFullScreen) {
    //                 document.webkitCancelFullScreen();
    //             }
    //             else if (document.msExitFullscreen) {
    //                 document.msExitFullscreen();
    //             }

    //             $('#fullScreenBtn').removeClass('exitfullScreen').addClass('fullScreen');
    //             $('.vCon').width(640);
    //             $('.vCon').height(360);
    //             vid.width($('.vCon').width());
    //             vid.height($('.vCon').height());
    //             $('.progress').css('width','85%');
    //             $('.time').css('width','15%');
    //         }
    //     }
    // });

})(jQuery);

使用了一些本地图片，全屏按钮在右下角。
慕神7088389 2018-06-21
源自：HTML5音视频   3-13 代码的优化
27
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

2回答
小于飞飞 2018-06-21 11:28:21

关于大小，可以给该视频指定 宽度，如下：

http://img1.sycdn.imooc.com//climg/5b2b1b3f0001c05304000034.jpg

动手实践，试一试，祝学习愉快。

0
收起回答
  • 提问者 慕神7088389 #1
    按右下角全屏按钮，视频播放器全屏后，然后按ESC是退出全屏了，但播放器的宽高没变占据了整个浏览器窗口。我想按下ESC退出全屏，播放器大小也恢复原样。 如果直接靠按钮来实现进入和退出全屏是没有问题的。核心问题是，全屏时浏览器好像无法监听绑定的键盘事件，js最下面注释掉的就是，功能上没有问题，但必须在第一次esc退出全屏后再按一下esc播放器大小才恢复。
    2018-06-21 16:28:38
  • _是你_ 回复 提问者 慕神7088389 #2
    这个好像是全屏视频的时候，浏览器也全屏了，第一按是退出浏览器，第二次按才推出视频全屏吧！
    2018-06-21 19:24:17
  • 提问者 慕神7088389 回复 _是你_ #3
    不是的，是鼠标监听的问题，我已经解决了，曲线救国。 //监听全屏变化,实现ESC退出全屏时vCon控制条恢复原样 $(window).resize(function(){ //退出全屏 if(!IsFull()){ do something... } });
    2018-06-21 22:37:56
提问者 慕神7088389 2018-06-21 04:24:33

最多做到全屏后按两下esc恢复原样。百度说全屏后无法监听键盘事件？

0
收起回答
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

用了lin-ui瀑布流，如何监听自定义组件事件？
22 0 4
老师帮我看下为什么触发不到监听的事件
15 0 4
关于IE与DOM事件侦听函数的区别
9 0 3
为什么要用监听？直接绑定事件不行吗？二者有什么区别？
2 0 3
使用 program.on("option:targetPath") 事件监听不到
9 0 6

登录后可查看更多问答，登录/注册

响应式开发与常用框架 2018
  • 参与学习           人
  • 提交作业       2198    份
  • 解答问题       5012    个

如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！

了解课程

本课精华内容

问答 作业

图片高度不一样的问题

45 24

请问老师原理是什么

70 16

请问老师到底是什么机制

44 12

我的js为什么绑定不上啊

0 11

请问这个怎么解释

44 11

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师