Using JQuery to display a video

JavaScript
1

I have a JQuery script that hides a div on my web page until a button is clicked. It then eases in a window to display the content of the hidden div. If I put a static image in the div it works fine. But if I put a piece of JavaScript in the div to execute a video script it does not work. It appears that the JQuery script will not execute the JavaScript for some reason. But if I remove the JQuery Script and allow the div to be displayed when the page is loaded it again works fine.

Does anyone know why this would happen and offer a solution. I am happy to disclose the JQuery Script, as well as the CSS and HTML code if you need to see it. I am just not sure if the rules of this site actually permit doing that.

Thanks for your help.

2

Definitely do that. A live link is best, especially in a case like this. If you don’t want to expose your URL, you could set up a demo at a site like jsFiddle or CodePen.

3

Thanks Ralph - I have a testing site that I am using to develop this code. It is located here: http://rgstest.com/pjg/

I have put everything back together so the JQuery script has the code for displaying the video and the page has the div with the JavaScript code. As you will see when the button for opening the video is clicked - nothing happens.

If you need more just advise.

Thanks for your help.

4

You don’t actually have the jQuery library on that page, although you do have jQuery tools loaded. You need to have a link to the jQuery library on the page, and it needs to go above any other jQuery scripts. You could just add a link to the online version if you like. E.g.

[COLOR="#FF0000"]<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>[/COLOR]
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
5

Hi Ralph - Thanks for responding. Although that may have been problematic, it was not what was preventing the window from opening.

I added the line as you have suggested and it still fails to open the div. Any other suggestions on this?

6

Oh dear, that JavaScript file “eflvcoresva0234.js” is doing all kinds of weird things.
Take a look:

//<![CDATA[
document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>');
if(!((navigator.userAgent.toLowerCase().indexOf('android') != -1)&&(navigator.userAgent.toLowerCase().indexOf('mobile') != -1)) || (navigator.userAgent.toLowerCase().indexOf('iphone')!= -1) || (navigator.userAgent.toLowerCase().indexOf('ipod') != -1) ) {
document.write('<script type="text/javascript" src="http://rgstest.com/pjg/videos/eflvswf.js"></script>');
}
document.write('<table width="580" border="0" align="center">');
document.write('<tr>');
document.write('<td>');
if(!((navigator.userAgent.toLowerCase().indexOf('android') != -1)&&(navigator.userAgent.toLowerCase().indexOf('mobile') != -1)) || (navigator.userAgent.toLowerCase().indexOf('iphone')!= -1) || (navigator.userAgent.toLowerCase().indexOf('ipod') != -1) ) {
document.write('<div id="flashcontenta0234" align="center">');
}
document.write('<!--[if gte IE 9]><!-->');
document.write('<script type="text/javascript" src="http://rgstest.com/pjg/videos/eflvhtml5sva0234.js"></script>');
document.write('<div id="vDiva0234">');
document.write('</div>');
document.write('<!--<![endif]-->');
if(!((navigator.userAgent.toLowerCase().indexOf('android') != -1)&&(navigator.userAgent.toLowerCase().indexOf('mobile') != -1)) || (navigator.userAgent.toLowerCase().indexOf('iphone')!= -1) || (navigator.userAgent.toLowerCase().indexOf('ipod') != -1) ) {
document.write('</div>');
document.write('<script type="text/javascript" src="http://rgstest.com/pjg/videos/eflvflashsva0234.js"></script>');
}
document.write('</td>');
document.write('</tr>');
document.write('</table>');
//]]>

As you can see, Ralph, the reason you’re not seeing jQuery, is that the file is dynamically writing it to the page.
It also writes several minified JavaScripts to the page, which are rather impenetrable.

