JWPlayer - undefined is not a function

Question

Im wondering if someone could help me out.

Im trying to load a video using jwplayer but am getting errors.

This is the code im using.

        <script type="text/javascript">
            jwplayer("legacyPlayer").setup({
                width:370,
                height:240,
                file: "https://s3.amazonaws.com/legacy/videoname.mp4",
            });
        </script>

        <div id="legacyPlayer" align="center"></div>

The error my console is showing is as follows:

Uncaught TypeError: undefined is not a function 

Any help getting this working would be greatly appreciated.

Cheers,

Answer 1

You should put script block after the HTML tag, looks like this:

<div id="legacyPlayer" align="center"></div>
<script type="text/javascript">
    jwplayer("legacyPlayer").setup({
        width:370,
        height:240,
        file: "https://s3.amazonaws.com/legacy/videoname.mp4",
    });
</script>

When browser document parser encounters a script tag, it will stop parsing the other html content on your page until the script is downloaded and executed. It means that "legacyPlayer" is not exist when you try to manipulate it in the script block. That's the root cause of "undefined is not a function" error (jwplayer selector can't find a DOM with ID:legacyPlayer).

Answer 2

Make sure that your div id ="container" is equal to jwplayer('container') name

<div id="container">Loading the player...</div>

    <script type="text/javascript">

        var playerInstance = jwplayer('container');
        playerInstance.setup({
            file: "//content.jwplatform.com/videos/3XnJSIm4-640.mp4",
            image: "//content.jwplatform.com/thumbs/3XnJSIm4-640.jpg",
            width: 640,
            height: 270,
            logo: {
                file: "//content.jwplatform.com/watermarks/gdz4zR4a.png",
                link: "//www.blender.org/foundation/"
            },
            abouttext: 'Video Available at Blender.org',
            aboutlink: 'http://www.blender.org'
        });
    </script>

</div>