Forums

BobJHuckleberry

Hello and thanks in advance for your time and help.

I'm using AnythingSlider with video and using JW Player.

Here's my test site:

http://testsitefree.nfshost.com/

I put JW Player into it's own folder and put the following code in to each panel.


<li class="panel1">

<script type="text/javascript" src="jwplayer/jwplayer.js"></script> 

<div id='mediaspace1'>This text will be replaced</div>

<script type='text/javascript'>
jwplayer('mediaspace1').setup({
'flashplayer': 'jwplayer/player.swf',
'file': 'video/video1.mp4',
'image': 'preview.jpg',
'autostart': 'false',
'controlbar': 'bottom',
'width': '700',
'height': '390'
});
</script>

</li>

All is working ok but if I'm playing a video and I move to another video panel, the initial video keeps playing.

How do I make videos stop playing when a panel is changed?

I did this before I saw the directions on GitHub for AnythingSlider / JW Player, so I going to try this solution.

I'm ok with parts 1 and 2.

Parts 3 + 4: Where do I put this code?

1. Put JW Player javascript in the head of your document.

<script src="jwplayer/jwplayer.js"></script>

2. Set up the video containers in the slider

<ul id="slider">
  <li><div id="container1"></div></li>
  <li><div id="container2"></div></li>  
</ul>

3. Define the flash player url, a list of videos you want to add and set them up


// Make a list of videos first
// ***********************
var flashplayer = "jwplayer/player.swf",
    videos = [];

// add videos as follows: videos.push([ id, file, image, height, width ]);
videos.push([
  "container1",
  "http://content.bitsontherun.com/videos/nPripu9l-60830.mp4",
  "http://content.bitsontherun.com/thumbs/nPripu9l-480.jpg",
  300,
  200
]);

// using the same video for demo purposes ( because I'm lazy :P )
videos.push([
  "container2",
  "http://content.bitsontherun.com/videos/nPripu9l-60830.mp4",
  "http://content.bitsontherun.com/thumbs/nPripu9l-480.jpg",
  300,
  200
]);

ect ect ...................................................................

4. Set up AnythingSlider using this code:


// Set up AnythingSlider
$('#slider').anythingSlider({
  // pause all videos when changing slides
  onSlideInit: function(e, slider) {
    if (jwplayer) {
      $.each(videos, function(i) {
        jwplayer(i).pause(true);
      });
    }
  },
  // Only play a paused video when a slide comes into view
  onSlideComplete: function(slider) {
    if (jwplayer) {
      $.each(videos, function(i, v) {
        // find ID in panel - if there are two videos in the same panel, both will start playing!
        if (slider.$currentPage.find('#' + v[0]).length && jwplayer(v[0]).getState() === 'PAUSED') {
          jwplayer(v[0]).play();
        }
      });
    }
  },

ect ect ..............................................

thanks

Mottie

Don't use that first bit of code (initializing the player inside each panel), because it won't be set up properly.

Check out this demo that I set up using videos from your demo site. It uses the same code you shared above from the video wiki documentation.

BobJHuckleberry

Thanks for the reply Mottie.

Just not sure on a couple of things.

Where do I put the JS code from jsFiddle.
Do I put it in a new js file and link to it in the html header?
Do I put it in query.anythingslider or jquery.anythingslider.video?

I notice in the jsFiddle example jquery.anythingslider , jquery.anythingslider.video , jquery.min are not used, so I don't need to use these anymore?

thanks again.

Mottie

Hiya!

Replace the existing javascript with the code from the demo. jsFiddle does include those files, they are just listed under the "Manage Resources" section on the left.

Also ALL code listed in the jsFiddle needs to be wrapped in a document ready function and placed in the page head section:

<script>
jQuery(function(){
  // put all the code here
});
</script>

You actually shouldn't need the jquery.anythingslider.video.js file at all unless you decide to add YouTube, Vimeo or HTML5 video.

BobJHuckleberry

Thanks Mottie,

I have everything working except the video doesn't pause when I change panel!

I'm using the exact same files as the jsFiddle example and the same js except for the file paths.

thanks again

TestSite

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">

<title>AnythingSlider Video Demo</title>
<!-- jQuery (required) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script&gt;
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>

<!-- Anything Slider optional plugins, but needed so the embeded video controls will work in IE -->
<!-- http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js -->
<script src="js/swfobject.js"></script>

<!-- Anything Slider -->
<link rel="stylesheet" href="css/anythingslider.css">
<script src="js/jquery.anythingslider.js"></script>

<!-- AnythingSlider video extension; optional, but needed to control video pause/play -->
<script src="js/jquery.anythingslider.video.js"></script>

<script src="jwplayer/jwplayer.js"></script>

<!-- Older IE stylesheet, to reposition navigation arrows, added AFTER the theme stylesheet above -->
<!--[if lte IE 7]>
<link rel="stylesheet" href="css/anythingslider-ie.css" type="text/css" media="screen" />
<![endif]-->

<script>
// DOM Ready
$(function(){
$('#slider').anythingSlider({
resizeContents      : true,
addWmodeToObject    : 'transparent',
navigationFormatter : function(index, panel){ // Format navigation labels with text
return ['Vimeo-iframe', 'Vimeo-embed', 'YouTube-iframe', 'YouTube-embed', 'HTML5 Video'][index - 1];
}
});
});
</script>


<script>
jQuery(function(){
// Make a list of videos first
// ***********************
var flashplayer = "jwplayer/player.swf",
videos = [];

// videos.push([ id, file, image, height, width ]);
videos.push([
"container1",
"video/video1.mp4",
"images/preview.jpg",
700,
390
]);

videos.push([
"container2",
"video/video2.mp4",
"images/preview.jpg",
700,
390
]);



videos.push([
"container3",
"video/video3.mp4",
"images/preview.jpg",
700,
390
]);

videos.push([
"container4",
"video/video4.mp4",
"images/preview.jpg",
700,
390
]);

videos.push([
"container5",
"video/video5.mp4",
"images/preview.jpg",
700,
390
]);


// Set up players
$.each(videos, function(i, v) {
jwplayer(v[0]).setup({
file: v[1],
flashplayer: flashplayer,
image: v[2],
height: v[3],
width: v[4]
});
});

// Set up AnythingSlider
$('#slider').anythingSlider({

// pause all videos when changing slides
onSlideInit: function(e, slider) {
if (jwplayer) {
$.each(videos, function(i) {
jwplayer(i).pause(true);
});
}
},

// Only play a paused video when a slide comes into view
onSlideComplete: function(slider) {
if (jwplayer) {
$.each(videos, function(i, v) {
// find ID in panel
if (slider.$currentPage.find('#' + v[0]).length && jwplayer(v[0]).getState() === 'PAUSED') {
jwplayer(v[0]).play();
}
});
}
},

// *********** Video ***********
// this DOES NOTHING because jwplayer is set up outside of AnythingSlider
addWmodeToObject: "opaque",

// return true if video is playing or false if not
isVideoPlaying: function(slider) {
if (jwplayer) {
// jwplayer object is wrapped in #{id}_wrapper
var vid = slider.$currentPage.find('[id$=_wrapper]'),
jwid = (vid.length) ? vid.attr('id').replace(/_wrapper/, '') : '';
if (vid.find('#' + jwid).length && jwplayer(jwid).getState() === 'PLAYING') {
return true;
}
}
return false;
}

});
});
</script>
</head>

<body>

<!-- START AnythingSlider -->
<ul id="slider">
<li><div id="container1"></div></li>
<li><div id="container2"></div></li>
<li><div id="container3"></div></li>
<li><div id="container4"></div></li>
<li><div id="container5"></div></li>
</ul>

</body>
</html>

Mottie

It looks like this bit of code needs to be removed:

// DOM Ready
$(function(){
$('#slider').anythingSlider({
resizeContents      : true,
addWmodeToObject    : 'transparent',
navigationFormatter : function(index, panel){ // Format navigation labels with text
return ['Vimeo-iframe', 'Vimeo-embed', 'YouTube-iframe', 'YouTube-embed', 'HTML5 Video'][index - 1];
}
});
});

The reason is that if you try to initialize AnythingSlider a second time (the one with all the jw code), all the options get ignored, because it's already running. So just remove, or move those options into the second copy.

Mottie

Oh, in case you want to see the code with both combined, here it goes

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">

    <title>AnythingSlider Video Demo</title>
    <!-- jQuery (required) -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script&gt;
    <script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>

    <!-- Anything Slider optional plugins, but needed so the embeded video controls will work in IE -->
    <!-- http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js -->
    <script src="js/swfobject.js"></script>

    <!-- Anything Slider -->
    <link rel="stylesheet" href="css/anythingslider.css">
    <script src="js/jquery.anythingslider.js"></script>

    <!-- AnythingSlider video extension; optional, but needed to control video pause/play -->
    <script src="js/jquery.anythingslider.video.js"></script>

    <script src="jwplayer/jwplayer.js"></script>

    <!-- Older IE stylesheet, to reposition navigation arrows, added AFTER the theme stylesheet above -->
    <!--[if lte IE 7]>
    <link rel="stylesheet" href="css/anythingslider-ie.css" type="text/css" media="screen" />
    <![endif]-->

    <script>
      jQuery(function($){
        // Make a list of videos first
        // ***********************
        var flashplayer = "jwplayer/player.swf",
        videos = [];
        // videos.push([ id, file, image, height, width ]);
        videos.push([ "container1", "video/video1.mp4", "images/preview.jpg", 700, 390 ]);
        videos.push([ "container2", "video/video2.mp4", "images/preview.jpg", 700, 390 ]);
        videos.push([ "container3", "video/video3.mp4", "images/preview.jpg", 700, 390 ]);
        videos.push([ "container4", "video/video4.mp4", "images/preview.jpg", 700, 390 ]);
        videos.push([ "container5", "video/video5.mp4", "images/preview.jpg", 700, 390 ]);

        // Set up players
        $.each(videos, function(i, v) {
          jwplayer(v[0]).setup({
            file: v[1],
            flashplayer: flashplayer,
            image: v[2],
            height: v[3],
            width: v[4]
          });
        });

        // Set up AnythingSlider
        $('#slider').anythingSlider({

          resizeContents      : true,
          navigationFormatter : function(index, panel){ // Format navigation labels with text
            return ['Vimeo-iframe', 'Vimeo-embed', 'YouTube-iframe', 'YouTube-embed', 'HTML5 Video'][index - 1];
          },

          // pause all videos when changing slides
          onSlideInit: function(e, slider) {
            if (jwplayer) {
              $.each(videos, function(i) {
                jwplayer(i).pause(true);
              });
            }
          },

          // Only play a paused video when a slide comes into view
          onSlideComplete: function(slider) {
            if (jwplayer) {
              $.each(videos, function(i, v) {
                // find ID in panel
                if (slider.$currentPage.find('#' + v[0]).length && jwplayer(v[0]).getState() === 'PAUSED') {
                  jwplayer(v[0]).play();
                }
              });
            }
          },

          // *********** Video ***********
          // return true if video is playing or false if not
          isVideoPlaying: function(slider) {
            if (jwplayer) {
              // jwplayer object is wrapped in #{id}_wrapper
              var vid = slider.$currentPage.find('[id$=_wrapper]'),
              jwid = (vid.length) ? vid.attr('id').replace(/_wrapper/, '') : '';
              if (vid.find('#' + jwid).length && jwplayer(jwid).getState() === 'PLAYING') {
                return true;
              }
            }
            return false;
          }

        });
      });
    </script>
  </head>

  <body>

    <!-- START AnythingSlider -->
    <ul id="slider">
      <li><div id="container1"></div></li>
      <li><div id="container2"></div></li>
      <li><div id="container3"></div></li>
      <li><div id="container4"></div></li>
      <li><div id="container5"></div></li>
    </ul>

  </body>
</html>

BobJHuckleberry

Have it working now!

Thanks very much for all your help Mottie, you've saved me a great deal of time.

ineluki

Hi

I'm having the same problem as Bob above..Using Anythingslider combined with JWplayer..
Im using this implementation of jwplayer:


<div id="jwplayer_film_tag_69094">Laddar film...</div>

And then:


<script type="text/javascript">
jwplayer("jwplayer_film_tag_69094").setup({

'autostart': 'false',
'file': 'http://youtu.be/hP9Lmo0Az7Q',
'flashplayer': '/includes/scripts/mediaplayer-5.6/player.swf',
'id': 'jwplayer_film_tag_player',
'width': '980',
'height': '392',
'playlist.position': 'none',
etc.......					  
});
</script>

It the recommended embedding methot from JW..
I dont really understand how I can change the implementation to // videos.push([ id, file, image, height, width ]); ?

Mottie

There is a code example above:

// videos.push([ id, file, image, height, width ]);
videos.push([ "container1", "video/video1.mp4", "images/preview.jpg", 700, 390 ]);

so from your code, it would be:

videos.push([ 'jwplayer_film_tag_player', 'http://youtu.be/hP9Lmo0Az7Q', '', 392, 980 ]);

ppardo

My problem is that firebug thows the following error: TypeError: jwplayer(...).setup is not a function width: v[4], I've tried everything, even downgrade jwplayer jscript but the nly thing i've got is 48 h. of work lost.....

Desperatly need help, this is my code:

      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
      <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.2.min.js"><\/script>')</script>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
      <script src="js/anythingslider/jquery.anythingslider.min.js"></script>
      <script src="js/anythingslider/jquery.anythingslider.fx.min.js"></script>
      <script src="js/anythingslider/jquery.anythingslider.video.min.js"></script>
      <script src="/jwplayer/jwplayer.js"></script>

      <script type="text/javascript">

     jQuery(function($){
      // Make a list of videos first
      // ***********************
      var flashplayer = "/jwplayer/jwplayer.flash.swf",
      videos = [];

      // videos.push([ id, file, image, height, width ]);
      videos.push(["container1","/videos/marca-la-diferencia_v4.flv", "/previo-ventajas.jpg",392,960]);
      videos.push(["container2","/videos/promocional.flv", "/previo-testimonio.jpg",392,960]);

      // Set up players
          $.each(videos, function(i, v) {
              jwplayer(v[0]).setup({
              file: v[1],
              flashplayer: flashplayer,
              image: v[2],
              height: v[3],
              width: v[4]
            });
          });

      $('#slider').anythingSlider({
          buildArrows         : true,      // If true, builds the forwards and backwards buttons
          buildNavigation     : true,      // If true, builds a list of anchor links to link to each panel
          buildStartStop      : false,       // If true, builds the start/stop button
          resizeContents      : true,
        // pause all videos when changing slides
        onSlideInit: function(e, slider) {
          if (jwplayer) {
            $.each(videos, function(i) {
              jwplayer(i).pause(true);
            });
          }
        },

        // Only play a paused video when a slide comes into view
        onSlideComplete: function(slider) {
          if (jwplayer) {
            $.each(videos, function(i, v) {
              // find ID in panel
              if (slider.$currentPage.find('#' + v[0]).length && jwplayer(v[0]).getState() === 'PAUSED') {
                jwplayer(v[0]).play();
              }
            });
          }
        },

        // *********** Video ***********
        // return true if video is playing or false if not
        isVideoPlaying: function(slider) {
          if (jwplayer) {
            // jwplayer object is wrapped in #{id}_wrapper
            var vid = slider.$currentPage.find('[id$=_wrapper]'),
            jwid = (vid.length) ? vid.attr('id').replace(/_wrapper/, '') : '';
            if (vid.find('#' + jwid).length && jwplayer(jwid).getState() === 'PLAYING') {
              return true;
            }
          }
          return false;
        }

      });
    });

ppardo

I forgot to tell that i'm using the last jwplayer version 6.1

Regards

Mottie

Hi @ppardo!

Are you sure that jwplayer is loaded on the page? What I mean is I see the script tag in the code above, but what I want to know is what do you see when you type in jwplayer into the firebug console?

ppardo

Hi Mottie;

It seems to be, apparently.... cause when I type jwplayer in, it returns function()

ppardo

Hi Mottie;

I don't know how to say it, cause i feel very ashamed right now; the thing is that I asked plugin to write content to 'container1' while the name of the container is 'container', I'm sorry to waste your time(and mine as well - 26hours).

Thanks very much for your help, I appreciate very much; your code works like a charm (when a twat like me uses it correctly).

treehouse : what would you like to learn today?

Forums

AnythingSlider: Using JW Player

Hi