If a media file fail to load in JW Player, load another media file. How to do that?

Question

I'm using this JW Player script to load the videos in my service

                        <script type='text/javascript'>
                            jwplayer('player_hls').setup({
                                file: "https://www.example.com/01/master.m3u8",
                                tracks: [{
                                    file: "https://www.example.com/01/thumbnails.vtt",
                                    kind: "thumbnails"
                                }],
                                image: "https://www.example.com/01/01/poster.jpg",
                                preload: "auto",
                                playbackRateControls: [0.50, 1, 1.50, 2, 2.50, 3, 3.50, 4, 4.50, 5],
                                sharing: {heading: "Condividi"}
                            });
                        </script>

The problem is this. A user uploads a .mp4 video to the site. And the server processes it to make it HLS m3u8 and available in 5 resolutions. But processing the video takes time, usually 30 minutes to an hour.

So I would like to do it this way. Insert the link of the .mp4 file uploaded by users as a "backup" link to use when the m3u8 link doesn't load because the video is being processed. Basically, when the m3u8 fail to load because is encoding, it should load the mp4. When the m3u8 will load because the encoding is finished, then the player load the m3u8 and ignore the mp4.

Is this possible and if so, how? Thank you.

score 0 · Answer 1 · answered Nov 23 '22 at 12:55

You can handle JWPlayer errors by .on('error') callback. https://docs.jwplayer.com/players/reference/playback-events-1#onerror So you can handle new JWPlayer instances or anything you want.

Consider JWPlayer has a multiple sources feature. I guess it can handle the next media source by default if the previous got some error.

jwplayer("myElement").setup({
      playlist: [{
        image: "/uploads/myPoster.jpg",
        sources: [{
          file: "/uploads/myVideo.mp4"
        },{
          file: "/uploads/myVideo.ogv"
        }]
      }]
    });

If a media file fail to load in JW Player, load another media file. How to do that?

1 Answers1