www.webdeveloper.com
Results 1 to 4 of 4

Thread: Background video not loading and no response when clicking on HTML links

  1. #1
    Join Date
    Apr 2008
    Posts
    136

    Background video not loading and no response when clicking on HTML links

    I created a web page with the purpose of loading a background video that would auto play for a certain number of seconds and then auto pause after that time. Also, I created two HTML links that, when clicked on, would play certain segments of the video and auto pause.

    Before I added the segment of code that would display the links, the background video did automatically load, play and pause as is should. But, after I added the piece of code that would display the html links, the links do display but nothing happens when clicking on the links. Also, the background video never even loads.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
      <title>Bigvideo.js Demo</title>
     
      <link rel="stylesheet" href="http://goken68.brinkster.net/Videos/bigvideo.css">
     
       <!-- BigVideo Dependencies -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
      	<script src="http://goken68.brinkster.net/Videos/video.js"></script> 
    	<script src="http://goken68.brinkster.net/Videos/bigvideo.js"></script>
     
        <script> 
            $(function () {
                var BV = new $.BigVideo({ useFlashForFirefox: false });
                BV.init();
                BV.show('http://goken68.brinkster.net/Videos/mov_bbb.mp4', { altSource: 'http://goken68.brinkster.net/Videos/mov_bbb.webm', ambient: true });
    			BV.getPlayer().addEvent(show_links);
     
    		//display the html links
    				function show_links	{
    					$('.theLinks').show();
    				}
    	
    	    //pause video after 4 seconds
    	    pause = setTimeout(function() { BV.getPlayer().pause(); }, 4000);
     
            
        function link1()					{
    	
    		BV.getPlayer().currentTime(4);
    		BV.getPlayer().play();
    		//pause video after an additional 3 seconds from the 4 second mark of video
    		BV.getPlayer().pause(3000);
    	}
     
    	function link2()					{
     
    		BV.getPlayer().currentTime(7)
    		BV.getPlayer().play();
    		//pause video after an additional 3 seconds from the 7 second mark of video
    		BV.getPlayer().pause(3000);
    	}
     
    });
     
    </script>
     
     
    </head>
    <body>
     
    <div id="theLinks">
        <a href="#" id="link1" onclick="link1()">Link 1</a> 
        <a href="#" id="link2" onclick="link2()">Link 2</a>
    </div> 
     
      
     
    </body>
    </html>

  2. #2
    Join Date
    Jul 2014
    Location
    Rostock
    Posts
    15
    The function

    Code:
    function show_links	{
     $('.theLinks').show();
    }
    should look like this:

    Code:
    function show_links(){
     $('#theLinks').show();
    }
    But to be honest, this function is useless because you are not hiding the container #theLinks via CSS.

  3. #3
    Join Date
    Jul 2014
    Location
    Rostock
    Posts
    15
    Oh, I forgot to tell you that the div #theLinks does need "position:relative" to show up.

  4. #4
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,348
    Ask ing the JavaScript frameworks forum.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles