Question

我有问题。当我向子弹列表中添加新元素时：

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

此外，我的fileName只是一堆随机字母和数字。你能告诉我我做错了吗？

Answer 1

我相信您遇到的这个问题是因为您使用文件输入添加的视频未绑定到click事件处理程序。您需要委派此侦听器。我对您拥有的代码进行了一些更改，但主要代码是$("#playlist").on("click", "li", function () {，以确保您动态添加的li仍然可以监听点击事件。我添加了一个也适用的演示。

更新：我已更新代码，因此当点击li时，#videoarea会获得.data索引的li ended点击了。之后，我在#videoarea上添加了li事件监听器。现在，当视频完成播放时，它将获得刚刚完成的视频的.next，然后抓住li click，然后触发下一个li { {1}}。

$("#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');
    }
});

DEMO

使用来自输入的文件路径

1 个答案: