DEBUGGING
Error Screens
Seven error states with branded overlay UI. Set videoErrorScreen: true to replace the default Video.js message. MediaRetry handles all retry logic and drives the screen.
No source provided — player has nothing to load.
{
"videoErrorScreen": true,
"media": null
}Connection dropped mid-load.
{
"videoErrorScreen": true,
"media": {
"mp4": [
{
"src": "https://nonexistent.invalid/v.mp4",
"type": "video/mp4",
"label": "480P"
}
]
}
}Invalid domain — simulates a network failure.
{
"videoErrorScreen": true,
"media": {
"mp4": [
{
"src": "https://nonexistent-domain.invalid/video.mp4",
"type": "video/mp4",
"label": "480P"
}
]
}
}Unsupported MIME type — browser cannot decode.
{
"videoErrorScreen": true,
"media": {
"mp4": [
{
"src": "/fake.xyz",
"type": "video/xyz-unsupported",
"label": "480P"
}
]
}
}Non-responsive URL — spinner shown after pendingTimeout ms.
{
"videoErrorScreen": true,
"videoErrorScreenOptions": {
"pendingTimeout": 3000,
"pendingMaxWait": 12000
},
"media": {
"mp4": [
{
"src": "http://example.com/pending.php",
"type": "video/mp4",
"label": "480P"
}
]
}
}All sources fail — MediaRetry cycles through each before giving up.
{
"videoErrorScreen": true,
"videoErrorScreenOptions": {
"retrySourceTimeout": 4000
},
"media": {
"mp4": [
{
"src": "https://nonexistent.invalid/v1.mp4",
"type": "video/mp4",
"label": "1080P"
},
{
"src": "https://nonexistent.invalid/v2.mp4",
"type": "video/mp4",
"label": "720P"
},
{
"src": "https://nonexistent.invalid/v3.mp4",
"type": "video/mp4",
"label": "480P"
}
]
}
}Catch-all — undefined or unexpected error condition.
{
"videoErrorScreen": true,
"media": {
"mp4": [
{
"src": "about:blank",
"type": "video/mp4",
"label": "480P"
}
]
}
}videoErrorScreen
boolean
Enables the branded error overlay.
videoErrorScreenOptions.pendingTimeout
number (ms)
Delay before the buffering spinner appears. Default: 3000.
videoErrorScreenOptions.pendingMaxWait
number (ms)
Max buffering wait — forces an error after this. Default: 8000.
videoErrorScreenOptions.retrySourceTimeout
number (ms)
How long MediaRetry waits per source before trying the next. Default: 5000.
VideoErrorScreen
Pure display component. Renders overlays for each error type. Exposes show(type), showSearching(), showPending(), hide(). Does not listen to any player events.
MediaRetry
Listens to error, waiting, canplay events. Cycles through sources, manages pending timeouts, auto-resumes playback after a successful retry, and drives VideoErrorScreen to show the correct overlay at each stage.
HopeVideoJS is a flexible and customizable video player solution based on Video.js, developed by Umut Yaldız. It offers a modern and powerful media playback experience with its open-source structure.