元素。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();
}