Skip to content

Instantly share code, notes, and snippets.

@chrisroos chrisroos/
Last active Aug 29, 2015

What would you like to do?
Testing the video.js error messages plugin

This is a test of the video.js errors plugin. I'm not sure it's quite working reliably enough for us to use it. I got it to display an error in Chrome by faking a 504 response from the video source, but that error wasn't shown in Safari or Firefox. Firefox tells me that the source couldn't be loaded in the developer console but Safari just shows the spinning loader and nothing in the developer tools that I can see.

NOTE I had to explicitly reference the plugin in the data-setup attribute as per issue 5 on the original videojs-errors repo.

<!DOCTYPE html>
<meta charset="utf-8" />
<title>VideoJS error message test</title>
<link href="" rel="stylesheet" />
<script src=""></script>
<script src="videojs.errors.js"></script>
<link href="videojs.errors.css" rel="stylesheet" />
<h1>VideoJS error message test</h1>
<video id="testVideo" class="video-js vjs-default-skin" controls preload="none" poster="" height="270" width="646" data-setup='{"plugins": {"errors": {}}}'>
<source src="" type="video/mp4" />
.vjs-error-dialog {
background: #242424;
background: -webkit-linear-gradient(top, rgba(69,69,69,0.8) 0%, rgba(35,35,35,0.8) 50%,rgba(22,22,22,0.8) 50%, rgba(54,54,54,0.8) 100%);
background: -o-linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* IE10+ */
border: 2px solid #fff;
border-radius: 25px;
color: white;
font-family: "Helvetica", arial, sans-serif;
font-size: 24px;
left: 0;
margin: 0 auto;
padding: 10px 15px;
cursor: pointer;
position: absolute;
right: 0;
text-align: center;
width: 300px;
top: 10%;
z-index: 2;
var defaults, extend;
defaults = {
messages: {
1: "The video download was cancelled",
2: "The video connection was lost, please confirm you're connected to the internet",
3: "The video is bad or in a format that can't be played on your browser",
4: "This video is either unavailable or not supported in this browser",
5: "The video you're trying to watch is encrypted and we don't know how to decrypt it",
unknown: "An unanticipated problem was encountered, check back soon and try again"
extend = function(obj){
var arg, prop, source;
for (arg in arguments) {
source = arguments[arg];
for (prop in source) {
if (source[prop] && typeof source[prop] === 'object') {
obj[prop] = extend(obj[prop] || {}, source[prop]);
} else {
obj[prop] = source[prop];
return obj;
videojs.plugin('errors', function(options){
var addEventListener, messages, settings;
settings = extend(defaults, options);
messages = settings.messages;
addEventListener = this.el().addEventListener || this.el().attachEvent;
this.on('error', function(event){
var code, dialog, player;
player = this;
code = ? : event.code;
// create the dialog
dialog = document.createElement('div');
dialog.className = 'vjs-error-dialog';
dialog.textContent = messages[code] || messages['unknown'];, 'click', function(event){
}, false);
// add it to the DOM
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.