javascript con la función html <video> load() y play() no se activa
He estado construyendo un reproductor de video personalizado con HTML y me encontré con un problema, sospecho que se debe a mi javascript, después de trabajar durante horas tratando de resolverlo, admito la derrota.
El problema es que mi función 'loadChapter()' se está ejecutando correctamente por lo que puedo ver, pero cuando se activa por segunda vez, los métodos video.load() y video.play() parecen dejar de funcionar.
No puedo incluir un enlace a la página real debido a acuerdos de divulgación con el cliente, aquí está el código censurado.
HTML:
<div id="shell">
<div id="sidebar">
<div id="logo">
<a href="#">X</a>
</div>
<nav>
<ul id="chapters">
<li><a href="X">1.<span>X</span><div class="clear"> </div></a></li>
<li><a href="X">2.<span>X</span><div class="clear"> </div></a></li>
<li><a href="X">3.<span>X</span><div class="clear"> </div></a></li>
<li><a href="X">4.<span>X</span><div class="clear"> </div></a></li>
<li><a href="X">5.<span>X</span><div class="clear"> </div></a></li>
<li><a href="X">6.<span>X</span><div class="clear"> </div></a></li>
<li><a href="X">7.<span>X</span><div class="clear"> </div></a></li>
</ul>
</nav>
<div id="controls">
<div id="vidnav">
<a id="prev" title="Previous Chapter" href="#">Prev</a>
<div>
<a id="play" title="Play Chapter" href="#" onclick="document.getElementById('video').play()" style="display:none;">Play</a>
<a id="pause" title="Pause Chapter" href="#" onclick="document.getElementById('video').pause()">Pause</a>
</div>
<a id="next" title="Next Chapter" href="#">Next</a>
</div>
<div class="clear"> </div>
<div id="vidseek">
</div>
</div>
</div>
<div id="content">
<video id="video" autoplay="autoplay">
<source id="mp4" src="video/X.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source id="webm" src="video/X.webm" type='video/webm; codecs="vp8, vorbis"' />
Your browser does not support HTML video.
</video>
</div>
</div>
javascript (con jQuery):
$(document).ready(function(){
var shell = "#shell";
var objH = $(shell).outerHeight();
autoMargins(shell);
$(window).resize(function() {
autoMargins(shell);
});
function autoMargins(obj){
var winH = $(window).height();
if (winH >= objH ) {
var topMargin = (winH/2) - (objH/2);
$(obj).css('marginTop', topMargin);
};
};
// GET VIDEO FILES
var video = document.getElementById('video')
var filepath = "video/";
var chapters = new Array();
var totalChapters = $('#chapters li').length;
for( i=0; i < totalChapters; i++ ) {
chapters[i] = new Array();
filename = $('#chapters li a:eq(' + i + ')').attr('href');
for( j=0; j < 3; j++ ) {
chapters[i][0] = filepath + filename + ".png";
chapters[i][1] = filepath + filename + ".mp4";
chapters[i][2] = filepath + filename + ".webm";
};
};
// CHAPTER CONTROLS
var currentChapter = 0;
$('#chapters li a').click(function(e) {
e.preventDefault();
currentChapter = $(this).parent().index();
loadChapter(currentChapter);
});
var mp4 = document.getElementById("mp4");
var webm = document.getElementById("webm");
function loadChapter(i) {
$('#video').attr('poster', chapters[i][0]);
mp4.setAttribute("src", chapters[i][1]);
webm.setAttribute("src", chapters[i][2]);
video.load();
video.play();
};
$('#play').click(function(e) {
e.preventDefault();
$('#play').toggle();
$('#pause').toggle();
});
$('#pause').click(function(e) {
e.preventDefault();
$('#play').toggle();
$('#pause').toggle();
});
$('#next').click(function(e) {
e.preventDefault();
if (currentChapter < totalChapters ) {
currentChapter++;
loadChapter(currentChapter);
};
});
$('#prev').click(function(e) {
e.preventDefault();
if (currentChapter >= 0 ) {
currentChapter--;
loadChapter(currentChapter);
};
});
});
El 'póster' para la etiqueta de video y el marcado en el dom se cargan correctamente a través del script loadChapter(), pero me cuesta entender por qué el video solo se carga y reproduce una vez.
¿Hay algo que me falta aquí?
La solución a este problema fue más críptica que el código incorrecto, cuando probé el video en Firefox funcionaba bien, parece que los navegadores webkit tienen algunos problemas con el método video.load() cuando se hace referencia a los archivos en etiquetas anidadas.
Lo resolví escribiendo una declaración condicional y adjuntando el src del nuevo vídeo directamente a la etiqueta:
function loadChapter(i) {
//$('#video').attr('poster', chapters[i][0]);
if($.browser.safari || $.browser.msie) {
$('#video').attr('src', chapters[i][1]);
} else {
$('#video').attr('src', chapters[i][2]);
};
video.load();
video.play();
};