Controlling the Video through JavaScript

Contact Us or call 1-877-932-8228
Controlling the Video through JavaScript

Controlling the Video through JavaScript

Open Video/Demos/video.html in a desktop browser and also, if possible, on a smartphone:

videocontrols

Code Sample:

Video/Demos/video.html
<!DOCTYPE html>
<html>
<head>
  <title>Jazz Calendar - Local Live Jazz Music Events</title>
  <link rel="stylesheet" type="text/css" href="css/reset.css" />
  <link rel="stylesheet" type="text/css" href="css/video.css" />
  <meta name="viewport" content="initial-scale=1.0, width=device-width" />
</head>

<body>
  <div id="container">
	<div id="main">
	  <header>
		<img src="images/logo.gif" alt="Jazz Calendar" />
		<h3 id="tagline">Local jazz info</h3>
	  </header>
	  <nav>
		<ul>
		  <li><a href="index.html">Home</a></li>
		  <li><a href="performances.html">Performances</a></li>
		  <li><a href="about.html">About</a></li>
		  <li><a href="contact.html">Contact</a></li>
		</ul>
	  </nav>
	  <div id="maincontent">
		  <article>
			<h2>Video</h2>
			<video width="480" height="270" controls poster="images/poster.png" 
			id="vid">
			<source type="video/mp4"
				src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">
				</source>
			<source type="video/webm"
				src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm"></source>
			<source type="video/ogg"
				src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv"></source>
			<p>Your browser does not support the video tag</p>
			</video>

			<div><button onclick="document.getElementById('vid').play()">
				Play</button>  
			<button onclick="document.getElementById('vid').pause()">
				Pause</button>  
			<button onclick="document.getElementById('vid').volume+=0.1">
				Incr. Volume</button>
			<button onclick="document.getElementById('vid').volume-=0.1">
				Decr. Volume</button>
			</div>
		</article>
	</div>
	<aside id="sidebar">
		<h3>Signup</h3>
		<p>Become a member of Jazz Calendar now! <a href="#">Email us</a> to receive frequent notices on upcoming live shows.</p>
	</aside>
	<footer id="contactinfo">
		<p>Jazz Calendar
		<br />123 Fake Street, Sometown, USA | 555-123-4567</p>
	</footer>
	</div>
</div>
</body>
</html>

Code Explanation:

Note that the video is presented using the same code we reviewed above, with the "big_buck_bunny" video (in various formats) coming from an external website - of course, these might be video files hosted on your own server.

New to this example are four buttons allowing the user to play or pause the video and to increase or decrease the volume. We accomplish this with a mix of HTML and JavaScript. Each button tag has an onclick handler; when clicked, the play() or pause() function is called or the volume property incremented/decremented, depending on which button were clicked. We find the video element upon which to act by referencing its id (vid) through document.getElementById. Note that, as smartphones like the iPhone will open the video in a new video-player window, these buttons won't be terribly useful on an iPhone.

Next