2014-09-30 2 views
3

Есть ли способ автовоспроизвести видео на YouTube при прокрутке страницы? Я попытался это сделать, и похоже, что некоторые методы для старого кода для встраивания youtube. Я ищу обновленную версию этого - кто-нибудь знает, как автоматически воспроизводить видео на YouTube, когда вы прокручиваете определенное количество пикселей на странице?Автовоспроизведение видео Youtube при прокрутке до

Спасибо за вашу помощь

ответ

4
<iframe id="ytplayer" type="text/html" width="640" height="390" 
    src="http://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=http://example.com" 
    frameborder="0"/> 

Используйте выше для автоматического воспроизведения видео. на ваш вопрос, чтобы воспроизвести его только при прокрутке вниз, проверьте эту тему.

Triggering a video autoplay based on scroll position

Вот полный код. протестировали это на firefox и chrome. Вы можете проверить образец, работающий здесь.

http://www.foftv.com/samplejs/vidscroll2.html

<html><head> 
    <style> 
    #e1, #e2, #e3, #e4, #e5, # ytplayer{ 
     height:390px; width:640px; display: block; 
     opacity: 0; 
    } 
    </style> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script> 
     // Load the IFrame Player API code asynchronously. 
     var tag = document.createElement('script'); 
     tag.src = "https://www.youtube.com/player_api"; 
     var firstScriptTag = document.getElementsByTagName('script')[0]; 
     firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

     // Replace the 'ytplayer' element with an <iframe> and 
     // YouTube player after the API code downloads. 
     var player; 
     function onYouTubePlayerAPIReady() { 
     player = new YT.Player('ytplayer', { 
      height: '390', 
      width: '640', 
      playerVars : { 
       autoplay : 0 
      }, 
      videoId: 'M7lc1UVf-VE' 
     }); 
     } 

     $(window).scroll(function() { 
     $("iframe").each(function() { 
      if($(window).scrollTop() > $(this).offset().top - 200) { 
       $(this).css('opacity',1); 
       player.playVideo(); 
      } else { 
       $(this).css('opacity',0); 
       player.stopVideo(); 
      } 
     }); 
    }); 

    </script> 
    </head> 
    <body> 



    <div id="e1">Some element 1</div> 
    <div id="e2">Some element 2</div> 
    <div id="e3">Some element 3</div> 
    <div id="ytplayer">Youtube player here</div> 
    <div id="e4">Some element 4</div> 
    <div id="e5">Some element 5</div> 
    </body> 
    </html> 
+0

Спасибо за ваш ответ - будет метод вы вывесили работы с видео на YouTube? – user3776906

+0

Да. Я пробовал iframe, и он работает. вы можете попробовать его здесь, на моем сайте, где он автоматически воспроизводит youtube. http://www.foftv.com/testyt.html –

+0

Спасибо за ответ - я могу заставить автозапуск работать, но хочу, чтобы он автоматически запускался, когда пользователь прокручивается мимо определенной точки. Я попробовал сценарий, который вы связали, но это не работает для меня. Что вы использовали для источника в фрагменте? – user3776906

Смежные вопросы