Jwplayer Flashes "Error loading player: Could not load player configuration"

1
votes

Jwplayer flashes "Error loading player: Could not load player configuration" for just a second before it correctly loads video. I just think this looks unprofessional and I've spent a lot of time looking for how I might suppress the error or hide it until the video is finished loading.

In browsers like Chrome or Safari, you often never even see the error because it's so fast, but in Firefox you see the error every time.

Here is a live demo of what I'm talking about:

https://jj.coursesaver.com/video/watch/2012-11-atomic-structure-atomic-mass-periodic-table/g1-atomic-and-nuclear-structure-1

Any suggestions of what I might try to make it so the user never sees this error?

Thanks!

2
javascriptjwplayerjwplayer6

2 Answers

1
votes

This error is happening because of the way you have the JW flash object added directly to your HTML page - and without the proper configuration parameters. This is not the correct way to embed JW player:

<div id="videoplayer_wrapper" class="embed-responsive embed-responsive-16by9">
    <object type="application/x-shockwave-flash" data="/jw6.12/jwplayer.flash.swf" bgcolor="#000000" id="video-object" name="video-object" class="embed-responsive-item jwswf swfPrev-beforeswfanchor0 swfNext-afterswfanchor0" tabindex="0">
        <param name="allowfullscreen" value="true">
        <param name="allowscriptaccess" value="always">
        <param name="seamlesstabbing" value="true">
        <param name="wmode" value="opaque">
    </object>
</div>

Try replacing what you have with the following:

<div id="videoplayer_wrapper" class="embed-responsive embed-responsive-16by9">
    <div id="video-object"></div>
</div>
0
votes

You can use JW Player's onSetup and onError options to provide an image for these scenarios. Like this:

<div id="playerWrapper">
    <div id="player"></div>
</div>
<script>
    jwplayer('player').setup({
       file:'file.mp4',
       image:'placeholderImage.jpg',
       abouttext: 'Welcome',
       aboutlink: 'http://example.com',
       width: '100%',
       bufferlength: 3,
       primary: 'html5',
       stretching: 'uniform',
       aspectratio: '16:9',
       autostart: 'true',
       events: { 
         onError: function () {
            $('playerWrapper').html('<img src="error.jpg" style="width:100%;height:100%;" />');
         },
         onSetupError: function () {
            $('playerWrapper').html('<img src="error.jpg" style="width:100%;height:100%;" />');
         }
       },
       ga: {}
    )};
</script>