Slide de Videos

rbsngarcia · Agosto 23, 2016

pessoal, estou a procura na internet para fazer um slide de vídeo.

bom até ai tudo bem, o problema é que preciso que só avance para o próximo slide quando o vídeo do slide atual acabar.

encontrei algo nesse link:

http://clubedosgeeks.com.br/programacao/javascript/plugin-jquery-e-bootstrap-para-slide-show-com-video-youtube-e-vimeo

a idéia é a mesma, mas infelizmente é apenas para videos do youtube ou vimeo, videos salvos no servidor não funciona.

alguém pode me ajudar?

obrigado.

sousatg · Agosto 23, 2016

Para fazer o que você quer pode utilizar jQuery e o evento "ended", sempre que o evento ended é gerado passa para o proximo slider e desabilita toda a funcionalidade para passar para o proximo slide.

Pode ver o código neste link:

http://sousatg.github.io/forum/imasters/2016/08/23/duvida-slider-videos.html

rbsngarcia · Agosto 23, 2016

Para fazer o que você quer pode utilizar jQuery e o evento "ended", sempre que o evento ended é gerado passa para o proximo slider e desabilita toda a funcionalidade para passar para o proximo slide.

Pode ver o código neste link:

http://sousatg.github.io/forum/imasters/2016/08/23/duvida-slider-videos.html

OK, Vou Fazer o teste, Obrigado.

rbsngarcia · Agosto 24, 2016

deu certo. segue o codigo para quem precisar de exemplo. Obrigado sousatg.

<!DOCTYPE html>

<head>

<title>Full Slider - Start Bootstrap Template</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<span class="sr-only">Toggle navigation</span>

</button>

<a class="navbar-brand" href="#">Start Bootstrap</a>

</div>

<li>

<a href="#">About</a>

</li>

<li>

<a href="#">Services</a>

</li>

<li>

<a href="#">Contact</a>

</li>

</ul>

</div>

</div>

</nav>

</ol>

Your browser does not support the video tag.

</video>

</div>

<h2>Caption 2</h2>

</div>

<h2>Caption 3</h2>

</div>

</a>

</a>

</header>

<h1>Full Slider by Start Bootstrap</h1>

<p>The background images for the slider are set directly in the HTML using inline CSS. The rest of the styles for this template are contained within the <code>full-slider.css</code>file.</p>

</div>

<hr>

</div>

</footer>

</div>

$("#myCarousel").carousel({

interval: 0

});

$("#myCarousel .active video").on( 'ended', function(){

$("#myCarousel").carousel('next');

});

</script>

</body>

</html>

sousatg · Agosto 26, 2016

deu certo. segue o codigo para quem precisar de exemplo. Obrigado sousatg.

De nada :) Depois faço o plugin para jQuery (quando tiver tempo) e coloco o link aqui.

rbsngarcia · Agosto 26, 2016

De nada :) Depois faço o plugin para jQuery (quando tiver tempo) e coloco o link aqui.

Sousatg

Valeu pela dedicação em ajudar!!

E aproveitando um pouco da boa vontade!! rsrs, Teria alguma Opção de os videos iniciarem apenas quando for seu slide? pois quando abro a pagina todos os videos iniciam junto.

rbsngarcia · Agosto 26, 2016

Sousatg

Valeu pela dedicação em ajudar!!

E aproveitando um pouco da boa vontade!! rsrs, Teria alguma Opção de os videos iniciarem apenas quando for seu slide? pois quando abro a pagina todos os videos iniciam junto.

Consegui resolver o problema de dar play apenas quando chegar a vez de cada video. e no final do slide ele atualiza a pagina.. segue o codigo pra quem precisar:

<!DOCTYPE html>

<head>

<title>Full Slider - Start Bootstrap Template</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

<span class="sr-only">Toggle navigation</span>

</button>

<a class="navbar-brand" href="#">Start Bootstrap</a>

</div>

<li>

<a href="#">About</a>

</li>

<li>

<a href="#">Services</a>

</li>

<li>

<a href="#">Contact</a>

</li>

</ul>

</div>

</div>

</nav>

</ol>

Your browser does not support the video tag.

</video>

</div>

Your browser does not support the video tag.

</video>

</div>

Your browser does not support the video tag.

</video>

</div>

</a>

</a>

</header>

<h1>Full Slider by Start Bootstrap</h1>

<p>The background images for the slider are set directly in the HTML using inline CSS. The rest of the styles for this template are contained within the <code>full-slider.css</code>file.</p>

</div>

<hr>

</div>

</footer>

</div>

var variavel_gobal = 1;

var variavel_gobalFinal = 2;

function playVid() {

document.getElementById("video"+variavel_gobal).play();

document.getElementById("myVideo");

}

$("#myCarousel").carousel({

interval: 0

});

$("#myCarousel video").on( 'ended', function(){

$("#myCarousel").carousel('next');

if(variavel_gobal <=variavel_gobalFinal){

variavel_gobal++;

playVid();

}else{

window.location.reload(); //Atualiza pagina no final do slide

}

});

</script>

</body>

</html>

Entrar

Arquivado

Slide de Videos

Recommended Posts

rbsngarcia 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

sousatg 9

Compartilhar este post

Link para o post

Compartilhar em outros sites

rbsngarcia 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

rbsngarcia 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

sousatg 9

Compartilhar este post

Link para o post

Compartilhar em outros sites

rbsngarcia 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

rbsngarcia 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Data igual do facebook

Fazer busca no Banco de dados usando vários critério

agregar dados em VBA excel

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante