advanced code snippet search

Posted By

adamdecaf on 06/26/09


Tagged

javascript html video 5


Versions (?)

HTML 5 Video

 / Published in: JavaScript
 
Expand | Embed | Plain Text 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<title>HTML 5 Video</title>
  5. <link rel="stylesheet" href="css/full.css" type="text/css" />
  6. </head>
  7. <body>
  8.  
  9. <div id="left">
  10. 	<video>
  11. 		Error: Your browser does not seem to support the (x)HTML 5 &lt;video&gt; element.<br />
  12. 		Please download:
  13. 			<a href="http://google.com/chrome">Google Chrome</a> (BETA) or 
  14. 			<a href="http://www.mozilla.com/en-US/firefox/all-beta.html">Mozilla FireFox</a> (BETA).
  15. 	</video>
  16.  
  17. 	<p>
  18. 		<a id="downloadLink">Download this video</a> (.mp4)
  19. 	</p>
  20. </div>
  21.  
  22. <div id="right">
  23. 	<h3>HTML 5 Video</h3>
  24.  
  25. 	<p>
  26. 		Volume: <span id="videoVolume"></span><br />
  27. 		<input type="button" value="  Up  " onClick="v.volume+=0.05; volumeElement.innerHTML-=-5.0;" />
  28. 		<input type="button" value=" Down " onClick="v.volume-=0.05; volumeElement.innerHTML-=5.0;" />
  29. 	</p>
  30.  
  31. <!-- 
  32. 	<p>
  33. 		Volume: <span id="videoVolume"></span><br />
  34. 		<input type="range" id="volumeRange" min="0" max="100" value="(v.volume*100)" 
  35. 				onInput="v.volume+=(this.value/100.00); volumeElement.innerHTML-=-(this.value/100.00);" />
  36. 	</p>
  37. -->
  38. </div>
  39.  
  40. <!-- Lets put the script at the bottom to ensure the <video> has been loaded into the DOM. -->
  41. <script>
  42. /**
  43.  * HTML 5 Video Test
  44.  *
  45.  * Adam Shannon
  46.  * 06/13/2009 - [ 1400 CST ]
  47.  * http://ashannon.us
  48.  */
  49.  
  50. //*************************************************************
  51. //* Remember:                                                 *
  52. //*	   - The v.src is set via the URI (in PHP).               *
  53. //*	   - The "Download This Video" link is set to v.src       *
  54. //*                                                           *
  55. //* Notes:                                                    *
  56. //*	   - This demo only seems to work in Chrome 3.0.187.1     *
  57. //*************************************************************
  58.  
  59. // Gather the video element
  60. 	var v = document.getElementsByTagName("video")[0];
  61.  
  62. 	// Set the v.src
  63. 	var path = "src/barack-high.mp4";
  64. 		v.src = path;
  65.  
  66. 		// Now set the download link.
  67. 			document.getElementById("downloadLink").href = path;
  68.  
  69. // Check to see if there is an error.
  70. 	v.onerror = function () { alert("Whoops, it seems that there was an error, please refresh the page."); }
  71.  
  72. 	// Set the volume (0.00 to 1.00)
  73. 		v.volume = 0.15;
  74.  
  75. 	// Set the width and height (pixels).
  76. 		v.height = 360;
  77. 		v.width = 640;
  78.  
  79. 	// Set the video to loop or not.
  80. 	// This can be a [bool].
  81. 		v.loop = true;
  82.  
  83. 	// Set the auto play feature
  84. 	// This can be a [bool] or a string set to "autoplay", 
  85. 	//  all others will be treated like a [bool] of false.
  86. 		v.autoplay = true;
  87.  
  88. 	// Tell the player to auto buffer the video data.
  89. 	// This can be a [bool].
  90. 		v.autobuffer = true;
  91.  
  92. 	// We can set some CSS commands on the <video>
  93. 		v.style.opacity = 1;
  94.  
  95. // Get some other elements
  96. 	var volumeElement = document.getElementById("videoVolume");
  97. 		volumeElement.innerHTML = v.volume + "";
  98. 		volumeElement.innerHTML = volumeElement.innerHTML.substr(2,2);
  99.  
  100. // Make the video stop playing when its clicked.
  101. 	v.onclick = function () { (this.paused) ? this.play() : this.pause(); }
  102.  
  103. // Check to see if the video has ended, if so play the video again.
  104. 	v.addEventListener("ended", function () { this.play(); } , false);
  105. </script>
  106. </body>
  107. </html>

Report this snippet  

You need to login to post a comment.