0

I am trying to load a locally saved video using the form tag and javascript in the browser. It should first be selected and then loaded by pressing the upload button. At the moment I can select and load a video, but it disappears after the function call. I've tried a lot and unfortunately don't know what to do. I would be very happy to get help. Enclosed the complete code. Thank you!

'''

test 


<form method="post" enctype="multipart/form-data" id="myForm">
    <label>choose a video!
        <input name="file" type="file" size="50" accept="video/*" id="file"> 
    </label>        
    <button id="btn">
        Upload
    </button>       
    <output id="dateiListe"></output>   
</form>

<video id="my_player" controls="control"  width="500" height="300" align="center">        
    <source type="video/mp4" id="vidsource">
</video>


<script> 

    document.addEventListener("DOMContentLoaded", function() 
    {
        document.getElementById('myForm').addEventListener('submit', set_source , false);
    });

    const files = document.getElementById('file').files;

    var video = document.getElementById("my_player"); 

    function set_source()
    {
        video.setAttribute("src", URL.createObjectURL(files[0]));
        alert("Upload done");
    }

</script>

'''

dave
  • 1
  • Does this answer your question? [Play local (hard-drive) video file with HTML5 video tag?](https://stackoverflow.com/questions/8885701/play-local-hard-drive-video-file-with-html5-video-tag) – DCR Mar 13 '20 at 21:53
  • Thanks for the quick answer, but unfortunately that doesn't solve my problem (I've already tried it). The new video should only load after clicking the upload button. I think the form tag is actually well suited for this, but something is not quite right yet. Do you have any other suggested solutions? Thank you ! – dave Mar 13 '20 at 23:19
  • when you upload the file where are you placing it on the server? files[0] is incorrect it should just be files. getElementById returns an object not an array. – DCR Mar 13 '20 at 23:26

0 Answers0