Assita aqui

Últimas postagens

Como compartilhar playlist do Youtube em loop

Eu consegui gerar um código HTML para usar com um gadget do Blogger (HTML/JavaScript) que começa a reproduzir uma playlist do Youtube automaticamente assim que a pessoa abre a página do Blogger. Quando ela sai, a playlist é interrompida e continua no mesmo ponto quando a pessoa volta ao blogger. O código está aqui em baixo, para usa-lo, copie e inseria em um gadget e cole a parte do link da playlist que quer reproduzir no local indicado. É somente a parte que começa com a letra P até o final. Observe o link abaixo, é de uma playlist do meu canal, o que você precisa é apenas o que está após o segundo sinal de = do link da sua playlist. (https://www.youtube.com/watch?v=_T4N80atV4M&list=PLdteTMz6kLCjnhCplNTPQ_c3U1BmVVbGH)

Veja dois exemplos de como fica. No primeiro link o vídeo está em tamanho pequeno ( https://leonelonline.blogspot.com/ ). Neste segundo link, em tamanho maior ( https://sistemaonline.blogspot.com/ ). Isso é facilmente de alterar, só precisa alterar o tamanho nessa linha: height: '200', e width: '100%',

O código completo é este:

<div id="tv-container" style="max-width: 800px; margin: 0 auto; text-align: center;">

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

<button id="next-btn" style="

margin-top: 15px; padding: 10px 20px; font-size: 18px;

background-color: #007BFF; color: white; border: none; border-radius: 4px; cursor: pointer;">

⏭ Próximo Vídeo

</button>

</div>

<script src="https://www.youtube.com/iframe_api"></script>

<script>

var player;

function onYouTubeIframeAPIReady() {

player = new YT.Player('player', {

height: '200',

width: '100%',

playerVars: {

listType: 'playlist',

list: 'COLE AQUI O LINK DA TUA PLAYLIST',

autoplay: 1,

loop: 1,

controls: 1,

modestbranding: 1,

rel: 0,

playlist: 'COLE AQUI O LINK DA TUA PLAYLIST'

},

events: {

onReady: function(event) {

event.target.mute();

// Recupera tempo salvo (se existir)

let savedTime = localStorage.getItem('yt-current-time');

if (savedTime !== null) {

event.target.seekTo(parseFloat(savedTime), true);

}

event.target.playVideo();

// Salva tempo a cada 1 segundo

setInterval(() => {

if (player && player.getCurrentTime) {

let currentTime = player.getCurrentTime();

localStorage.setItem('yt-current-time', currentTime);

}

}, 1000);

},

onStateChange: function(event) {

if (event.data === YT.PlayerState.ENDED) {

event.target.playVideo();

}

}

}

});

}

document.addEventListener('DOMContentLoaded', function() {

const btn = document.getElementById('next-btn');

btn.addEventListener('click', function() {

if (player && typeof player.nextVideo === 'function') {

player.nextVideo();

}

});

});

</script>


Nenhum comentário: