Use of file path from input

Question

I have a problem. When I add new element to my bullet list:

<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>

with this function:

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

when I switch video to one from default and back to added it will not play. To play video I use this function:

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

Also my fileName is just bunch of random letters and numbers. Can You tell me what am I doing wrong?

You're not doing anything wrong with the file name. For security reasons browsers don't allow the actual name or path of the file to be obtained through javascript. — Adam Merrifield
– Adam Merrifield, Commented Jun 22, 2014 at 20:35
So is there any option to play the video with saved fileURL under <li movieurl> after click? — KorWojci
– KorWojci, Commented Jun 22, 2014 at 20:38
You need to upload it to the server, retrieve it and then play it — Juan Garcia
– Juan Garcia, Commented Jun 22, 2014 at 21:15

Adam Merrifield · Accepted Answer · 2014-06-23 00:49:00Z

1

I believe this problem you're having is because the videos you add with the file input are not bound to the click event handler. You need to delegate this listener. I've made a few changes to the code that you had but the main one is $("#playlist").on("click", "li", function () { to make sure that the lis that you add dynamically still have the click event listening. I've added a demo that works also.

UPDATE: I've updated the code so when an li is clicked the #videoarea gets a .data of the index of which li was clicked. After that, I've added a ended event listener on #videoarea. Now when the video is done playing it it will get the li of the video that just finished, then grab the .next li, then trigger a click of that next 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');
    }
});

DEMO

edited Jun 23, 2014 at 0:49

answered Jun 22, 2014 at 21:18

Adam Merrifield

10.4k4 gold badges44 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

KorWojci Over a year ago

Thanks! Maybe You know also how to make to play next video automatically after end of previous video?:)

Adam Merrifield Over a year ago

@KorWojci let me do a little research and get back to you

Adam Merrifield Over a year ago

@KorWojci I've updated my answer to achieve what you wanted in the comment.

Collectives™ on Stack Overflow

Use of file path from input

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related