Obtenir Plusieurs Incorporé des Vidéos Youtube à Jouer Automatiquement en Séquence

Est-il un moyen simple d'avoir plusieurs incorporé des vidéos YouTube sur une page et de les avoir commencer à jouer dès que la page est ouverte et quand le premier ont fini la seconde commencer?

J'espérais quelque chose de ce genre:

<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/OdT9z-JjtJk&autoplay=1"></param><embed src="http://www.youtube.com/v/OdT9z-JjtJk&autoplay=1" type="application/x-shockwave-flash" width="425" height="350"></embed></object>
<br>
<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/NlXTv5Ondgs&autoplay=2"></param><embed src="http://www.youtube.com/v/NlXTv5Ondgs&autoplay=2" type="application/x-shockwave-flash" width="425" height="350"></embed></object>

Et il le fait pour la première mais pas la seconde. J'imagine que je peut-être besoin de plonger dans l'API. Quelqu'un a des suggestions?

Pourquoi ne pas simplement ajouter ces vidéos dans YouTube playlist et intégrer la liste de lecture sur votre site web. Lors de la première vidéo se termine, la prochaine va commencer 🙂

InformationsquelleAutor clifgray | 2013-03-04

12

À l'aide de la Youtube IFrame API, vous pouvez le faire facilement.

La seule pièce dont vous avez besoin pour configurer voici le tableau de youtube Id. Vous pouvez récupérer ceux de la partie après le /v/dans l'URL (Si besoin, vous pouvez modifier le javascript pour charger Url au lieu de Id. J'aime cette manière de mieux.
```
<div id="player"></div>
<script src="//www.youtube.com/iframe_api"></script>

<script>
    /**
     * Put your video IDs in this array
     */
    var videoIDs = [
        'OdT9z-JjtJk',
        'NlXTv5Ondgs'
    ];

    var player, currentVideoId = 0;

    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            height: '350',
            width: '425',
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }

    function onPlayerReady(event) {
        event.target.loadVideoById(videoIDs[currentVideoId]);
    }

    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.ENDED) {
            currentVideoId++;
            if (currentVideoId < videoIDs.length) {
                player.loadVideoById(videoIDs[currentVideoId]);
            }
        }
    }
</script>
```
- ok super! merci pour l'aide. maintenant, est-il possible de les faire apparaître dans les séparer des joueurs et juste jouer consécutivement?
- Peut-être que j'ai mal compris la demande exacte - voulez-vous tous à l'affichage sur l'écran? et puis une à jouer après l'autre? De sorte que vous pouvez toujours voir la vignette/fini écran de chaque? Si oui, qui est légèrement différent - vous venais de saisir tous les Id des joueurs clés de l'videoIDs de l'objet et de la boucle à travers cela. Si vous avez besoin d'aide, veuillez préciser exactement ce que vous voulez et je vais vous aider.
- merci Aaron. Oui c'est exactement ce que j'aimerais faire. Je veux avoir tous les joueurs sur l'écran et d'en faire la boucle à travers eux. La raison pour cela est que les utilisateurs peuvent modifier la vidéo en cliquant sur un nouveau joueur.
- Vous n'êtes pas encore être incroyablement clair avec l'objectif. Si vous souhaitez que plusieurs joueurs à l'écran, chacune pour commencer à jouer après le précédent s'est arrêté - de plus, vous voulez cliquez sur le comportement. C'est qu'un comportement que l'cliqué sur la vidéo s'arrête de l'autre à partir de la lecture et le processus prend son envol à partir de là (c'est à dire tout ce qui est après que l'on joue de nouveau) - ou qu'il s'arrête la lecture automatique une fois pour toutes?
- Hey, Aaron.. Pourriez-vous m'aider avec ça? J'y ai ajouté mes identifiants et je reçois en retour un message d'erreur. J'ai même essayé de télécharger une vidéo avec un seul ID, juste pour voir si j'étais en tapant les éléments du tableau de manière incorrecte. Il ne fonctionne toujours pas et affiche un message d'erreur. J'aime la solution que vous avez ici, et si je pouvais le faire fonctionner, ce serait incroyable! C'est l'erreur dont je parle sur mon site: floridashuttleservices.com
InformationsquelleAutor Aaron Saray

Voici un exemple d'utilisation de la YouTube Iframe Joueur de l'API.

Il y a deux incorpore (joueur1 et joueur2). La vidéo autoplays lorsque le joueur 1 a chargé, et il commence joueur2 quand il se termine.

Voici la jfiddle si vous voulez jouer un peu avec elle.

Et le code:

<div id="player1"></div>
<div id="player2"></div>
<script>
    var tag = document.createElement('script');
    tag.src = "//www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var player1;
    var player2;

    function onYouTubeIframeAPIReady() {
        player1 = new YT.Player('player1', {
            height: '350',
            width: '425',
            videoId: 'OdT9z-JjtJk',
            events: {
                'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
            }
        });
        player2 = new YT.Player('player2', {
            height: '350',
            width: '425',
            videoId: 'NlXTv5Ondgs'
        });
    }

    function onPlayerReady(event) {
        event.target.playVideo();
    }

    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.ENDED) {
            player2.playVideo();
        }
    }
</script>

InformationsquelleAutor Matt Koskela

Je ne suis pas bon en javascript. Mais j'ai quelques question similaire avant.

vous pourriez referece

jugement de la première vidéo est terminé, puis exécuter la seconde. vous pouvez définir des 2 fonctions.

<div id="player1"></div>
<br>
<object width="425" height="350"><param name="movie" id="player2-param" value="http://www.youtube.com/v/OdT9z-JjtJk"></param><embed src="http://www.youtube.com/v/OdT9z-JjtJk" type="application/x-shockwave-flash" width="425" height="350" id="player2-embed"></embed></object>

puis

function onPlayerStateChange(event) {        
            if(event.data === 0) {          
                $('#player2-param').attr('value','http://www.youtube.com/v/OdT9z-JjtJkautoplay=1');//jquery
                $('#player2-embed').attr('src','http://www.youtube.com/v/OdT9z-JjtJkautoplay=1');//jquery

            }
        }

espère que cela pourrait vous aider à et y écrire le plus beau code, merci.

InformationsquelleAutor yuli chika

0

Utiliser l'API youtube et de mettre la lecture automatique vrai;faire aplaylist sur youtube et donner le lien pour que.

InformationsquelleAutor Nishank

Basé sur prev exemple de code. J'ai créé de Base de Vanille JavaScript Player Youtube - Avec liste de lecture. La caisse Lecteur Youtube - Avec liste de lecture

HTML:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Basic Vanilla  JavaScript Youtube Player- With playlist</title>
</head>
<body>
<div class="player" style="width: 480px;height:360px;max-width: 50%;margin: 0 auto;">
<div id="youtube" style="width: 100%;height: 100%"></div>
<div class="controls" style="text-align: center;margin: 0 auto;">
<button style="padding: 10px;width: 100px;background-color: #167AC6;"
onclick="YouTubePlayer.playPrevious()">Prev
</button>
<button style="padding: 10px;width: 100px;background-color: #167AC6;margin-left: 30px;"
onclick="YouTubePlayer.playNext()">Next
</button>
</div>
</div>
<script src="//www.youtube.com/iframe_api"></script>
<script>
var YouTubePlayer = {
current: 0,
player: null,
/**
* Tracks ids here...
*/
videos: [
'vQMnaDNw5FQ',
'Dp6lbdoprZ0',
'OulN7vTDq1I'
],
currentlyPlaying:function(){
console.info('Current Track id', YouTubePlayer.videos[YouTubePlayer.current]);
return YouTubePlayer.videos[YouTubePlayer.current];
},
playNext: function () {
YouTubePlayer.increaseTrack()
if (YouTubePlayer.player) {
YouTubePlayer.currentlyPlaying();
YouTubePlayer.player.loadVideoById(YouTubePlayer.videos[YouTubePlayer.current]);
} else {
alert('Please Wait! Player is loading');
}
},
playPrevious: function () {
YouTubePlayer.decreaseTrack()
if (YouTubePlayer.player) {
YouTubePlayer.currentlyPlaying();
YouTubePlayer.player.loadVideoById(YouTubePlayer.videos[YouTubePlayer.current]);
} else {
alert('Please Wait! Player is loading');
}
},
increaseTrack: function () {
YouTubePlayer.current = YouTubePlayer.current + 1;
if (YouTubePlayer.current >= YouTubePlayer.videos.length) {
YouTubePlayer.current = 0;
}
},
decreaseTrack: function () {
YouTubePlayer.current = Math.max(YouTubePlayer.current - 1, 0);
},
onReady: function (event) {
event.target.loadVideoById(YouTubePlayer.videos[YouTubePlayer.current]);
},
onStateChange: function (event) {
if (event.data == YT.PlayerState.ENDED) {
YouTubePlayer.playNext();
}
}
}
function onYouTubeIframeAPIReady() {
YouTubePlayer.player = new YT.Player('youtube', {
height: '350',
width: '425',
events: {
'onReady': YouTubePlayer.onReady,
'onStateChange': YouTubePlayer.onStateChange
}
});
}
</script>
</body>
</html>

InformationsquelleAutor xdeepakv

Ne pas être compliqué, il suffit d'utiliser l'iframe

<iframe width="560" height="315" src="https://www.youtube.com/embed/nWHpU7H7Clc?playlist=b6KzNmLMW6o,qWE6g8puu98" frameborder="0" allow="autoplay; encrypted-media" style="width:900px;height:400px" autoplay="true"></iframe>

InformationsquelleAutor JohnMathew

Vous devez vous connecter pour publier un commentaire.