Run Jplayer on element scroll into view

Question

I'm trying to set up a video to play using JPlayer, pretty much stock setup on video player. I want this to only start playing once the whole containing DIV is in view.

I have looked for examples of JQuery being used to trigger an event when an element is in view. On Stack all those that I found talk about "scroll into view" or "appear". To me this implies (incorrectly possibly) that a scroll is needed to trigger the event; if the user's screen was large enough to show the DIV when the page loads I want this to play even if no scroll is needed.

Without the visible condition statements, the video runs perfectly, albeit off the screen. I've experimented with the Appear plugin but unsuccessfully (no errors reported in FB console) so I'm obviously doing something wrong:

  $(document).ready(function() {
       $("#jquery_jplayer_1").jPlayer({
    ready: function () {
     $(this).jPlayer("setMedia", {
      title: "Website Name",
      m4v: "video.mp4",
      preload: "auto"
      //poster: "Big_Buck_Bunny_Trailer_480x270.png"
     }).jPlayer("play");
    },
    swfPath: "jplayer",
    supplied: "m4v",
    size: {
     width: "600px",
     height: "338px",
     cssClass: "jp-video-360p"
    },
    useStateClassSkin: true,
    autoBlur: false,
    keyEnabled: true
   });

         <div id="jp_container_1" class="jp-video jp-video-360p" role="application" aria-label="media player">
      <div class="jp-type-single">
       <div id="jquery_jplayer_1" class="jp-jplayer"></div>
       <div class="jp-gui">
        <div class="jp-video-play">
         <button class="jp-video-play-icon" role="button" tabindex="0">play</button>
        </div>
       </div>
       <div class="jp-no-solution">
        <span>Update Required</span>
        To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
       </div>
      </div>
     </div> 


 <script src="js/jquery.min.js"></script>
 <script src="js/jquery.appear.js"></script>
 <script type="text/javascript" src="jplayer/jquery.jplayer.min.js"></script>

I have tried adding an if statement around the jPlayer function: if ($('#jquery_jplayer_1').visible(true)) { ..... } - doesn't work for me.

And also the Appear plugin instead:

        $('#jquery_jplayer_1').appear(function() {
            .....
        });

But I'm not getting there. Any pointers appreciated as to how to have a pre-visible or on scroll visible JPlayer instance start playing when you can see it?

Palo · Answer 1 · 2015-10-01T11:27:42.073

This what I would do :

$(document).ready(function() {
    $("#jquery_jplayer_1").jPlayer({
        ready: function () {
            $(this).jPlayer("setMedia", {
                title: "Website Name",
                m4v: "video.mp4",
                preload: "auto"
            });
            playIfVisible();
        },
        swfPath: "jplayer",
        supplied: "m4v",
        size: {
            width: "600px",
            height: "338px",
            cssClass: "jp-video-360p"
        },
        useStateClassSkin: true,
        autoBlur: false,
        keyEnabled: true
    });
    function playIfVisible(){
        if($(window).scrollTop() + $(window).height() >= $("#jquery_jplayer_1").offset().top){
            $("#jquery_jplayer_1").jPlayer("play");
        }
    }
    $(document).scroll(function(){
        if($("#jquery_jplayer_1").data().jPlayer.status.paused){
            playIfVisible($("#jquery_jplayer_1"));
        }
    });
});

You check on every scroll event if player paused and if it is in current screen. Note that I also removed .jPlayer("play") to prevent autoplay.

Thanks for this. Not quite working, I can see that the scroll action is triggering a check but this then comes up with the following errors as I scroll down towards the video: ReferenceError: player is not defined TypeError: b.wk is undefined TypeError: a.wk is undefined Play button on the video works still, just not the auto play on visible :( — WWD, Oct 01 '15 at 03:54
I have removed player variable and fixed condition. check edit > — Palo, Oct 01 '15 at 11:28

Run Jplayer on element scroll into view

1 Answers1