Posted By

adamdecaf on 06/26/09


Tagged

javascript html video 5


Versions (?)

HTML 5 Video


 / Published in: JavaScript
 

  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.