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();
}
Share
Improve this question
edited Sep 2, 2015 at 4:36
PixelPimp
asked Sep 2, 2015 at 4:31
PixelPimpPixelPimp
851 silver badge7 bronze badges
1
-
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
Reset to default 5Edit, 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
ofFile
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;
}