javascript с функцией html <video>load () и play () не запускается

Question

Я создавал настраиваемый видеоплеер с HTML и столкнулся с проблемой, я подозреваю, что это связано с моим javascript, после долгих часов работы над ним я допускаю поражение.

Проблема в том, что моя функция loadChapter () работает правильно из того, что я вижу, но при повторном запуске методы video.load () и video.play (), похоже, просто перестают работать.

Я не могу включить ссылку на фактическую страницу из-за соглашений о раскрытии с клиентом, вот код с цензурой.

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">&nbsp;</div></a></li>
                <li><a href="X">2.<span>X</span><div class="clear">&nbsp;</div></a></li>
                <li><a href="X">3.<span>X</span><div class="clear">&nbsp;</div></a></li>
                <li><a href="X">4.<span>X</span><div class="clear">&nbsp;</div></a></li>
                <li><a href="X">5.<span>X</span><div class="clear">&nbsp;</div></a></li>
                <li><a href="X">6.<span>X</span><div class="clear">&nbsp;</div></a></li>
                <li><a href="X">7.<span>X</span><div class="clear">&nbsp;</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">&nbsp;</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 (с 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);
    };
});

});

«Плакат» для видео-тега и разметки в dom все правильно загружается через скрипт loadChapter (), но у менятрудно понять, почему видео будет загружаться и воспроизводиться только один раз.

Есть что-то, чего я здесь упускаю?

Answer 1

Решение этой проблемы было более загадочным, чем некорректный код, когда я тестировал видео в Firefox, оно работало нормально, кажется, что браузеры webkit испытывают некоторые проблемы с методом video.load (), когда файлы упоминаются во вложенныхтеги.

Я решил это, написав условное утверждение и прикрепив src для нового видео непосредственно к самому тегу:

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();
};