API tools faq
paste
Guest User

Full CODE

a guest
Jan 24th, 2013
216
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 6.18 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en" class="no-js">
  3. <head> 
  4. <meta charset="utf-8">
  5. <title>Video Prototype</title>
  6. <!-- CSS -->
  7.  
  8. <style type="text/css">
  9.   @import url("css/css.css");
  10.   @import url "css/css.css";
  11. </style>
  12.  
  13. <style>
  14.  
  15. #playdiv1 {
  16.     display: none;
  17. }
  18.  
  19. </style>
  20.  
  21. <link href="http://contribute.juicepharma.com/html5videomenu/example237/css/player.css" rel="stylesheet" type="text/css" />
  22.  
  23. <!-- Mobile Specific Meta Tags -->
  24. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  25. <script type="text/javascript" src="http://use.typekit.com/yil2hux.js"></script>
  26. <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
  27.  
  28. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  29.  
  30. <!-- Add mousewheel plugin (this is optional) -->
  31. <script type="text/javascript" src="http://contribute.juicepharma.com/html5videomenu/fancyapps-fancyBox-e4836f7/lib/jquery.mousewheel-3.0.6.pack.js"></script>
  32.  
  33. <!-- Add fancyBox main JS and CSS files -->
  34. <script type="text/javascript" src="http://contribute.juicepharma.com/html5videomenu/fancyapps-fancyBox-e4836f7/source/jquery.fancybox.js?v=2.1.3"></script>
  35. <link rel="stylesheet" type="text/css" href="http://contribute.juicepharma.com/html5videomenu/fancyapps-fancyBox-e4836f7/source/jquery.fancybox.css?v=2.1.2" media="screen" />
  36.  
  37. <!-- Add Button helper (this is optional) -->
  38. <link rel="stylesheet" type="text/css" href="http://contribute.juicepharma.com/html5videomenu/fancyapps-fancyBox-e4836f7/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
  39. <script type="text/javascript" src="http://contribute.juicepharma.com/html5videomenu/fancyapps-fancyBox-e4836f7/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
  40.  
  41. <!-- The cuepoint stuff is here -->
  42. <script src='http://contribute.juicepharma.com/html5videomenu/example237/js/cuepoint.js'></script>
  43.  
  44. <script src='http://contribute.juicepharma.com/html5videomenu/example237/js/script.js'></script>
  45.  
  46. <script>
  47. $(document).ready(function(){
  48. //Slides object with a time (integer) and a html string
  49. var slides = {
  50. 10: '',
  51. 2: '',
  52. 3: '',
  53. 6: '',
  54. 10:'',
  55. }
  56. //Start cuepoint and pass in our the subtitles we want
  57. cuepoint.init(slides);
  58.  
  59. //You can set your own skip to links by using the cuepoint.setTime(seconds) function
  60. $('#1').click(function(){
  61.   cuepoint.setTime(0)();
  62.   $('#playdiv1')[0].style.display = "block";
  63. });
  64.  
  65. $('#2').click(function(){
  66.   cuepoint.setTime(2)});
  67.  
  68. $('#3').click(function(){
  69.   cuepoint.setTime(6)});
  70.  
  71. $('#4').click(function(){
  72.   cuepoint.setTime(10)});
  73. });
  74.  
  75.   // function vidplay() {
  76.    //  var video = document.getElementById("video");
  77.   //   var button = document.getElementById("play");
  78.   //   if (video.paused) {
  79.   //   video.play();
  80.  
  81. function vidplay() {
  82.    var video = document.getElementById("video");
  83.    var button = document.getElementById("play");
  84.  
  85.    if (video.paused) {
  86.       video.play();
  87.  
  88.        } else {
  89.         video.pause();
  90.         button.textContent = ">";
  91.        }
  92.     }
  93.  
  94.     $(document).ready(function() {
  95.         $('.hover').bind('touchstart touchend', function(e) {
  96.             e.preventDefault();
  97.             $(this).toggleClass('hover_effect')
  98.  
  99.         });
  100.     });
  101.  
  102. </script>
  103.  
  104. <script>
  105.     var vid=document.getElementById('video');
  106.     vid.addEventListener("ended", hideVideo, false);
  107.  
  108.     function hideVideo() {
  109.         var vid=document.getElementById('video');
  110.         var other=document.getElementById('other');
  111.         vid.removeEventListener("ended", hideVideo, false);
  112.         vid.style.display='none';
  113.         other.style.display='block';
  114.     }
  115. </script>
  116.  
  117. <!-- End Cuepoint example code -->
  118.  
  119. </head>
  120.  
  121. <body>
  122.  
  123. <div id="page" style="position: relative; width: 700px; margin: 0 auto;">
  124.  
  125. <div id="container">
  126.  
  127. <header>
  128.        
  129. <hgroup>
  130.  
  131. <h1>Prototype..</h1>
  132.  
  133. </hgroup>
  134.  
  135. <div id="playdiv1" style="min-height: 300px; min-width: 500px;">
  136. ( this div should show along with the que?!!!!!!! )
  137. </div>
  138.  
  139. <br>
  140. <br>
  141.  
  142. </header>
  143.  
  144. <!-- Start Cuepoint -->
  145.  
  146. <div class="vidBox" id="box">
  147.  
  148.     <section id='cuePlayer'>
  149.         <video class="vid" id='video' height="300" width="500" onclick="vidplay()">
  150.           <source src="http://contribute.juicepharma.com/html5videomenu/video/Scenario5-1.mp4" type="video/mp4" />
  151.           <source src="http://contribute.juicepharma.com/html5videomenu/video/Scenario5-1.webm" type="video/webm" />
  152.           <source src="http://contribute.juicepharma.com/html5videomenu/video/Scenario5-1.ogv" type="video/ogg" />
  153.         </video>
  154.         <div id='subtitles' style="position: absolute; min-height: 300px; margin-top: -300px;"></div>
  155.     </section>
  156. </div> 
  157.  
  158. <!-- div Comes in at the end -->
  159.  
  160.     <div id="other" style="display: none; width:400px; height:300px;">
  161.  
  162.     <center><img src="http://gifs.gifbin.com/1233925271_8be9acc.gif"></center>
  163.  
  164.     </div>
  165.  
  166. <!-- / div Comes in at the end -->
  167.  
  168.     <div id="intro">
  169.  
  170.     </div>
  171.    
  172.     <div id='thumbs' style="margin-top: 155px;">
  173.     <ul>
  174.         <li id="one"><img id='1' src='imgs/marker.png' alt='cuepoint image' class='thumbnail' style="padding: 20px;"/><li>
  175.  
  176.         <li id="two"><img id='2' src='imgs/marker.png' alt='cuepoint image' class='thumbnail' style="padding: 20px;"/><li>
  177.  
  178.         <li id="three"><img id='3' src='imgs/marker.png' alt='cuepoint image' class='thumbnail' style="padding: 20px;"/><li>
  179.  
  180.         <li id="four"><img id='4' src='imgs/marker.png' alt='cuepoint image' class='thumbnail' style="padding: 20px;"/><li>
  181.     </div>
  182.  
  183. <footer>
  184.  
  185. <a id="various3" href="http://www.jquery.com" class="noScroll" name="various3"><div id="frame_btn">Push</div></a>
  186.  
  187. <div id="img1" style="background: black;">
  188.  
  189. </div>
  190.  
  191.  
  192. <!-- Actual Play / Pause Button -->
  193.  
  194. <div style="margin-top: 25px; position: absolute;"><button id="play" onclick="vidplay()">&gt;</button></div>
  195.  
  196. <!-- / Actual Play / Pause Button -->
  197.  
  198.  
  199. <script type="text/javascript">
  200.  
  201. $("#various3").fancybox({
  202.     'width'                         : '500',
  203.     'height'                        : '300',
  204.     'autoScale'                     : false,
  205.     'transitionIn'                      : 'none',
  206.     'transitionOut'                     : 'none',
  207.     'type'                          : 'iframe'
  208. });
  209.  
  210. </script>
  211.  
  212. </footer>
  213.  
  214. </div> 
  215. </div>
  216. </div>
  217.  
  218. </body>
  219. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!