Jump to content

Dynamically change video SRC path and file


SerenityNetworks

Recommended Posts

Warning: Noob alert. I was a complete noob 8 or 10 years ago and could fumble my way around Javascript, but I haven't touched it since. It's coming back to me, but slowly :Bucktooth:

 

I have a web page where I play a video. Everything is working fine (with lots of snippets taken from this site). Below is both a sampling of the HTML and Javascript code used. At the bottom of this post I've pasted the contents of the whole page in case it is helpful.

 

Body Snippet:

<div>  <video id="video">    <source src="myfile.mp4" type="video/mp4"> <!--I WANT THE PAGE USER TO BE ABLE TO CHANGE THE SRC FILE-->    Your browser does not support HTML5 video.  </video></div>      

Script Snippet:

var vvid = document.getElementById("video"); function playPause() {    if (vvid.paused)        vvid.play();    else        vvid.pause();}//...and lots, lots, more video control functions.

However, I want to allow a user to change the video file being played. I would be nice for them to be able to click on a button that opens the file dialog where they would navigate to and select the video to be played. But if that's too complicated to implement then just placing the path and file name in an input text box for submission &/or reading by the script is fine too. I don't have need to implement playlists or anything fancy. This is for my where the page and files are on a local machine and XAMPP is being used as the server.

 

I can do it with loading the text blob, but I've tried for hours and just can't figure out how to allow the user to select the video source (src). I'd be very appreciative if someone would show me how to do it.

 

Thanks in advance,

Andrew

 

