Advertisement
duck__boy1981

HTML5 video control

Apr 13th, 2014
127
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 2.44 KB | None | 0 0
  1. $(function(){
  2.    
  3.     $(document).ready(function(){
  4.         controlIntroVideo.init();
  5.     });
  6.     controlIntroVideo = {
  7.    
  8.         /**
  9.          * Constructor
  10.          */
  11.         init : function(){
  12.        
  13.             var t = this;   // This object
  14.                
  15.             t.video = $('#intro-video');    // The intro video element
  16.             t.expanded = false;             // Whether or not the intro video is currently expanded
  17.            
  18.             t._create_events();
  19.            
  20.         }, // init
  21.        
  22.         /**
  23.          * Create the events necessary for proper interaction with the intro video
  24.          */
  25.         _create_events : function(){
  26.        
  27.             var t = this;   // This object
  28.            
  29.             t.video.on('play', function(){
  30.                 t.play_video();
  31.             });
  32.            
  33.             t.video.on('pause', function(){
  34.                 t.pause_video();
  35.             });
  36.            
  37.             t.video.on('ended', function(){
  38.                 t.video_ended();
  39.             });
  40.            
  41.         }, // create_events
  42.        
  43.         /**
  44.          * Play the intro video
  45.          */
  46.         play_video : function(){
  47.        
  48.             var t = this;   // This object
  49.            
  50.             /** Animate the expansion the video to the full width of the page, adding the border specifed above at the same time */
  51.             if(!t.expanded){
  52.            
  53.                 /** Set the border ready for video expansion */
  54.                 t.video.css({
  55.                     border:             '0 solid #FFFFFF',
  56.                 });
  57.                
  58.                 /** Pause the video during expansion */
  59.                 t.video[0].pause();
  60.                
  61.                 /** Animate the expansion of the intro video */
  62.                 t.video.animate({
  63.                     borderRightWidth:   '90px',
  64.                     borderBottomWidth:  '10px',
  65.                     borderLeftWidth:    '90px',
  66.                     height:             '405',  // 495 477 459 405
  67.                     width:              '720'   // 880 848 816 720
  68.                 }, 1000, function(){ // On completion of the animation
  69.                
  70.                     t.expanded = true;  // Set 'expanded' to true
  71.                     t.video[0].play();  //Play the Video
  72.                    
  73.                 });
  74.                
  75.             }
  76.            
  77.         }, // play_video
  78.        
  79.         /**
  80.          * Pause the intro video
  81.          */
  82.         pause_video : function(){
  83.        
  84.             var t = this;   // This object
  85.            
  86.             /** Only run animate the reduction of the video if it is not already expanded */
  87.             if(t.expanded){
  88.                
  89.                 t.expanded = false; // Set 'expanded' to false
  90.                
  91.                 /** Animate the reduction of the intro video */
  92.                 t.video.animate({
  93.                     borderWidth:    '0',
  94.                     height:         '200',
  95.                     width:          '356'
  96.                 }, 1000);
  97.                
  98.             }
  99.            
  100.         }, // pause_video
  101.        
  102.         /**
  103.          * Reset the intro video when it has ended
  104.          */
  105.         video_ended : function(){
  106.        
  107.             var t = this;   // This object
  108.            
  109.             setTimeout(function(){
  110.                 t.video[0].load();
  111.                 t.pause_video();
  112.             }, 2000);
  113.            
  114.         } // video_ended
  115.        
  116.     } // controlIntroVideo
  117.    
  118. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement