Remove 'ok' button and add doc

Get rid of the 'ok' button and just dismiss error dialogs on click. Fix the video source of the example page and add explanatory comments. Add a readme.
dmlap · Mar 8, 2013 · c8f20a7 · jrw95 · Mar 12, 2013 · dmlap
1 parent 4f1f431
commit c8f20a7
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 33 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,45 @@
+Video.js Error Messages
+=======================
+A plugin that displays user-friendly messages when video.js encounters an error.
+
+Using the Plugin
+----------------
+The plugin automatically registers itself when you include videojs.errors.js in your page:
+
+    <script src='videojs.errors.js'></script>
+
+You probably want to include the default stylesheet, too. It displays error messages as a semi-transparent overlay on top of the video element itself. It's designed to match up fairly well with the default video.js styles:
+
+    <link href='videojs.errors.css' rel='stylesheet'>
+
+If you're not a fan of the default styling, you can drop in your own stylesheet. The only new element to worry about is `vjs-errors-dialog` which is the container for the error messages.
+
+Once you've initialized video.js, you can activate the errors plugin. The plugin has a set of default error messages for the standard HTML5 video errors keyed off their runtime values:
+
+- MEDIA_ERR_ABORTED (numeric value `1`)
+- MEDIA_ERR_NETWORK (numeric value `2`)
+- MEDIA_ERR_DECODE (numeric value `3`)
+- MEDIA_ERR_SRC_NOT_SUPPORTED (numeric value `4`)
+
+If the video element emits any of those errors, the corresponding error message will be displayed. You can override and add custom error codes by supplying options to the plugin:
+
+    video.errors({
+      messages: {
+        3: 'This is an override for the generic MEDIA_ERR_DECODE',
+        'custom': 'This is a custom error message'
+      }
+    });
+
+If you define custom error messages, you'll need to let video.js know when to emit them yourself:
+
+    video.trigger({
+      type: 'error',
+      code: 'custom',
+      target: video.el()
+    });
+
+If an error is emitted that doesn't have an associated key, a generic, catch-all message is displayed. You can override that text by supplying a message for the key `unknown`.
+
+Known Issues
+------------
+On iPhones, the video element intercepts all user interaction so error message dialogs miss the tap events and don't dismiss themselves. If your video is busted anyways, you may not be that upset about this.
diff --git a/example.html b/example.html
@@ -8,28 +8,43 @@
 </head>
 <body>
 <video id="video" class="video-js vjs-default-skin" controls
-  preload="auto" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.jpg" src="http://video-js.zencoder.com/oceans-clip.mp4a"
+  preload="auto" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.jpg" src="http://video-js.zencoder.com/oceans-clip.mp4"
   data-setup="{}">
 <p>Your browser doesn't support video.
 </video>
 <script src="videojs.errors.js"></script>
 <script>
+// get a reference to the video.js player
 var video = videojs('video');
+
+// initialize the errors plugin with a custom error code and message
 video.errors({
   messages: {
-   'custom-at-init': "This is a custom error message"
+   3: 'This is an override for the generic MEDIA_ERR_DECODE',
+   'custom': 'This is a custom error message'
   }
 });
-/*
+
+// we're going to trigger an error manually for demonstration purposes...
 video.trigger({
   type:'error',
 
- code: 2,
-//  code: 'unknown',
-// code: 'custom-at-init',
+  // this error code would simulate a network error
+  // code: 2,
+
+  // this error code would display our MEDIA_ERR_DECODE override message
+  // code: 3,
+
+  // if the error code doesn't have an associated message, the 'unknown'
+  // message is displayed
+  // code: 'unknown',
+
+  // You can also specify a custom message like this one when you initialize
+  // the plugin
+  code: 'custom',
+
   target: video.el()
 });
-*/
 </script>
 </body>
 </html>
diff --git a/videojs.errors.css b/videojs.errors.css
@@ -11,24 +11,11 @@
     left: 0;
     margin: 0 auto;
     padding: 10px 15px;
+    cursor: pointer;
     position: absolute;
     right: 0;
     text-align: center;
     width: 300px;
     top: 10%;
     z-index: 2;
 }
-
-.vjs-error-ok-btn {
-    background-color: #ddd;
-    border: 1px solid #161616;
-    border-radius: 5px;
-    color: #161616;
-    cursor: pointer;
-    margin: 5px auto 0;
-    width: 44px;
-}
-
-.vjs-error-ok-btn:hover {
-    background-color: #fff;
-}
diff --git a/videojs.errors.js b/videojs.errors.js
@@ -5,11 +5,11 @@
       // MEDIA_ERR_ABORTED
       1: "The video download was cancelled",
       // MEDIA_ERR_NETWORK
-      2: "We lost the connection to your video. Is your internet working?",
+      2: "We lost the connection to your video. Are you connected to the internet?",
       // MEDIA_ERR_DECODE
       3: "The video is bad or in a format that can't be played on your browser",
       // MEDIA_ERR_SRC_NOT_SUPPORTED
-      4: "Your browser does not support the format of this video",
+      4: "Your video is either unavailable or your browser does not support the format it's recorded in",
       // MEDIA_ERR_ENCRYPTED
       5: "The video you're trying to watch is encrypted and we don't know how to decrypt it",
       unknown: "Something we didn't anticipate just happened which is preventing your video from playing. Wait a little while and try again"
@@ -35,27 +35,21 @@
     settings = extend(defaults, options);
     messages = settings.messages;
     addEventListener = this.el().addEventListener || this.el().attachEvent;
-
 
     this.on('error', function(event){
-      var dialog, ok, player;
+      var code, dialog, player;
       player = this;
+      code = event.target.error ? event.target.error.code : event.code;
 
       // create the dialog
       dialog = document.createElement('div');
       dialog.className = 'vjs-error-dialog';
-      dialog.textContent = messages[event.code] || messages['unknown'];
-
-      // create the 'ok' button
-      ok = document.createElement('div');
-      ok.className = 'vjs-error-ok-btn';
-      ok.textContent = "ok";
+      dialog.textContent = messages[code] || messages['unknown'];
       addEventListener.call(dialog, 'click', function(event){
         player.el().removeChild(dialog);
       }, false);
 
-      // put everything together and add it to the DOM
-      dialog.appendChild(ok);
+      // add it to the DOM
       player.el().appendChild(dialog);
     });
   });