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:
Postar um comentário