element.RequestFullScreen() & element.msRequestFullScreen() 未针对 I.E 和 Microsoft Edge 显示

Question

背景信息：

每个视频缩略图点击后都会全屏播放，兼容跨浏览器

做了什么：

已创建以下附上的源代码

问题：

Chrome 可以全屏播放视频，但不能同时在 I.E 和 Microsoft Edge 上播放视频

见下面的源代码：

$("#MainVideo").data("number", Video);
console.log($("#MainVideo").data("number")); 
var element = document.getElementById("MainVideo");       
if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
    element.webkitRequestFullScreen();
}else if (element.msRequestFullScreen) {
    element.msRequestFullScreen();
}  else if (element.RequestFullScreen) {
    element.RequestFullScreen();
}    


//This shouldnt affect
$('#MainVideo').bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {

var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
var event = state ? 'FullscreenOn' : 'FullscreenOff';
if (event == 'FullscreenOn') {

}
else if (event == 'FullscreenOff') { 

    console.log($("#MainVideo").attr("src"));

    var playVideo =  videoNameArray[VideoPlaying -1];   
    console.log("playVideo:" + playVideo);
    var mainvideo = document.getElementById("MainVideo");
    mainvideo.pause();
    mainvideo.currentTime = 0;
    mainvideo.src= "";
}
});

会不会是不支持浏览器的版本控制？还是我缺少允许视频在 IE 和 Edge 上播放的代码？

Answer 1

大写错误

   else if (element.msRequestFullScreen) {
        element.msRequestFullScreen();
    }

应该是

else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
}

和

else if (element.RequestFullScreen) {
    element.RequestFullScreen();
} 

应该是

else if (element.requestFullscreen) {
    element.requestFullscreen();
}