I'm trying to change HTML5 video source with a local file via API "input type='file' " tag. This HTML script is meant to run locally only playing videos in my HD but i cant get the "input" tag to select and play video files on my HD. jsfiddle example

HTML

<!----------------HOW to cahnge VID source Localy--------------------->
<p>working example</p>
<div id="selectFile">
<p>Change VID:
    <br>

    <button onclick="changeVID()">Change VID</button>

</div>
<div>
<video muted controls  id="videoPlayer" >
        <source id='currentVID' src=".mp4" type="video/mp4">

    </video>
</div>
<!----------desired result--------------->
<br>
<div id="desired result" style="background-color:grey;">
<p>desired result</p>
<br>

<div id="selectFile">
<p>Change local VID:
    <br>
<input id="newlocalFILE" name="localfile" size="50" maxlength="100000"
    accept="text/*" type="file" onchange="playlocalVID();">

</div>
<div>
<video muted controls  id="videoPlayer" >
        <source id='currentVID' src="c:\LocalVID.mp4" type="video/mp4">

    </video>
</div>
</div>

JAVASCRIPT

/***********working example****************/

function changeVID(){
        var player = document.getElementById("videoPlayer");
        var currentVID = document.getElementById('currentVID');
        currentVID.setAttribute('src', ".mp4");
        player.load();
        player.play();
}


/***********desired result****************/


function CangelocalVID(){
        var player = document.getElementById("videoPlayer");
        var currentVID =  document.getElementById('currentVID');
        var selectedLocalVID = document.getElementById('newlocalFILE').value;
        currentVID.setAttribute('src',selectedLocalVID);
        player.load();
        player.play();
}

I'm trying to change HTML5 video source with a local file via API "input type='file' " tag. This HTML script is meant to run locally only playing videos in my HD but i cant get the "input" tag to select and play video files on my HD. jsfiddle example

HTML

<!----------------HOW to cahnge VID source Localy--------------------->
<p>working example</p>
<div id="selectFile">
<p>Change VID:
    <br>

    <button onclick="changeVID()">Change VID</button>

</div>
<div>
<video muted controls  id="videoPlayer" >
        <source id='currentVID' src="http://html5multimedia./code/ch9/media/elephants-dream-medium.mp4" type="video/mp4">

    </video>
</div>
<!----------desired result--------------->
<br>
<div id="desired result" style="background-color:grey;">
<p>desired result</p>
<br>

<div id="selectFile">
<p>Change local VID:
    <br>
<input id="newlocalFILE" name="localfile" size="50" maxlength="100000"
    accept="text/*" type="file" onchange="playlocalVID();">

</div>
<div>
<video muted controls  id="videoPlayer" >
        <source id='currentVID' src="c:\LocalVID.mp4" type="video/mp4">

    </video>
</div>
</div>

JAVASCRIPT

/***********working example****************/

function changeVID(){
        var player = document.getElementById("videoPlayer");
        var currentVID = document.getElementById('currentVID');
        currentVID.setAttribute('src', "http://media.w3/2010/05/sintel/trailer.mp4");
        player.load();
        player.play();
}


/***********desired result****************/


function CangelocalVID(){
        var player = document.getElementById("videoPlayer");
        var currentVID =  document.getElementById('currentVID');
        var selectedLocalVID = document.getElementById('newlocalFILE').value;
        currentVID.setAttribute('src',selectedLocalVID);
        player.load();
        player.play();
}

• javascript
• html
• video

• have you tried adding the file protocol? file:///c:/path/to/file note the triple slash needs to be present – iautomation Commented Sep 2, 2015 at 4:42

3 Answers 3

Edit, Updated

Substituted name of video upload handler playlocalVID for CangelocalVID ; document.getElementById('newlocalFILE').files[0] for document.getElementById('newlocalFILE').value ; tried with video "Science Commons" from Creative Commons - Science Commons ; appeared to upload , play video at jsfiddle from local upload

Try adjusting accept attribute at input element to video/* , utilizing Blob of File object to create objectURL from selectedLocalVID.files[0] to set src attribute of currentVID

function playlocalVID() {
  var player = document.getElementById("videoPlayer");
  var currentVID = document.getElementById("currentVID");
  var selectedLocalVID = document.getElementById("newlocalFILE").files[0];
  currentVID.setAttribute("src", URL.createObjectURL(selectedLocalVID));
  player.load();
  player.play();
}

<div id="desired result" style="background-color:grey;">
  <p>desired result</p>
  <br>
  <div id="selectFile">
    <p>Change local VID:
      <br>
      <input id="newlocalFILE" name="localfile" size="50" maxlength="100000" accept="video/*" type="file" onchange="playlocalVID();">
  </div>
  <div>
    <video muted controls id="videoPlayer">
      <source id="currentVID" src="http://html5multimedia./code/ch9/media/elephants-dream-medium.mp4">
    </video>
  </div>
</div>

jsfiddle https://jsfiddle/q3hhk17e/12/

Here is the most simple solution.
Works on Chrome & iOS Safari.
Try it on Codepen

function changeVideo() {
  var chosenFile = document.getElementById("myFile").files[0];
  document.getElementById("theVideo").setAttribute("src", URL.createObjectURL(chosenFile));
}

document.getElementById("myFile").addEventListener("change", changeVideo);

<input type="file" id="myFile"><br>
<video controls id="theVideo">

final working Answer jsfiddle

HTML

<p>Change local VID:</p>
    <input id="newlocalFILE" name="localfile" size="50" maxlength="100000"
   accept="video/*" type="file" onchange="playlocalVID()">
<video muted controls  id="videoPlayer" >
         <source id='currentVID' src="http://html5multimedia./code/ch9/media/elephants-dream-medium.mp4" type="video/mp4">
 </video>

JAVASCRIPT

function playlocalVID() {


  var currentVID = document.getElementById('currentVID');
  var selectedLocalVID = document.getElementById('newlocalFILE').files[0];
  currentVID.setAttribute('src', URL.createObjectURL(selectedLocalVID));
  player.load();
  player.play();
  var SelectedFileName = document.getElementById('newlocalFILE').value;
}