Lire des vidéos Youtube sur sur

Je suis en utilisant des API Youtube, et ont plusieurs Divs sous forme de vignettes. Quand une vignette (div) est cliqué, le correspondant de la vidéo de Youtube devrait jouer. Je suis à l'aide d'un élément iframe pour la vidéo, et la page web est constituée d'HTML, de CSS et de JavaScript. Si je n'utilise pas un bouton (vignettes/div avec onclick), mais plutôt avoir une page vierge avec l'API Youtube code JavaScript, ça marchera. Cependant, lorsque j'essaye d'enrouler le tout à l'intérieur d'un appel de fonction (à partir de la div onclick) rien ne se passe, mais j'ai cette erreur.

"A refusé d'exécuter le script de" https://www.youtube.com/embed/HVldRjNb4BE "parce que son type MIME "text/html") n'est pas exécutable, et à la stricte MIME type de contrôle est activé."

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 est copié à partir de https://developers.google.com/youtube/iframe_api_reference.

Quand c'est tout ce que j'ai dans le document, un joueur est-il lorsque le chargement de la page, et la vidéo est prête à jouer.
Donc, pour préciser ma question, comment puis-je faire en sorte que lorsqu'un utilisateur clique sur un des boutons (div), le lecteur Youtube affiche et la lecture de la vidéo?

peut fournir la conception html pour que

InformationsquelleAutor Fred | 2017-03-10

Bonjour, je pense que cela va vous aider à :

<!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>

OMG, je vous aime. Merci!
J'utilise ce code, mais je tiens à ajouter ?rel=0 en vidéo comment ajouter s'il vous plaît dites..?
Désolé, je ne comprends pas ce que vous demandez.
Kumar, pour aider à clarifier pour vous: '?rel=0 " est ce qui est ajouté à la fin de l'URL de la vidéo d'un embeded vidéo youtube de ne PAS montrer les vidéos suggérées lors de la fin de la vidéo.
Bien que cela fonctionne pour la vidéo youtube que vous avez utilisé dans cet exemple, il ne fonctionne pas pour les vidéo de youtube, je l'ai fait à. J'obtiens cette erreur: Refusé d'exécuter le script de <theurliused.com> parce que son type MIME "text/html") n'est pas exécutable, et à la stricte MIME type de contrôle est activé.
parce que votre vidéo de type MIME Text/html

InformationsquelleAutor Amitesh Kumar

Vous devez vous connecter pour publier un commentaire.