To approach this from another way: it seems to me that you have a flash movie (http://rgstest.com/pjg/videos/eflv000_float_bar_dark_cft.swf) and that when someone clicks a button, you want this movie to appear in a modal overlay (lightbox effect).

Is that correct?

7

Hi Pullo - Perhaps I need to explain a bit about what is going on. I originally had a Flash (.swf) video in this location and it worked just fine with the JQuery fade in and out. But what I wanted to to do was replace the Flash with a video that could be viewed in multiple user agents including the iPhone/iPad etc. So what is happening here is that the JavaScript in the div is loading another piece of JavaScript that makes a determination as to what type of user agent is loading the web page and initializing the proper video for that user agent. ie mp4, swf, etc. This code is actually being generated by a commercial product called EasyFLV, so additional code is also being generated to format the look of the video, such as the opening and closing image, the color scheme etc. I am sure that the root cause of this problem has to do with the multiple levels of JavaScript that is being used here. BUT - if I remove the JQuery portion of the code and allow the div to be displayed upon loading of the page, the video works fine. It is only when I surround the div with the JQuery that the button does not work.

Does this make better sense of the code for you guys?

8

It seems to be that when you put that script anywhere in the page apart from in the <head> section of the document it just throws all kinds of nasty errors.
As I said, the JS it is generating is impenetrable and it is hard to tell where the exact error is coming from.
Plus, it seems that document.write doesn’t work in XHTML - http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite

If I was you I would use the <video> tag and let the browser decide what it wants to play and what it doesn’t.

If you could give me links to the same swf file in mp4, ogg and webm format, I can make you a demo that will play in all browsers.

9

Thank you Pullo -The .flv, .mp4, and .webm formatted videos can be located here:

http://rgstest.com/pjg/videos/

10

Also - Is the <video> tag new to HTML5?

11

Yup.

12

So, here’s a demo using the [URL=“http://www.videojs.com/”]video.js plugin, as well as the mp4 version and the webm version of your film. Nothing more!
That’s enough for it to be playable on mobile devices, as well as older and modern browsers (I tested on the iPhone, iPad, latest Chrome, Opera and Firefox, as well as IE 7 - 10).

Here’s the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Premier Junior Golf Development</title>
    <link href="http://rgstest.com/pjg/pjg-styles.css" rel="stylesheet" type="text/css"/>
    <link href="video-js.css" rel="stylesheet">
    <style>
      .vjs-default-skin .vjs-big-play-button {
        left: 40%;
        top: 40%;
      }
      
      #video_container {
        display: none;
      }
      
      .black_overlay{
        display: none;
        position: fixed;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index:1001;
        -moz-opacity: 0.8;
        opacity:.80;
        filter: alpha(opacity=80);
      }
      
      .white_content {
        display: none;
        background-color: white;
        z-index:1002;
        overflow: auto;
      }
    </style>
    
    <script src="video.js"></script>
    <script>videojs.options.flash.swf = "http://path_to/video-js.swf"</script>
  </head>
  
  <body>
    <div id="wrapper">
      <div id="left-sidebar">
        <div id="Newsletter1"></div>
      </div>
      
      <div id="right-sidebar">
        <img src="http://rgstest.com/pjg/videos/sean-image.jpg" />
        <input type="button" id= "RevealVideo" value= "Play Video" />
      </div>
      <div id="content"></div>
      
      <div id="clearone"></div>
      <div id="footer"></div>
    </div>
    
    <div id="light" class="white_content">
      <div class="video_container">
        <video id="vid_1" class="video-js vjs-default-skin" controls preload="auto" width="648" height="432" data-setup='{}'>
          <source src="sean.mp4" type='video/mp4' />
          <source src="sean.webm" type='video/webm' />
        </video>
        <input type="button" id= "CloseVideo" value= "Close Video"  style="height: 40px; width: 100px;"  />
      </div>
    </div>
    <div id="fade" class="black_overlay"></div>  
    
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script>
      jQuery.fn.center = function () {
        this.css("position","absolute");
        this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
        this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
        return this;
      }  
      
      var myPlayer = _V_("vid_1");
      
      $('#RevealVideo').on("click", function(){
        myPlayer.play();
        $('#light').center().show();
        $('#fade').show();
      });
      
      $('#CloseVideo').on("click", function(){
        myPlayer.pause();
        $('#light').hide();
        $('#fade').hide();
      });
    </script>
  </body>
</html>

Feel free to use the code as is, or let me know if you have any questions.

Lightbox effect inspiration.

13

Thank you sir! I appreciate you taking the time to code this.

14

Hi Pullo - Perhaps you can explain this to me. I have been able to successfully incorporate your sample code into my actual testing page. I put the JavaScript code:

<script>
      jQuery.fn.center = function () {
        this.css("position","absolute");
        this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
        this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
        return this;
      }  
      
      var myPlayer = _V_("vid_1");
      
      $('#RevealVideo').on("click", function(){
        myPlayer.play();
        $('#light').center().show();
        $('#fade').show();
      });
      
      $('#CloseVideo').on("click", function(){
        myPlayer.pause();
        $('#light').hide();
        $('#fade').hide();
      });
    </script>

into a scripts.js file

if I link this file before the <head> tag along with all my other scripts, it does not work. But if I link this script at the end of my content it works just fine. It seems pretty picky as to where I can put it. It won’t work immediately following the <body> tag either. I have to complete all of the initial PHP includes at the beginning of the page before it seems to work. I’m sure there is an explanation for this, but I just do not know what it is.

15

Hi there,

Good stuff :slight_smile:

If you want to put the JS in an external file and include it in the <head> section of your document, then you need to wrap everything in a $(document).ready() callback, as otherwise you are trying to reference elements in the DOM before they exist.

Saying that, it is good practice to put all of your JavaScripts just before the closing <body> tag, in which case $(document).ready() becomes obsolete.
The reason that this is a good idea is because when a browser loads a script, it does not spawn a new thread to do so, rather it waits until it has loaded the script before it proceeds to the next line.
Putting scripts just before the closing <body> tag therefore makes for a snappier, more responsive experience for your users.

16

Ok - I do understand that. Thanks all of your help Pullo!!