CODE FOR THE WHOLE PAGE, IN CASE IT IS HELPFUL:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>Video Viewer</title><style>#title {	font-family:Arial, Helvetica, sans-serif;	font-size:xx-large;	font-weight:bold;	color:black;	text-align:center;}#video {	margin-top: 10px;	margin-bottom: 2px;	background: gray;	background-position: center;}#speeds {    width: 40px;    margin-bottom:10px;    font-size: xx-large;    background: #808080;    background-position:center;    border:medium;    border-color:black;    border-style:solid;    font-weight: bold;    font-family: Arial, sans-serif;}/* STYLES FOR THE TEXT BLOBS */  #byte_content {    margin: 5px 5px;    max-height: 300px;    overflow-y: auto;    overflow-x: hidden;  }  #byte_range { margin-top: 5px; }/* END OF STYLES FOR THE TEXT BLOBS */</style></head><body onload="pageLoad()"> <div id="title">Video Viewer</div>	<table cellpadding="0" cellspacing="0" align="center">		<tr align="center">			<td>				<div style="text-align:center"> 				  <button onclick="playPause()">Play/Pause</button>     				  <button onclick="muteUnmute()" type="button">Mute/Unmute</button>				  <br/>				  <button onclick="size50()">Smallest</button>				  <button onclick="size75()">Smaller</button>				  <button onclick="size100()">Normal</button>				  <button onclick="size150()">Larger</button>				  <button onclick="size200()">Largest</button>				  <br/>				  Playback Speeds:  				  <button onclick="speed10()">10%</button> 				  <button onclick="speed25()">25%</button> 				  <button onclick="speed50()">50%</button> 				  <button onclick="speed75()">75%</button> 				  <button onclick="speed100()">100%</button> 				  <button onclick="speed125()">125%</button> 				  <button onclick="speed150()">150%</button> 				  <button onclick="speed175()">175%</button> 				  <button onclick="speed200()">200%</button> 				  <button onclick="speed400()">400%</button>				  <br/>				  Set Time:  				  <button onclick="timeStart()">Start</button>				  <button onclick="timeValue('txt1')">Set Time</button>				  <input type="text" name="txt1" size="4" value="0" id="txt1"/>				  				  <button onclick="timeback10()">-10</button>				  <button onclick="timeback8()">-8</button>				  <button onclick="timeback6()">-6</button>				  <button onclick="timeback4()">-4</button>				  <button onclick="timeback2()">-2</button>				  <button onclick="timeforward2()">+2</button>				  <button onclick="timeforward4()">+4</button>				  <button onclick="timeforward6()">+6</button>				  <button onclick="timeforward8()">+8</button>				  <button onclick="timeforward10()">+10</button>				  <button onclick="timeforwardEnd()">End</button>				    Pause After Changes:				  <input type="text" name="txt2" size="4" value="1" id="txt2"/>				</div>						</td>		</tr>		<tr align="center">			<td>			  <div>				  <video id="video">		    	  	<source src="oceans.mp4" type="video/mp4">  <!--I WANT THE PAGE USER TO BE ABLE TO CHANGE THE SRC FILE-->		    	  	Your browser does not support HTML5 video.		  	      </video>	  	      	</div> 	      			  			</td>		</tr>		<tr align="center">			<td>			  <div>			  	[Current Playback Speed: <span id="speed"></span>]   			  	<button onclick="speedSlower()" id="speeds"><img alt="slow" height="25" src="images/slow.png" width="25" /></button>			  	<button onclick="backIt(this)" id="speeds"><img alt="slow" height="25" src="images/back.png" width="25" /></button>			  	<button onclick="playPause()" id="speeds">II</button>			  	<button onclick="forwardIt(this)" id="speeds"><img alt="fast" height="25" src="images/forward.png" width="25" /></button>			  	<button onclick="speedFaster()" id="speeds"><img alt="fast" height="25" src="images/fast.png" width="25" /></button>			  	   [Playback position: <span id="elapsed"></span> of <span id="duration"></span>]	  	      	</div> 	      			  			</td>		</tr>				<tr align="center">			<td>				<input type="file" id="files" name="file" /> Read bytes: 				<span class="readBytesButtons">				  <button data-startbyte="0" data-endbyte="60">01-60</button>				  <button data-startbyte="61" data-endbyte="120">60-120</button>				  <button data-startbyte="121" data-endbyte="180">121-180</button>				  <button>All</button>				</span>				<div id="byte_range"></div>				<div id="byte_content"></div>						</td>		</tr>	</table>  <!-- ----------  JAVASCRIPT ------------  --><script> // ------------  HELP SOURCES ------------  	//http://www.w3schools.com/js/js_examples.asp	// ------------  MAIN VARIABLES ------------  var vvid = document.getElementById("video"); // ------------  PLAY PAUSE ------------  function playPause() {     if (vvid.paused)         vvid.play();     else         vvid.pause(); } // ------------  SOUND ------------  function muteUnmute() {	if (vvid.muted)		vvid.muted = false;	else	    vvid.muted = true;}// ------------  RESIZE VIDEO ------------  function size50() {     vvid.width = 360; } function size75() {     vvid.width = 540; } function size100() {     vvid.width = 720; } function size150() {     vvid.width = 1080; } function size200() {     vvid.width = 1440; } // ------------  PLAYBACK SPEED ------------  function speedSlower() {     vvid.playbackRate = vvid.playbackRate-0.1;} function speed10() {     vvid.playbackRate = 0.1;} function speed25() {     vvid.playbackRate = 0.25;} function speed50() {     vvid.playbackRate = 0.50;} function speed75() {     vvid.playbackRate = 0.75;} function speed100() {     vvid.playbackRate = 1;} function speed125() {     vvid.playbackRate = 1.25;} function speed150() {     vvid.playbackRate = 1.5;} function speed175() {     vvid.playbackRate = 1.75;} function speed200() {     vvid.playbackRate = 2;} function speed400() {     vvid.playbackRate = 2;} function speedFaster() {     vvid.playbackRate = vvid.playbackRate+0.1;} // ------------  SET TIME POSITION ------------  function pageLoad() {     vvid.currentTime=0;    vvid.pause();	muteUnmute();}function timeStart() {     vvid.currentTime=0;	var txtbox2 = document.getElementById(id="txt2");    var txt2value = txtbox2.value*1000;	    setTimeout(function(){        vvid.play();    }, txt2value);    vvid.pause();}function timeValue(id) {    var txtbox1 = document.getElementById(id="txt1");    var txt1value = txtbox1.value;    vvid.currentTime=txt1value	var txtbox2 = document.getElementById(id="txt2");    var txt2value = txtbox2.value*1000;	    setTimeout(function(){        vvid.play();    }, txt2value);    vvid.pause();}function timeback10() {     vvid.currentTime=vvid.currentTime-10;	var txtbox2 = document.getElementById(id="txt2");    var txt2value = txtbox2.value*1000;	    setTimeout(function(){        vvid.play();    }, txt2value);    vvid.pause();}function timeback8() {     vvid.currentTime=vvid.currentTime-8;	var txtbox2 = document.getElementById(id="txt2");    var txt2value = txtbox2.value*1000;	    setTimeout(function(){        vvid.play();    }, txt2value);    vvid.pause();}function timeback6() {     vvid.currentTime=vvid.currentTime-6;	var txtbox2 = document.getElementById(id="txt2");    var txt2value = txtbox2.value*1000;	    setTimeout(function(){        vvid.play();    }, txt2value);    vvid.pause();}function timeback4() {     vvid.currentTime=vvid.currentTime-4;	var txtbox2 = document.getElementById(id="txt2");    var txt2value = txtbox2.value*1000;	    setTimeout(function(){        vvid.play();    }, txt2value);    vvid.pause();}function timeback2() { 	vvid.currentTime=vvid.currentTime-2;	var txtbox2 = document.getElementById(id="txt2");    var txt2value = txtbox2.value*1000;	    setTimeout(function(){        vvid.play();    }, txt2value);    vvid.pause();}function timeforward2() {     vvid.currentTime=vvid.currentTime+2;	var txtbox2 = document.getElementById(id="txt2");    var txt2value = txtbox2.value*1000;	    setTimeout(function(){        vvid.play();    }, txt2value);    vvid.pause();}function timeforward4() {     vvid.currentTime=vvid.currentTime+4;	var txtbox2 = document.getElementById(id="txt2");    var txt2value = txtbox2.value*1000;	    setTimeout(function(){        vvid.play();    }, txt2value);    vvid.pause();}function timeforward6() {     vvid.currentTime=vvid.currentTime+6;	var txtbox2 = document.getElementById(id="txt2");    var txt2value = txtbox2.value*1000;	    setTimeout(function(){        vvid.play();    }, txt2value);    vvid.pause();}function timeforward8() {     vvid.currentTime=vvid.currentTime+8;	var txtbox2 = document.getElementById(id="txt2");    var txt2value = txtbox2.value*1000;	    setTimeout(function(){        vvid.play();    }, txt2value);    vvid.pause();}function timeforward10() {     vvid.currentTime=vvid.currentTime+10;	var txtbox2 = document.getElementById(id="txt2");    var txt2value = txtbox2.value*1000;	    setTimeout(function(){        vvid.play();    }, txt2value);    vvid.pause();}function timeforwardEnd() {     vvid.currentTime=vvid.duration;}function backIt(x) {vvid.currentTime=vvid.currentTime-1;}function normalIt(x) {//this would do something when then mouse leaves the + or - boxes}function forwardIt(x) {vvid.currentTime=vvid.currentTime+1;}// Get the video playback position element (time value) and ending time value with id="video"	var vid = document.getElementById("video");	// Assign an ontimeupdate event to the video element, and execute a function if the current playback position has changed	vid.ontimeupdate = function() {myFunction()};	function myFunction() {	    // Display the current position of the video in an element with id="elapsed"	    	document.getElementById("elapsed").innerHTML = (Math.round(vid.currentTime*100)/100).toFixed(2);	    	document.getElementById("duration").innerHTML = (Math.round(vid.duration*100)/100).toFixed(2);	    	document.getElementById("speed").innerHTML = (Math.round(vid.playbackRate*100)/100).toFixed(1);		}	// --------- SCRIPTS FOR THE TEXT BLOBS -----------  function readBlob(opt_startByte, opt_stopByte) {    var files = document.getElementById('files').files;    if (!files.length) {      alert('Please select a file!');      return;    }    var file = files[0];    var start = parseInt(opt_startByte) || 0;    var stop = parseInt(opt_stopByte) || file.size - 1;    var reader = new FileReader();    // If we use onloadend, we need to check the readyState.    reader.onloadend = function(evt) {      if (evt.target.readyState == FileReader.DONE) { // DONE == 2        document.getElementById('byte_content').textContent = evt.target.result;        document.getElementById('byte_range').textContent =             ['Read bytes: ', start + 1, ' - ', stop + 1,             ' of ', file.size, ' byte file'].join('');      }    };    var blob = file.slice(start, stop + 1);    reader.readAsBinaryString(blob);  }    document.querySelector('.readBytesButtons').addEventListener('click', function(evt) {    if (evt.target.tagName.toLowerCase() == 'button') {      var startByte = evt.target.getAttribute('data-startbyte');      var endByte = evt.target.getAttribute('data-endbyte');      readBlob(startByte, endByte);    }  }, false);// --------- END OF SCRIPTS FOR THE TEXT BLOBS ---	</script> </body> </html>
Link to comment
Share on other sites

All of those duplicate timeback and timefoward fuctions can be replaced with a single function. Only one number changes in all of those, you can pass that value to a single function instead of writing duplicate functions. The same thing with all of the size functions where you set the width and the speed functions where you set playbackRate. You only need one function that takes a parameter.It looks like there is an example of playing local files here:http://jsfiddle.net/dsbonev/cCCZ2/

  • Like 1
Link to comment
Share on other sites

Thank you! I looked and looked and never found the example you provided. It seems to be exactly what I need. I will be looking at it now.

 

I was sure there was a way to pass values from different buttons to a single function, but hadn't digged in enough to learn how (so copy/paste has been my make-do friend). Do you have an example of passing values from multiple buttons to a single function?

 

Thanks again,

Andrew

 

PS. (To davej) XAMPP, the video files, and the web page are all on my PC.

Edited by SerenityNetworks
Link to comment
Share on other sites

function timechange(val) {   vvid.currentTime=vvid.currentTime+val;  var txtbox2 = document.getElementById("txt2");  var txt2value = txtbox2.value*1000;  setTimeout(function(){    vvid.play();  }, txt2value);  vvid.pause();}<button onclick="timechange(-10)">-10</button><button onclick="timechange(4)">+4</button>
You could do something similar with the speed and size functions.
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...