My online video reader is not working. Any suggestions?-CodePudding

My HTML code is not working for some reason. My HTML Consist's of:

<input type="file" id="upload" accept=".mp4,.webm, .mov"/><br>
<video id="video" controls>
  <source src="" id="srcvideo" />
</video>
<script>
var y = document.getElementById("audio");
function handleFiles(event) {
    var files = event.target.files;
    $("#srcvideo").attr("srcvideo", URL.createObjectURL(files[0]));
    document.getElementById("video").load();
    y.play();
}
</script>

but for some reason, this code does not display the video. I tried to use the same code as you would audio, but it wont work either. if you have any suggestions please respond back!
-Thanks, rxgkit

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" id="upload" accept=".mp4,.webm, .mov"/><br>
<video id="video" controls>
  <source src="" id="srcvideo" />
</video>
<script>
var y = document.getElementById("audio");
function handleFiles(event) {
    var files = event.target.files;
    $("#srcvideo").attr("srcvideo", URL.createObjectURL(files[0]));
    document.getElementById("video").load();
    y.play();
}
</script>

CodePudding user response：

I think this is what you need https://stackoverflow.com/a/9349984/8815211 . Seems to have been discussed here.

CodePudding user response：

You are doing a couple of things wrong, not linking handleFiles anywhere and pointing 'y' to 'audio' instead of 'video', but overall your code is almost fine. Look at my snippet working.

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" id="upload" accept=".mp4,.webm, .mov"/><br>
<video id="video" controls>
</video>
<script>
function handleFiles(event) {
    var y = document.getElementById("video");
    var file = event.target.files[0];
    y.src = URL.createObjectURL(file);
    y.load();
    y.play();
}
const inputFile = document.getElementById('upload')
inputFile.addEventListener('change', handleFiles);
</script>