اذهب إلى المحتوى
  • 0

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

سامي سكر

السؤال

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

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

استحدم 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');
        }
    });

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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 1
بتاريخ 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();
    });
  
});

ملاحظات : 

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

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

تم التعديل في بواسطة Adnane Kadri
خطأ إملائي
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 1

الكود الثالث لن يعمل معك في حالة ال 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");
});

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 1
بتاريخ 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>
 

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

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

     

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

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

     

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

    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>

 

تم التعديل في بواسطة Adnane Kadri
إصلاح خطأ بالكود المرفق
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 1
بتاريخ 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>

 

تم التعديل في بواسطة Adnane Kadri
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

اخي الغالي ( @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>

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

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

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

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

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

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

بمعني اخر 

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

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

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

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

 

تم التعديل في بواسطة سامي سكر
كود
رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...