Блог

У меня проблема. Когда я добавляю новый элемент в свой маркированный список:

 <input id="wejscie" type="file" accept="video/*"/>
<ol id="playlist">
    <li movieurl="http://html5videoformatconverter.com/data/images/happyfit2.mp4">Happy Fit</li>
    <li movieurl="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4">Sintel</li>          
    <li movieurl="http://html5example.net/static/video/html5_Video_VP8.webm">Resident Evil</li>      
    <li movieurl="http://www.ioncannon.net/examples/vp8-webm/big_buck_bunny_480p.webm">Big Buck    Bunny</li>
</ol>
 

с помощью этой функции:

 $(function() {
    $("#wejscie").on("change", function() {
        var URL = window.URL || window.webkitURL
        var file = this.files[0];
        var fileURL = URL.createObjectURL(file);
        var fileName = '';
        function getName(s) {
            return s.replace(/^.*[\/]/, '');
        }
        fileName = getName(fileURL);
        $("ol").append('<li movieurl="'   fileURL   '">'   fileName   '</li>'); 
    });
});
 

когда я переключаю видео на одно из значений по умолчанию и обратно на добавленное, оно не будет воспроизводиться.
Для воспроизведения видео я использую эту функцию:

 $(function() {
            $("#playlist li").on("click", function() {
                $("#videoarea").attr({
                    "src": $(this).attr("movieurl"),
                    "poster": "",
                    "autoplay": "autoplay"
                });
            });
            $("#videoarea").attr({
                "src": $("#playlist li").eq(0).attr("movieurl"),
                "poster": $("#playlist li").eq(0).attr("moviesposter")
            });
        });
 

Также мое имя файла — это просто набор случайных букв и цифр. Можете ли вы сказать мне, что я делаю не так?

Я полагаю, что эта проблема, с которой вы столкнулись, связана с тем, что видео, которые вы добавляете с помощью ввода файла, не привязаны к обработчику события click. Вам нужно делегировать этот прослушиватель. Я внес несколько изменений в код, который у вас был, но главное — $("#playlist").on("click", "li", function () { убедиться, что у li файлов, которые вы добавляете динамически, все еще прослушивается событие щелчка. Я добавил демонстрационную версию, которая также работает.

ОБНОВЛЕНИЕ: я обновил код так, чтобы при li нажатии на #videoarea an получался .data индекс, на который li был нажат. После этого я добавил прослушиватель ended событий #videoarea . Теперь, когда видео будет воспроизведено, оно получит li только что законченное видео, затем захватит .next li , а затем запустит click следующее li .

 $("#wejscie").on("change", function () {
    var URL = window.URL || window.webkitURL,
        file = this.files[0],
        fileURL = URL.createObjectURL(file),
        fileName = file.name.replace(/^.*//ig, '');

    $("ol").append('<li movieurl="'   fileURL   '">'   fileName   '</li>');
});


$("#playlist").on("click", "li", function () {
    var i = $('#playlist li').index(this);

    $("#videoarea").data('i', i).attr({
        "src": $(this).attr("movieurl"),
        "poster": "",
        "autoplay": "autoplay"
    });
});

$("#videoarea").on('ended', function(){
    var i = $(this).data('i'),
        $nextvid = $('#playlist li:eq(' i ')').next();

    if(!!$nextvid.length){
        $nextvid.trigger('click');
    }
});
 

ДЕМОНСТРАЦИЯ