HTML DOM fullscreenEnabled 属性示例-实例在线编辑器(oldtoolbag.com)

<!DOCTYPE html>
<html>
<title>مثال على خاصية fullscreenEnabled في DOM HTML - تعليمية أساسية - oldtoolbag.com</title>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>جافا سكريبت الشاشة الكاملة</h1>
<p>انقر على الزر لفتح الفيديو في نمط الشاشة الكاملة.</p>
<button onclick="openFullscreen();">فتح الفيديو في وضع الكامل</button>
<video width="100%" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  متصفحك لا يدعم علامة الفيديو
</video>
<script>
/*الحصول على العنصر الذي تريد عرضه في الوضع الكامل*/
var video = document.querySelector("video");
/ *دالة فتح الوضع الكامل* /
function openFullscreen() {
  if (document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled) {  
     /* عرض العنصر في الوضع الكامل */
     if (video.requestFullscreen) { /* Standard syntax */
        video.requestFullscreen();
     } else if (video.mozRequestFullScreen) { /* Firefox */
        video.mozRequestFullScreen();
     } else if (video.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
        video.webkitRequestFullscreen();
     } else if (video.msRequestFullscreen) { /* IE/Edge */
        video.msRequestFullscreen();
     }
  }
}
</script>
</body>
</html>