web-dev-qa-db-fra.com

Lire la vidéo Youtube en un clic

J'utilise l'API Youtube et j'ai plusieurs Divs sous forme de miniatures. Lorsqu'une vignette (div) est cliquée, la vidéo Youtube correspondante doit être lue. J'utilise un élément iframe pour la vidéo, et la page Web est composée uniquement de HTML, CSS et JavaScript. Si je n'utilise pas de bouton (vignettes/div avec onclick) mais plutôt une page vierge avec le code JavaScript de l'API Youtube, cela fonctionnera. Cependant, lorsque j'essaie de tout envelopper dans un appel de fonction (à partir du clic de la div), rien ne se passe, mais j'obtiens cette erreur.

"Refusé d'exécuter le script à partir de ' https://www.youtube.com/embed/HVldRjNb4BE ' car son type MIME ('text/html') n'est pas exécutable et la vérification stricte du type MIME est activée . "

Voici mon code:

HTML:

<div id="player"></div>

JavaScript:

// 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: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

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

  // 5. The API calls this function when the player's state changes.
  //    The function indicates that when playing a video (state=1),
  //    the player should play for six seconds and then stop.
  var done = false;
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
      //setTimeout(stopVideo, 6000);
      done = true;
    }
  }
  function stopVideo() {
    player.stopVideo();
  }

Ce code vient d'être copié de https://developers.google.com/youtube/iframe_api_reference .

Lorsque c'est tout ce que j'ai dans le document, un lecteur est là lorsque la page se charge et la vidéo est prête à être lue. Donc, pour clarifier ma question, comment puis-je faire en sorte que lorsqu'un utilisateur clique sur l'un des boutons (div), le lecteur Youtube affiche et joue la vidéo?

javascripthtmliframeyoutubeyoutube-api
6
Fred

Bonjour, je pense que cela vous aidera:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Play Youtube Video On Click</title>
    </head>
    <body>
        <button onclick="myFunction();return false;">Click me</button>
        <div id="video"></div>

        <script>
            function myFunction() {
                document.getElementById("video").innerHTML = "<div id='player'></div>";

                // 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: '390',
                    width: '640',
                    videoId: 'M7lc1UVf-VE',
                    events: {
                        'onReady': onPlayerReady,
                        'onStateChange': onPlayerStateChange
                    }
                });
            }

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

            // 5. The API calls this function when the player's state changes.
            //    The function indicates that when playing a video (state=1),
            //    the player should play for six seconds and then stop.
            var done = false;
            function onPlayerStateChange(event) {
                if (event.data == YT.PlayerState.PLAYING && !done) {
                    //setTimeout(stopVideo, 6000);
                    done = true;
                }
            }
            function stopVideo() {
                player.stopVideo();
            }
        </script>
    </body>
</html>
11
Amitesh Kumar