I want create a page that allows a user to choose a video file from their local machine, and then have that video play on html. I have each separate portion figured out, but how do I get them to interact.
To get user input I have this:
<label for="input">Choose a video file to process:</label>
<input type="file"
id="input" name="input_video"
accept="video/mp4, video/mov">
and to play a video I have this:
<video width="320" height="240" controls>
<source src="" type="video/mp4">
</video>
How do I get whatever value is collected from the user input file path as a variable to be what is played by the second piece of code?
Thanks.
My code now looks like this, but the video file player will not play the file I select.
<label for="input">Choose a video file to process:</label>
<script>document.getElementById("input").addEventListener("change", function() {
var media = URL.createObjectURL(this.files[0]);
var video = document.getElementById("video");
video.src = media;
video.style.display = "block";
video.play();
});
</script>
<label for="input">Choose a video file to process:</label>
<input type="file" id="input" name="input_video" accept="video/mp4, video/mov">
<video id="video" width="320" height="240" controls style="display"></video>
Use the input's change
event in javascript to get the file and then use URL.createObjectURL
to create a temorary file to use as a src.
document.getElementById("input").addEventListener("change", function() {
var media = URL.createObjectURL(this.files[0]);
var video = document.getElementById("video");
video.src = media;
video.style.display = "block";
video.play();
});
<label for="input">Choose a video file to process:</label>
<input type="file" id="input" name="input_video" accept="video/mp4, video/mov">
<video id="video" width="320" height="240" controls style="display: none;"></video>
EDIT
Just remove the source element and add the media directly to the video element and then trigger the playing.