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

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

100

101

102

103

104

105

106

107

<!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;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

(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 代码的优化

收起

2回答

小于飞飞 2018-06-21 11:28:21

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

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

收起回答

提问者慕神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