How can I hide an error in Videojs, when the stream is not operating?

Help & Support
1

How can I make my live streaming website, which uses Video.js to show a range of live video streams, such as sporting events, concerts, lectures, and gaming sessions, more user-friendly? Although the website provides real-time access to various feeds, it periodically experiences network outages, server crashes, and other unforeseen challenges.
Live streams might consequently experience issues or briefly go offline as a result, in which case Video.js will display the standard error messages.
How can you manage error handling so that these warnings don’t interfere with users’ ability to enjoy the content?

1 Like
2

In order to hide the errors when a stream encounters problems or is not functioning, you can control the error event and modify the default error behavior in Video.js to silence error messages.

Here is an example:

<video id="my-video" class="video-js" controls preload="auto" width="640" height="360">
    <source src="your-video-source.mp4" type="video/mp4">
    <!-- Add more source elements for different formats if needed -->
</video>

<script src="video.js"></script>

<script>
    var player = videojs('my-video');
    
    // Register an event listener for the error event
    player.on('error', function() {
        // Override the default error behavior (which hides the video and shows an error message)
        return false;
    });
</script>

The Video.js library is added, and a video element with the designated ID (my-video) is created.
Invoking videojs(my-video) initializes the Video.js player.

Using a player, an event listener for the error event is added. Error, function(),...

Return false is used inside the event listener function to override the default error behavior. By taking this action, Video.js will not hide the video element or display an error message in the event of a problem.

You have the freedom to handle problems in accordance with your unique requirements by intercepting the standard error behavior as outlined. This may involve customizing the error message that is displayed or carrying out alternative actions inside your application.