كيفية تغيير تشغيل الفيديو في مشغل Youtube المضمن؟

StackOverflow https://stackoverflow.com/questions/689376

  •  22-08-2019
  •  | 
  •  

سؤال

أرغب في إنشاء قائمة تشغيل، حيث يتم النقر على كل منها <li> سيتم تغيير رابط الفيديو أدناه.القائمة سوف تبدو مثل هذا:

  • فيديو1 

    <li><a href="MzfAvHlIVjE&hl=en&fs=1&rel=0&color1=0x3a3a3a&color2=0x999999">">video1</a></li>

  • bbbbb

  • com.ccccc

مشغل الفيديو هنا

لذا فإن النقر على aaaaa سيؤدي إلى تشغيل aaaaa، والنقر على bbbbb سيؤدي إلى تشغيل bbbbb، وما إلى ذلك.

أود أن أجعلها أياكس، دون إعادة الرسم، فقط انقر واللعب.

هنا هو كائن يوتيوب لتحريره

<object width="320" height="265">
  <param name="movie" value="http://www.youtube.com/v/MzfAvHlIVjE&hl=en&fs=1&rel=0&color1=0x3a3a3a&color2=0x999999"></param>
  <param name="allowFullScreen" value="true"></param>
  <param name="allowscriptaccess" value="always"></param>
  <embed src="http://www.youtube.com/v/MzfAvHlIVjE&hl=en&fs=1&rel=0&color1=0x3a3a3a&color2=0x999999" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed>
</object>

كيف يمكنني تغيير الفيديو الذي يتم تشغيله في مشغل Youtube المضمن؟

هل كانت مفيدة؟

المحلول

إذا كنت لا تحب النافذة المنبثقة، فما عليك سوى التخلص منها:

function play(id)
    {
       var html  = '';

       html += '<object >';
       html += '<param name="movie" value="http://www.youtube.com/v/'+id+'"></param>';
       html += '<param name="autoplay" value="1">';
       html += '<param name="wmode" value="transparent"></param>';
       html += '<embed src="http://www.youtube.com/v/'+id+'&autoplay=1" type="application/x-shockwave-flash" wmode="transparent" ></embed>';
       html += '</object>';

       return html;
    };

<div id="button1" />
<div id="playvideo" />

$("#button1").click(function() { $("#playvideo").html(play("YOURVIDEOID")); });

أتمنى أن يساعدك هذا

نصائح أخرى

تفحص ال مسج تيوب بلاير البرنامج المساعد --

يتعامل البرنامج الإضافي مع تهيئة المشغل نيابةً عنك وستتمكن من التحكم الكامل في المشغل.مما يسمح لك بوضع jQuery("#player").tubeplayer("play", "[videoId]") على معالج الحدث الخاص بك li'س..

لدي شيء نجح بالنسبة لي:

في الرأس:

    <script type="text/javascript" src="../../../Assets/js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript"> 
        $(document).ready(function(){
            $(".button").click(function() {
            $("#playvideo").html(play(  $(this).find("a").attr("linkattr")));           
            return false; 
            });
        });
    function play(id)   {
           var html  = '';     
           html += '<iframe width="671" height="495" src="'+id+'" frameborder="0" allowfullscreen></iframe>';
           return html;
        };  
    </script>

في الجسم:

    <h2 class="button"><a linkattr="https://www.youtube.com/embed/uopXg6NxboQ?rel=0&amp;showinfo=0" href="#"> video 1 </a></h2>
    <h2 class="button"><a linkattr="https://www.youtube.com/embed/h-v1c2kNw70?rel=0&amp;showinfo=0" href="#"> video 2 </a></h2>

    <div id="playvideo">
          <iframe width="671" height="495" src="https://www.youtube.com/embed/uopXg6NxboQ?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
    </div>

انظر هذه الصفحة للحصول على النتيجة: https://cllccavo.asc.ohio-state.edu/Public/Modules/help/howto.php

هنا هو الحل النهائي :

http://www.studioteknik.com/youtube/index2.html

هنا هو الكود النهائي : 

<script type="text/javascript"> 
    $(document).ready( function(){
        $(".button").click(function() {
        console.log($(this).find("a").attr("href"));
        $("#playvideo").html(play($(this).find("a").attr("href"))); 
        return false; 
        });
    });
</script>

</head>

<body>

<div>
  <ul>
    <li class="button"><a href="MzfAvHlIVjE&hl=en&fs=1">Video 1</a></li>
    <li class="button"><a href="uN2OGjsLuY8&hl=en&fs=1">Video 2</a></li>
    <li class="button"><a href="EZOTMcqaH98&hl=en&fs=1">Video 3</a></li>
    <li class="button"><a href="PSTDZEZV72Q&hl=en&fs=1">Video 4</a></li>
    <li class="button"><a href="QYlOaoqgMdw&hl=en&fs=1">Video 5</a></li>
    <li class="button"><a href="GEcBhbXEFz8&hl=en&fs=1">Video 6</a></li>
    <li class="button"><a href="cU6sJ0CQWAc&hl=en&fs=1">Video 7</a></li>
    </ul>
</div>

انظر إلى البرنامج المساعد jquery youtube: http://saidur.wordpress.com/2007/12/03/jquery-youtube-beta-plugin/

لديك عرض توضيحي هنا:

http://bijon.rightbrainsolution.com/youtube/video.html

بالضبط نفس الواجهة التي تحتاج إليها، بعد البحث في مقاطع الفيديو.(حتى تتمكن من التخلص من ميزة البحث)

أتمنى أن يساعدك هذا.

$('#video-player object embed').attr('src', 'http://www.youtube.com/v/' + id + '&hl=en&fs=1&&autoplay=1');

يبدو أن هذا يعمل أيضًا، على الرغم من أنه لا يزال يتسبب في إعادة رسم مشغل الفلاش

مارك أندريه مينارد - هل يمكنك تعديل البرنامج النصي بحيث يتم تحميل أحد مقاطع الفيديو تلقائيًا عند تحميل الصفحة؟

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top