Pokaż niestandardowy obraz przed rozpoczęciem odtwarzania filmu z youtube

Próbuję wyświetlić obraz w div gracza, a następnie po kliknięciu przycisku, zastąp go filmem (zastąp element div ramką iFrame). Oto mój kod:Pokaż niestandardowy obraz przed rozpoczęciem odtwarzania filmu z youtube

<!DOCTYPE html> 
<head> 
<style type="text/css"> 
html { 
text-align: center; 
} 

#player { 
display: inline-block; 
width: 640px; 
height: 360px; 
background: url(http://placehold.it/640x360) no-repeat; 
} 
</style> 
</head> 
<html> 
    <body> 
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. --> 
    <div id="player"></div> 
    <p><button onclick="playMe()">Play</button></p> 

    <script> 
    function playMe() { 
     // 2. This code loads the IFrame Player API code asynchronously. 
     var tag = document.createElement('script'); 
     tag.src = "https://www.youtube.com/iframe_api"; 
     var firstScriptTag = document.getElementsByTagName('script')[0]; 
     firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

     // 3. This function creates an <iframe> (and YouTube player) 
     // after the API code downloads. 
     var player; 
     function onYouTubeIframeAPIReady() { 
     player = new YT.Player('player', { 
      height: '360', 
      width: '640', 
      videoId: 'JW5meKfy3fY', 
      playerVars: { 'autoplay': 0, 'controls': 0, 'rel': 0, 'showinfo': 0 }, 
      events: { 
      'onReady': onPlayerReady 
      } 
     }); 
     } 

     // 4. The API will call this function when the video player is ready. 
     function onPlayerReady(event) { 
     event.target.playVideo(); 
     } 

    } 

    </script> 
    </body> 
</html>

Ale to nie działa.

Działa, gdy usunięto funkcję "playMe", ale potrzebowałbym uruchomienia wideo po kliknięciu przycisku/div/łącza. Próbowałem umieścić zdjęcie i wideo w oddzielnym obrazie na górze filmu, a następnie po ukryciu wierzchniej części div i rozpoczęciu wideo, ale to też nie zadziałało.

Źródło

2012-11-01 Noga

To jest problem ze zmienną skalą.

Funkcja onYouTubeIframeAPIReady musi być zmienną globalną - podobnie jak zmienna odtwarzacza.

Uważam, że ten przykład powinien być podstawą do tego, co chcesz (jest warunek wyścigu, jeśli klikniesz przycisk przed pobraniem api, ale pełna implementacja będzie prawdopodobnie zależna od aplikacji, więc zostawię to czytnik)

<!DOCTYPE html> 
<head> 
<style type="text/css"> 
html { 
text-align: center; 
} 

#player { 
display: inline-block; 
width: 640px; 
height: 360px; 
background: url(http://placehold.it/640x360) no-repeat; 
} 
</style> 
</head> 
<html> 
    <body> 
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. --> 
    <div id="player"></div> 
    <p><button onclick="playMe()">Play</button></p> 

    <script> 
    // 2. This code loads the IFrame Player API code asynchronously. 
    var tag = document.createElement('script'); 
    tag.src = "https://www.youtube.com/iframe_api"; 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

    // 3. called after the API code downloads. 
    var player; 
    function onYouTubeIframeAPIReady() { 
     // don't need anything here 
    } 

    // 4. The API will call this function when the video player is ready. 
    function onPlayerReady(event) { 
     event.target.playVideo(); 
    } 

    function playMe() { 
     if (window.YT) { 
      player = new YT.Player('player', { 
         height: '360', 
         width: '640', 
         videoId: 'JW5meKfy3fY', 
         playerVars: { 'autoplay': 0, 'controls': 0, 'rel': 0, 'showinfo': 0 }, 
         events: { 
          'onReady': onPlayerReady 
         } 
        }); 
     } 
    } 
    </script> 
    </body> 
</html>

Źródło

2012-11-07 18:43:54

To działa dokładnie tak, jak chciałem, dziękuję bardzo. – Noga

Pokaż niestandardowy obraz przed rozpoczęciem odtwarzania filmu z youtube

Odpowiedz

Powiązane problemy