اضافه فيديو في بدايه الموقع

9 ديسمبر 2020

اهلا بكم انا مبرمج والحين ابرمج موقع تسويق

ف اريد اضافه فيديو في البدايه بحيث انه يشتغل تلقائي اول ما يفتح الموقع بس يكون في كامل الشاشه و اول ما يخلص ينشال ف هل في احد يشرح هذه الطريقه ارجو ان تعطيني رأيك؟

Wael Aljamal · 9 ديسمبر 2020

مرحبا نور الدين،

يوجد خاصية في HTML + JS تقوم بتشغيل الفيديو بوضع Full Screen وهي تتوفر بعدة أسماء حسب المتصفح:

/* Function to open fullscreen mode */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}

حيث في هذا المثال نستدعي openFullScreen وهو function لتفعيل هذه الخاصية ويمكنك وضعها مباشرة(او استدعاء التابع) في الشيفرة لديك بعد تحميل الصفحة لتفيل وضع ملئ الشاشة.

توثيق مفيد من موسوعة حسوب رابط1 - رابط2

يوجد مثال من هنا ويمكنك فتح التوثيق requestfullscreen

كما يوجد الخاصية webkitEnterFullscreen ويمكنك تشغيلها حسب المثال التالي:

<!DOCTYPE html>

        <html>
          <head>
                <title>HTML5 Video Full Screen Mode Example</title>
        <script>
        var      myVideo;

        window.onload = function()
        {
            myVideo=      document.getElementById("myVideoFile");
            btnfullMode.addEventListener("click",      setFullScreenMode, false); 
            video.addEventListener("loadedmetadata", makeFullModeVisible,     false);
        }

        function makeFullModeVisible()
        {
                if (video.webkitSupportsFullscreen)
            {
                    document.getElementById("btnfullMode").style.visibility="visible";
            }
        }

        function setFullScreenMode()
        {
                    video.webkitEnterFullscreen();
        }
        </script>
        </head>
        <body>
          <div id="video_container">
        <video width="320"     height="176"     src="myVideoFile.mp4"     id="myVideoFile"     autoplay />

        </div>
                 <br/>
                 <button type="button" id="btnfullMode"    >
                  Open Video in      Full Screen mode
                 </button>
        </body>
    </html>

بالتوفيق

محمد الملواني · 9 ديسمبر 2020

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

هذا العنصر هو عنصر تحميل البيانات هو يقوم بتشغيل رسم متحرك حين تحميل الموقع

<div id="preloader">
  <div id="loader"></div> 
</div>

في حالتك سنقوم بالتالي استبدال الرمز المتحرك بالفيديو

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>


<div id="preloader">
 <!------ استبدال الرمز المتحرك بفيديو  ---------->
 <!------ <div id="loader"></div> ---------->
  	
 	 <video autoplay muted loop id="myVideo">
  		
    	<source src="mp4 File" type="video/mp4">
    
  
	</video>

</div>



<style>


#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
}




</style>

لا تنسى اخفاء العنصر بعد اتمام تحميل الصفحه بالكود التالي في ملف جافا سكريبت

$( document ).ready(function() {
    var loader = document.getElementById("preloader");
 
	loader.style.display = 'none';
});

اضافه فيديو في بدايه الموقع

السؤال

زائر

رابط هذا التعليق

شارك على الشبكات الإجتماعية

2 أجوبة على هذا السؤال

Recommended Posts

Wael Aljamal

رابط هذا التعليق

شارك على الشبكات الإجتماعية

محمد الملواني

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية