Reproducir un vídeo usando YoutubeAPI
-
26-12-2019 - |
Pregunta
Tengo un video que estoy reproduciendo usando YouTubeAPI (iframe).Una imagen está en lugar del video hasta que se hace clic en el control para iniciar el video.La imagen se intercambia con el vídeo y el vídeo se reproduce.Cuando finaliza el vídeo el proceso se invierte.El problema es que puedo hacer que el vídeo se reinicie por segunda vez usando mi control personalizado.Aquí está mi código...
<script src="https://www.youtube.com/iframe_api"></script>
<div class="video" id="vid">
<a class="video-control" href="#"></a>
<img id="video-front" src="<?= get_field('video_image') ?>" class="img-responsive" alt="">
<div class="video-container">
<iframe id="player" type="text/html"
src="http://www.youtube.com/embed/G5M721A0b_Q?enablejsapi=1&rel=0&autoplay=1"
frameborder="0"></iframe>
</div>
</div>
<script>
(function($){
//move vid control
vidControlHeight();
$('.video-control').css('left', '-' + wControl + 'px');
$('.video-control').on('click', function(event){
event.preventDefault();
$('#video-front').hide();
$('.video-container').show();
onYouTubeIframeAPIReady();
})
})(jQuery);
function vidControlHeight(){
var hBox = $('#vid').height() / 2,
hControl = $('.video-control').height() / 2,
boxPosition = hBox - hControl;
wControl = $('.video-control').width() / 2;
$('.video-control').css({'left':'-' + wControl + 'px', 'top': boxPosition + 'px'});
}
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
function onPlayerStateChange(event) {
if(event.data == YT.PlayerState.ENDED){
$('#video-front').show();
$('.video-container').hide();
}
}
</script>
¿Cómo puedo hacer que el vídeo se reproduzca una segunda, tercera o cuarta vez?
Solución
Aunque estaba llamando a jugar, el video no se estaba de vuelta en el principio.Tuve que establecer
player.seekTo(0);
en la función OnPlayerstatechange ().
function onPlayerStateChange(event) {
if(event.data == YT.PlayerState.ENDED){
player.seekTo(0);
$('#video-front').show();
$('.video-container').hide();
}
}
https://developers.google.com/youtube/js_api_reference#seekto
Otros consejos
Puedes agregar un loop
parámetro:
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
},
loop: 1
});
}
https://developers.google.com/youtube/player_parameters#loop
O podrías consultar en tu onPlayerStateChange
si el estado es 0
que es cuando el video ha terminado y solo llama event.target.playVideo();