Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

razs

Leitor de multiplos videos em loop

Recommended Posts

Boas,

 

Preciso de um leitor de múltiplos vídeos em loop, este projecto serve para ter um ecrã com vídeos sempre a passar e algum texto ao lado pelo que nao sera precisa interacção do utilizador.

 

Os vídeos estarão alojados no localhost e serão maioritariamente mp4.

 

Tenho visto alguns exemplos mas nenhum passa para o video seguinte, alguém me pode ajudar?

 

 

 

Consegui ter este exemplo a funcionar mas agora não passa para o vídeo seguinte.

 

<script src="http://api.html5media.info/1.1.5/html5media.min.js"></script>

 

<figure id="video_player">

<div id="video_container">
<video controls="controls" poster="http://demosthenes.info/assets/images/vid-glacier.jpg" autoplay>
<source src="http://localhost/Painel_Informativo/videos/Uso de empilhadora e percuso.mp4" type="video/mp4" >
<source src="http://localhost/Painel_Informativo/videos/webm/Uso de empilhadora e percuso.webm" type="video/webm" >
</video>
</div>

<figcaption>

<a href="http://localhost/Painel_Informativo/videos/Uso de empilhadora e percuso.mp4" class="currentvid">
<img src="http://demosthenes.info/assets/images/vid-glacier.jpg" alt="Athabasca Glacier">
</a>
<a href="http://localhost/Painel_Informativo/videos/napo-008-lighten-the-load-episode-010-think-to-move.mp4">
<img src="http://demosthenes.info/assets/images/vid-lake.jpg" alt="Athabasca Lake">
</a>
<a href="napo-001-best-signs-story-episode-010-hearing-protection-must-be-worn.mp4">
<img src="http://demosthenes.info/assets/images/vid-mountain.jpg" alt="Mountain">
</a>

</figcaption>






</figure>

 

 

<script>

var video_player = document.getElementById("video_player");
video = video_player.getElementsByTagName("video")[0],
video_links = video_player.getElementsByTagName("figcaption")[0],
source = video.getElementsByTagName("source"),
link_list = [],
vidDir = "http://demosthenes.info/assets/videos/",
currentVid = 0,
allLnks = video_links.children,
lnkNum = allLnks.length;
video.removeAttribute("controls");
video.removeAttribute("poster");

(function() {
function playVid(index) {
video_links.children[index].classList.add("currentvid");
source[1].src = vidDir + link_list[index] + ".webm";
source[0].src = vidDir + link_list[index] + ".mp4";
currentVid = index;
video.load();
video.play();
}

for (var i=0; i<lnkNum; i++) {
var filename = allLnks.href;
link_list = filename.match(/([^\/]+)(?=\.\w+$)/)[0];
(function(index){
allLnks.onclick = function(i){
i.preventDefault();
for (var i=0; i<lnkNum; i++) {
allLnks.classList.remove("currentvid");
}
playVid(index);
}
})(i);
}
video.addEventListener('ended', function () {
allLnks[currentVid].classList.remove("currentvid");
if ((currentVid + 1) >= lnkNum) { nextVid = 0 } else { nextVid = currentVid+1 }
playVid(nextVid);
})

video.addEventListener('mouseenter', function() {
video.setAttribute("controls","true");
})

video.addEventListener('mouseleave', function() {
video.removeAttribute("controls");
})

var indexOf = function(needle) {
if(typeof Array.prototype.indexOf === 'function') {
indexOf = Array.prototype.indexOf;
} else {
indexOf = function(needle) {
var i = -1, index = -1;
for(i = 0; i < this.length; i++) {
if(this === needle) {
index = i;
break;
}}
return index;
};}
return indexOf.call(this, needle);
};
var focusedLink = document.activeElement;
index = indexOf.call(allLnks, focusedLink);

document.addEventListener('keydown', function(e) {
if (index) {
var focusedElement = document.activeElement;
if (e.keyCode == 40 || e.keyCode == 39) { // down or right cursor
var nextNode = focusedElement.nextElementSibling;
if (nextNode) { nextNode.focus(); } else { video_links.firstElementChild.focus(); }
}
if (e.keyCode == 38 || e.keyCode == 37) { // up or left cursor
var previousNode = focusedElement.previousElementSibling;
if (previousNode) { previousNode.focus(); } else { video_links.lastElementChild.focus(); }
}
}
});

})();


</script>

 

 

 

Obrigado

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.