I have created a function which works fine on Chrome but seems to produce an error on firefox

ReferenceError: playNextClip is not defined

You can view the site at: /

My JS is as follows.

 function queueVideos(num, amount) {

    if (num < amount) {
        document.getElementById('video-element-'+num).addEventListener(
            'ended',
            playNextClip,
            false);
        function playNextClip() {
            var nextVid = num + 1;
            $( '#video-element-' + nextVid ).show().get(0).play();
            $( '#video-element-' + num ).hide();
            document.getElementById( 'video-element-' + num ).pause();
            document.getElementById( 'video-element-' + num ).currentTime = 0;
            queueVideos(nextVid, amount)
        }
    }

    if (num == amount) {
        document.getElementById('video-element-'+num).addEventListener(
            'ended',
            playFirst,
            false);
        function playFirst() {
            $( '#video-element-1' ).show().get(0).play();
            $( '#video-element-' + num ).hide();
            document.getElementById( 'video-element-' + num ).pause();
            document.getElementById( 'video-element-' + num ).currentTime = 0;
        }
    }

}

queueVideos(1, 5);

Why does this work in Chrome but not in Firefox?
What can I do to make it cross browser patible?

Thanks!

I have created a function which works fine on Chrome but seems to produce an error on firefox

ReferenceError: playNextClip is not defined

You can view the site at: http://thewild..au/caleboys/

My JS is as follows.

 function queueVideos(num, amount) {

    if (num < amount) {
        document.getElementById('video-element-'+num).addEventListener(
            'ended',
            playNextClip,
            false);
        function playNextClip() {
            var nextVid = num + 1;
            $( '#video-element-' + nextVid ).show().get(0).play();
            $( '#video-element-' + num ).hide();
            document.getElementById( 'video-element-' + num ).pause();
            document.getElementById( 'video-element-' + num ).currentTime = 0;
            queueVideos(nextVid, amount)
        }
    }

    if (num == amount) {
        document.getElementById('video-element-'+num).addEventListener(
            'ended',
            playFirst,
            false);
        function playFirst() {
            $( '#video-element-1' ).show().get(0).play();
            $( '#video-element-' + num ).hide();
            document.getElementById( 'video-element-' + num ).pause();
            document.getElementById( 'video-element-' + num ).currentTime = 0;
        }
    }

}

queueVideos(1, 5);

Why does this work in Chrome but not in Firefox?
What can I do to make it cross browser patible?

Thanks!

• javascript
• jquery
• google-chrome
• firefox

4 Answers 4

    function queueVideos(num, amount) {
        if (num < amount) {

            function playNextClip() {
                var nextVid = num + 1;
                $( '#video-element-' + nextVid ).show().get(0).play();
                $( '#video-element-' + num ).hide();
                document.getElementById( 'video-element-' + num ).pause();
                document.getElementById( 'video-element-' + num ).currentTime = 0;
                queueVideos(nextVid, amount)
            }
               document.getElementById('video-element-'+num).addEventListener(
                'ended',
                playNextClip,
                false);
        }

        if (num == amount) {

            function playFirst() {
                $( '#video-element-1' ).show().get(0).play();
                $( '#video-element-' + num ).hide();
                document.getElementById( 'video-element-' + num ).pause();
                document.getElementById( 'video-element-' + num ).currentTime = 0;
            }
document.getElementById('video-element-'+num).addEventListener(
                'ended',
                playFirst,
                false);
        }

    }
    queueVideos(1, 5);

Try to give the function defination prior to the addeventlistener.

Why does this work in Chrome but not in Firefox?

Because you are writing invalid JavaScript, and unfortunately browsers decided to gracefully handle this in different ways rather than throwing an error.

According to the specification, function declarations inside blocks are invalid. Chrome decided to treat them as function declarations and hoists them, Firefox treats them more like function expressions.

The solution is to not use function declarations inside blocks. Either declare them outside the block (i.e. before or after the if statement in your case), or use function expression. If you use a function expression you have to define it before you reference it.

If I have understood scoping in firefox right, then you need to define the function firefox first before invoking it

So try this

    function queueVideos(num, amount) {
    function playNextClip() {
                var nextVid = num + 1;
                $( '#video-element-' + nextVid ).show().get(0).play();
                $( '#video-element-' + num ).hide();
                document.getElementById( 'video-element-' + num ).pause();
                document.getElementById( 'video-element-' + num ).currentTime = 0;
                queueVideos(nextVid, amount)
            }
function playFirst() {
                $( '#video-element-1' ).show().get(0).play();
                $( '#video-element-' + num ).hide();
                document.getElementById( 'video-element-' + num ).pause();
                document.getElementById( 'video-element-' + num ).currentTime = 0;
            }
        if (num < amount) {
            document.getElementById('video-element-'+num).addEventListener(
                'ended',
                playNextClip,
                false);

        }

        if (num == amount) {
            document.getElementById('video-element-'+num).addEventListener(
                'ended',
                playFirst,
                false);

        }

    }

Function declarations are usually hoisted in javascript. Function declarations refer to declaring functions like:

function myFunction(){..body..};

Function expressions are not hoisted in javascript, function expressions look like:

var myFunction = function(){..body..};

By hoisting it means, the function declaration and definition will be moved to top of parent function, so you can use it before actually defining it in code.

Functions declared inside a condition is handled differently by firefox and webkit(while in non-strict mode). Functions declared as declaration is actually treated as expression by firefox and prevents hoisting, where as Chrome still hoists the function declaration even when inside the condition.

So it works for you in Chrome as its hoisted, and doesn't work in Firefox as its not hoisted. As a fix you can define the functions before actually using it.