how can play video file as soon as i select file and side by it stores in different folder-CodePudding

Searching for a code which can help me to solve above question using only HTML,css,javascript.

It would help me a lot,Thanks in advance.

CodePudding user response：

set urlPath is a path of your video store in argument of changeSrc function:

const video = document.querySelector('#video')
const source = document.querySelector('#source')
function changeSrc(urlPath) {
  video.pause();
  source.setAttribute('src', urlPath);
  source.setAttribute('type', 'video/mp4');
  video.load();
  video.play();
}

div {
display: flex;
flex-direction: column;
}

button{
 width: 200px
}

<div>
<button onclick="changeSrc('https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4')">Click to change video</button>
<video id="video" width="320" height="240" controls autoplay>
  <source id= "source" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" type="video/mp4">
</video>
</div>

CodePudding user response：

i hope this would helps you a lot.

            function loadTheVideo()
            {
                 //alert(URL.createObjectURL(document.getElementById("file").files[0]));
                 document.getElementById("video").src = URL.createObjectURL(document.getElementById("file").files[0]);
                 document.getElementById("video").play();
            }

       
            video
            {
                width: 400px;
                height: 400px;
                border: 1px solid black;
            }

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

    </head>
    <body>
          <video controls id="video"></video>
          <br>

            <input onchange="loadTheVideo()" type="file" id="file" name="file">
          
       
    </body>
    </html>