مساعدة في دمج اكواد جافا اسكربت

Samy سامي · 7 مايو 2021

السلام عليكم الاخوة الكرام كل عام وانتم بخير

احتاج المساعدة في دمج اكواد اسكربت لو امكن مساعدتي

استحدم 3 اكواد واريد ان تعمل هذه الاكواد بشكل فعال

الكود الاول هو كود يعرض زرار بالضغط عليه يفتح ملف فيديو

1

<script type="text/javascript">
$(function(){
    $('#button').click(function(){ 
        if(!$('#iframe').length) {
                $('#iframeHolder').html('<iframe id="iframe" src="//player.vimeo.com/video/90429499" width="700" height="450"></iframe>');
        }
    });   
});
</script>
 
<button id="button">Button</button>
<div id="iframeHolder"></div>

الكود الثاني هو لوضع رابط فيديو بصفحة النشر بدون وضع اكواد فريم

//<![CDATA[
// Youtube Responsive
setTimeout(function(){$(".video-youtube").each(function(){$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5e3);
//]]>

الكود الثالث هو خاص بفتح الفيديو عن طريق صورة للمشاهدة في كامل الشاشة

function GoInFullscreen(element) {
        if(element.requestFullscreen)
            element.requestFullscreen();
        else if(element.mozRequestFullScreen)
            element.mozRequestFullScreen();
        else if(element.webkitRequestFullscreen)
            element.webkitRequestFullscreen();
        else if(element.msRequestFullscreen)
            element.msRequestFullscreen();
    }

    function GoOutFullscreen() {
        if(document.exitFullscreen)
            document.exitFullscreen();
        else if(document.mozCancelFullScreen)
            document.mozCancelFullScreen();
        else if(document.webkitExitFullscreen)
            document.webkitExitFullscreen();
        else if(document.msExitFullscreen)
            document.msExitFullscreen();
    }

    function IsFullScreenCurrently() {
        var full_screen_element = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || null;

        if(full_screen_element === null)
            return false;
        else
            return true;
    }

    $("#go-button").on('click', function() {
        if(IsFullScreenCurrently())
            GoOutFullscreen();
        else
            GoInFullscreen($("#demo-element").get(0));
    });

    $(document).on('fullscreenchange webkitfullscreenchange mozfullscreenchange MSFullscreenChange', function() {
        if(IsFullScreenCurrently()) {
            $("#demo-element span").text('opn');
            $("#go-button").text('bak');
        }
        else {
            $("#demo-element span").text('bak');
            $("#go-button").text('opn');
        }
    });

اريد ان اضع الكود الاول والثاني داخل الكود الاول بمعني

بعد الضغط علي زرار عرض الفيديو يظهر لي الفيديو واسفل منه زرار مشاهدة بصفحة كاملة

واكون شاكر لكم

Adnane Kadri · 7 مايو 2021

بتاريخ 43 دقائق مضت قال سامي سكر:

اريد ان اضع الكود الاول والثاني داخل الكود الاول بمعني

بعد الضغط علي زرار عرض الفيديو يظهر لي الفيديو واسفل منه زرار مشاهدة بصفحة كاملة

أظن أن قصدك "وضع الكود الثاني و الثالث بداخل الأول" (و هذا تحقيقا للغرض المطلوب).

لا حاجة لذلك , يمكنك فصل كل الدوال بحسب المهمة و من ثم إستدعاءهم في دالة واحدة . بداية يمكنك تبسيط العملية أكثر عن طريق التالي :

قم بوضع كل الأكواد الأول و الثاني و الثالث بداخل دوال على هذا النحو (وهذا بحسب مبدأ فصل الإهتمامات) :

function openVideoFile()
{
    if(!$('#iframe').length) {
         $('#iframeHolder').html('<iframe id="iframe" src="//player.vimeo.com/video/90429499" width="700"                     height="450"></iframe>');
    } 
}

و :

function putVideoInPage()
{
    setTimeout(function(){$(".video-youtube").each(function(){$(this).replaceWith('<iframe class="video-youtube           loader" src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5e3);
}

و :

function GoInFullscreen(element) {
        if(element.requestFullscreen)
            element.requestFullscreen();
        else if(element.mozRequestFullScreen)
            element.mozRequestFullScreen();
        else if(element.webkitRequestFullscreen)
            element.webkitRequestFullscreen();
        else if(element.msRequestFullscreen)
            element.msRequestFullscreen();
    }

function GoOutFullscreen() {
        if(document.exitFullscreen)
            document.exitFullscreen();
        else if(document.mozCancelFullScreen)
            document.mozCancelFullScreen();
        else if(document.webkitExitFullscreen)
            document.webkitExitFullscreen();
        else if(document.msExitFullscreen)
            document.msExitFullscreen();
    }

function IsFullScreenCurrently() {
        var full_screen_element = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || null;

        if(full_screen_element === null)
            return false;
        else
            return true;
    }

و :

function setEventForGoButton()
{
   $("#go-button").on('click', function() {
      if(IsFullScreenCurrently())
             GoOutFullscreen();
      else
             GoInFullscreen($("#demo-element").get(0));
   });
}

و :

function handleFullScreen()
{
    $(document).on('fullscreenchange webkitfullscreenchange mozfullscreenchange MSFullscreenChange', function() {
        if(IsFullScreenCurrently()) {
            $("#demo-element span").text('opn');
            $("#go-button").text('bak');
        }
        else {
            $("#demo-element span").text('bak');
            $("#go-button").text('opn');
        }
    });
}

ثم يمكنك دمج و إستدعاء كل الدوال بعد الضغط على زر تشغيل الفيديو على هذا النحو :

$(function(){
    $('#button').click(function(){ 
      // تضمين الفيديو في الصفحة 
      openVideoFile();
      
      // وضع رابط فيديو بصفحة النشر بدون وضع اكواد فريم
      putVideoInPage();
      
      // إضافة التفاعلية لزر ملئ الشاشة
      setEventForGoButton();
      
      // تغيير النصوص بحسب وضع ملئ الشاشة
      // #demo-element span النصوص المعرفة بـ 
      handleFullScreen();
    });
  
});

ملاحظات :

الكثير من الأكواد غير واضحة المهمة في الأكواد التي أرفقتها و لا يظهر بالنسبة لي أي ترابط بين الكود الثاني و الأكواد الأخرى , و رغم ذلك قد قمت بتضيمنها في الأكواد التي وصفتها لك (يمكن لأن ذلك راجع إلى غياب باقي عناصر الصفحة ) .

يمكنك تتبع نفس المنطق لكتابة دالة تجمع عمل كل الدوال المعرفة (ألف دالة تقوم بألف مهمة أفضل من دالة تقوم بألف مهمة) , سيكون الكود أفضل قراءة و أكثر وضوحا.

تم التعديل في 7 مايو 2021 بواسطة Adnane Kadri
خطأ إملائي

Salah Eddin Beriani2 · 7 مايو 2021

الكود الثالث لن يعمل معك في حالة ال ifram وللوصول للنتيجة المرغوبة يكمنك الابقاء على الكود الأول لكن بتغييرات بسيطة

<script type="text/javascript">
$(function(){
    $('#button').click(function(){ 
        if(!$('#iframe').length) {
                $('#iframeHolder').html('<iframe id="iframe" src="//player.vimeo.com/video/90429499" width="700" height="450"></iframe>');
          // بالنسبة لك هذا هو الزر المسؤول على تكبير وتصغير الشاشة
              $('#iframeHolder').append('<span class="togglebutton">Toggle</span>');

        }
    });   
});
</script>
 
<button id="button">Button</button>
<div id="iframeHolder"></div>

طبعا الزر الجديد يحتاج لبعض التنسيقات هو و div iframeHolder

#iframeHolder {
    width:200px;
    height:200px;
    border:1px solid gray;
    position:relative;
}
iframe {
    /* width:100%;
    height:100%; */
    width: 1280px;
    height: 786px;
    border: 1px solid black display:block;
    -moz-transform: scale(0.25);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.25);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.25);
    -webkit-transform-origin: 0 0;
}
span.togglebutton {
    position:absolute;
    left:0;
    top:0;
    background-color:black;
    padding:3px;
    color:white;
}
div.maximized {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    -webkit-transform: scale(4);
    -webkit-transform-origin: 0 0;
    border:0 none;
    z-index:9;
}

في هذه الحالة الأن كل الكود الثالث الخاص بك يمكن ان يستبدل ب

$("span.togglebutton").click(function () {
    $(this).closest("div").toggleClass("maximized");
});

الان أصبح لديك فيديو فيه زر لتكبير وتصغير والكود الثاني يمكنك الابقاء عليه كما هو

Samy سامي · 7 مايو 2021

اخي الغالي ( @Adnane Kadri ) & ( @Salah Eddin Berriani )

اسف علي الاطالة لاني لم اوصل لك المعلومة كاملة

هذا الكود مطلوب بنفس الفكرة وهي

//<![CDATA[
// Youtube Responsive
setTimeout(function(){$(".video-youtube").each(function(){$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5e3);
//]]>

وهذا الكود الخاص بوضعه في التدوينة لجلب الفيديو مباشر مثل هذا الفيديو

<div class="videoyoutube"><div class="video-responsive"><div class="video-youtube loader lazyload" data-src="//player.vimeo.com/video/90429499"></div></div></div>

في هذه الحالة الفيديو يظهر في الصفحة بشكل طبيعي

وهنا اريد عدم اظهار الفيديو غير في حالة الضغط علي زرار تشغيل مثل ماهو في نفس هذا الاسكربت

<script type="text/javascript">
$(function(){
    $('#button').click(function(){ 
        if(!$('#iframe').length) {
                $('#iframeHolder').html('<iframe id="iframe" src="//player.vimeo.com/video/90429499" width="700" height="450"></iframe>');
        }
    });   
});
</script>

  هذا كود تضمين الفيديو في الصفحة بالضغط علي افتح الفيديو
<button id="button">افتح الفيديو</button>
<div id="iframeHolder"></div>

المطلوب هو ان يتم استعمل الطرية الاولة ولكن باضافة عدم اظهار الفيديو قبل الضغط علي افتح الفيديو اتمنا ان اكون قدرت اوضح لك ماهو المطلوب تقريبا

ولو امكن ان يتم جمع

كود فتح في كامل الشاشة اريد ان يتم دمجهم ليصبح اسكربت واحد مع كود html واحد لتخفيف الاسكربتات

وهذا كود html الخاص بالاسكربت شاشة كاملة

<div id="demo-element"> هنا كما كنت اعمل بيتم وضع كود طلب الفيديو المستخرج من اول كود
  
 
<button id="go-button" style="background-position: 0% 100%, 100% 0%, 0px 0px, 0px 0px; background-repeat: no-repeat; border-radius: 8px; display: inline-block; font: 25px calibri, Tajawal, sans-serif; padding: 10px 20px; position: relative; text-decoration: none; text-shadow: rgba(255, 255, 255, 0.4) 1px 1px 0px; vertical-align: baseline; white-space: nowrap;">افتح الفيديو في كامل الشاشة</button>
 
    </div>

Adnane Kadri · 7 مايو 2021

بتاريخ 14 ساعات قال سامي سكر:
هذا الكود مطلوب بنفس الفكرة وهي
//<![CDATA[
// Youtube Responsive
setTimeout(function(){$(".video-youtube").each(function(){$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5e3);
//]]>
وهذا الكود الخاص بوضعه في التدوينة لجلب الفيديو مباشر مثل هذا الفيديو
<div class="videoyoutube"><div class="video-responsive"><div class="video-youtube loader lazyload" data-src="//player.vimeo.com/video/90429499"></div></div></div>

إن كنت تقصد تطبيق طريقة الكود الأول في طريقة وضع الفيديو من الكود الثاني (أي إظهار الفيديو بعد الضغط على الزر في كلتا الحالتين , الأولى و الثانية ) فيمكنك ذلك عن طريق :

إنشاء الزر و إضافة حدث عند الضغط عليه :
```
<button onclick="launchVideo();">افتح الفيديو</button>
```

إنشاء عنصر الفيديو و تضمينه بالصفحة :

<div class="videoyoutube"><div class="video-responsive"><div class="video-youtube loader lazyload" data-src="//player.vimeo.com/video/90429499"></div></div></div>

تعريف الدالة المسؤولة عن بدء الفيديو على هذا النحو :

function launchVideo()
{
    $(".video-youtube")
    .each(function(){
        var iframe = '<iframe class="video-youtube loader" src="'+$(this).data("src")+'"        allowfullscreen="allowfullscreen" height="281" width="500"></iframe>';
        $(this).replaceWith(iframe);
    });
}

فيكون الكود كاملا على هذا النحو :

<button onclick="launchVideo();">افتح الفيديو</button>

<div class="videoyoutube">
  <div class="video-responsive">
    <div class="video-youtube loader lazyload" data-src="//player.vimeo.com/video/90429499">
    </div>
  </div>
</div>


<script>
function launchVideo()
{
    $(".video-youtube")
    .each(function(){
        var iframe = '<iframe class="video-youtube loader" src="'+$(this).data("src")+'"        allowfullscreen="allowfullscreen" height="281" width="500"></iframe>';
        $(this).replaceWith(iframe);
    });
}
</script>

هذا سيقوم بتضمين الفيديو بعد الضغط على الزر فقط .

بتاريخ 14 ساعات قال سامي سكر:

ولو امكن ان يتم جمع

كود فتح في كامل الشاشة اريد ان يتم دمجهم ليصبح اسكربت واحد مع كود html واحد لتخفيف الاسكربتات

بنفس الطريقة فم بإضافة الزر المسؤول عن ملئ الشاشة أسفل عنصر الفيديو :

<div id="demo-element">
  
 
<button id="go-button" style="background-position: 0% 100%, 100% 0%, 0px 0px, 0px 0px; background-repeat: no-repeat; border-radius: 8px; display: inline-block; font: 25px calibri, Tajawal, sans-serif; padding: 10px 20px; position: relative; text-decoration: none; text-shadow: rgba(255, 255, 255, 0.4) 1px 1px 0px; vertical-align: baseline; white-space: nowrap;">افتح الفيديو في كامل الشاشة</button>
 
</div>

ثم قم بإضافة التفاعلية الخاصة بالزر بعد الضغط على تشغيل الفيديو (الموصوفة في التعليق السابق) .

ربما قد تحتاج بعض التنسيقات الإضافية .

فيكون الكود كاملا مشابها للتالي :

<style>
  #go-button{
    background-position: 0% 100%, 100% 0%, 0px 0px, 0px 0px; 
    background-repeat: no-repeat; 
    border-radius: 8px; 
    display: inline-block; 
    font: 25px calibri, Tajawal, sans-serif; 
    padding: 10px 20px; 
    position: relative; 
    text-decoration: none; 
    text-shadow: rgba(255, 255, 255, 0.4) 1px 1px 0px; 
    vertical-align: baseline; 
    white-space: nowrap;
  }
</style>

<button onclick="launchVideo();">افتح الفيديو</button>

<div class="videoyoutube">
  <div class="video-responsive">
    <div class="video-youtube loader lazyload" data-src="//player.vimeo.com/video/90429499">
    </div>
  </div>
</div>

<div id="demo-element">
     <button id="go-button">افتح الفيديو في كامل الشاشة</button>
</div>

<script>
// قم ببدء الفيديو  
function launchVideo()
{
    $(".video-youtube")
    .each(function(){
        var iframe = '<iframe class="video-youtube loader" src="'+$(this).data("src")+'"        allowfullscreen="allowfullscreen" height="281" width="500"></iframe>';
        $(this).replaceWith(iframe);
    });
   
   // إضافة تفاعلية لزر ملئ الشاشة
   setEventForGoButton();
   
   // إضافة تفاعلية لنص الزر
   handleFullScreen();
}
  
function handleFullScreen()
{
    $(document).on('fullscreenchange webkitfullscreenchange mozfullscreenchange MSFullscreenChange', function() {
        if(IsFullScreenCurrently()) {
            $("#demo-element span").text('opn');
            $("#go-button").text('bak');
        }
        else {
            $("#demo-element span").text('bak');
            $("#go-button").text('opn');
        }
    });
}
    
function setEventForGoButton()
{
   $("#go-button").on('click', function() {
      if(IsFullScreenCurrently())
             GoOutFullscreen();
      else
             GoInFullscreen($("#demo-element").get(0));
   });
}  
  
function GoInFullscreen(element) {
        if(element.requestFullscreen)
            element.requestFullscreen();
        else if(element.mozRequestFullScreen)
            element.mozRequestFullScreen();
        else if(element.webkitRequestFullscreen)
            element.webkitRequestFullscreen();
        else if(element.msRequestFullscreen)
            element.msRequestFullscreen();
    }

function GoOutFullscreen() {
        if(document.exitFullscreen)
            document.exitFullscreen();
        else if(document.mozCancelFullScreen)
            document.mozCancelFullScreen();
        else if(document.webkitExitFullscreen)
            document.webkitExitFullscreen();
        else if(document.msExitFullscreen)
            document.msExitFullscreen();
    }

function IsFullScreenCurrently() {
        var full_screen_element = document.fullscreenElement || 
                                  document.webkitFullscreenElement || 
                                  document.mozFullScreenElement || 
                                  document.msFullscreenElement || 
                                  null;

        if(full_screen_element === null)
            return false;
        else
            return true;
}  
</script>

تم التعديل في 7 مايو 2021 بواسطة Adnane Kadri
إصلاح خطأ بالكود المرفق

Samy سامي · 8 مايو 2021

شكرا لك اخي الغالي @Adnane Kadri انه يعمل كما هومطلوب

ولكن احتاج من حضرتك تعديل شىء بسيط

في حالة الضغط علي

<button onclick="launchVideo();">افتح الفيديو</button>

في المتصفح يعمل بشكل طبيعي

ويفتح الفيديو ولكن في حالة الضغط عليه مرة اخرة يعمل تحديث للفيدو ولكن لايوجد فيديو

بمعني اخر

يفتح الفيديو بعد الضفط تمام

وفي حالة الضغط مرة اخرة او مرتين بيتم اعطاء Not Found حولت محولات كثيرة بدون فائدة اتمنا ان تكمل معي هذه المرحلة الاخيرة

كما اعتقد ان الخطاء في

<iframe class="video-youtube loader" src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>

تم التعديل في 8 مايو 2021 بواسطة سامي سكر
كود

Adnane Kadri · 8 مايو 2021

بتاريخ 14 دقائق مضت قال سامي سكر:

وفي حالة الضغط مرة اخرة او مرتين بيتم اعطاء Not Found حولت محولات كثيرة بدون فائدة اتمنا ان تكمل معي هذه المرحلة الاخيرة

يمكنك إما حذف , إخفاء , تعطيل أو حتى إزالة التفاعلية من الزر بعد إستيفاء الغرض منه ( عرض الفيديو ) لتجنب المشكل من الأساس .

يمكنك ذلك عن طريق التعديل إلى أحد الأكواد :

<!-- حذف الزر -->
<button onclick="launchVideo();$(this).remove();">افتح الفيديو</button>

<!-- إخفاء الزر -->
<button onclick="launchVideo();$(this).hide();">افتح الفيديو</button>

<!-- تعطيل الزر -->
<button onclick="launchVideo();$(this).attr('disabled', true);">افتح الفيديو</button>

<!-- إلغاء تفاعلية الزر -->
<button onclick="launchVideo();$(this).attr('onclick', '');">افتح الفيديو</button>

تم التعديل في 8 مايو 2021 بواسطة Adnane Kadri

مساعدة في دمج اكواد جافا اسكربت

السؤال

Samy سامي

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

Recommended Posts

Adnane Kadri

Salah Eddin Beriani2

Samy سامي

Adnane Kadri

Samy سامي

Adnane Kadri

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية