Spielen Sie ein Video mit der YoutubeAPI ab
-
26-12-2019 - |
Frage
Ich habe ein Video, das ich mit der YouTubeAPI (iframe) abspiele.Anstelle des Videos wird ein Bild angezeigt, bis auf das Steuerelement geklickt wird, um das Video zu starten.Das Bild wird mit dem Video ausgetauscht und das Video wird abgespielt.Wenn das Video endet, wird der Vorgang umgekehrt.Das Problem besteht darin, dass ich das Video mithilfe meiner benutzerdefinierten Steuerung ein zweites Mal neu starten kann.Hier ist mein Code...
<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>
Wie kann ich dafür sorgen, dass das Video ein zweites, drittes oder viertes Mal abgespielt wird?
Lösung
Obwohl es das Spiel anruft, setzte sich das Video nicht zurück zum Beggen.Ich musste einstellen
generasacodicetagpre.in der auf platcherstatechange () -Funktion.
generasacodicetagpre.https://developers.google.com/youtube/js_api_reference#Einko
Andere Tipps
Sie können eine hinzufügen loop
Parameter:
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
},
loop: 1
});
}
https://developers.google.com/youtube/player_parameters#loop
Oder Sie könnten Ihren Check-in durchführen onPlayerStateChange
wenn der Status ist 0
Wenn das Video zu Ende ist, rufen Sie einfach an event.target.playVideo();