Fixed a number of IE8 and Flash issues from 5.0 changes

IE8 compatiblity fixes - Babel loose mode and ES5-shim

Reverted to old isPlainObject to fix IE8

Lodash.isplainobject was throwing a "Member not found error" on elements,
specifically the 'custom' track element being passed in options.

(turned out to be that we were using lodash modern, not compat)

Fixed full-window mode in IE8 by fixing fullscreen API check

Fixed the swf events by creating the object in component.createEl
fixes #2184

Added es5 shim and sham to the sandbox example
related to #1687

CHANGELOG.md

@@ -37,6 +37,7 @@ CHANGELOG
 * @mister-ben updated language support to handle language codes with regions ([view](https://github.com/videojs/video.js/pull/2177))
 * @heff changed the 'ready' event to always be asynchronous  ([view](https://github.com/videojs/video.js/pull/2188))
 * @heff fixed instances of tabIndex that did not have a capital I   ([view](https://github.com/videojs/video.js/pull/2204))
+* @heff fixed a number of IE8 and Flash related issues  ([view](https://github.com/videojs/video.js/pull/2206))
 
 --------------------
 

grunt.js

@@ -286,7 +286,8 @@ module.exports = function(grunt) {
           ],
           transform: [
             require('babelify').configure({
-              sourceMapRelative: './src/js'
+              sourceMapRelative: './src/js',
+              loose: 'all'
             }),
             ['browserify-versionify', {
               placeholder: '__VERSION__',

package.json

@@ -24,7 +24,6 @@
   "style": "./dist/video-js.css",
   "dependencies": {
     "global": "^4.3.0",
-    "lodash.isplainobject": "^3.0.2",
     "lodash.merge": "^3.2.1",
     "object.assign": "^2.0.1",
     "safe-json-parse": "^4.0.0",
@@ -40,6 +39,7 @@
     "browserify-versionify": "^1.0.4",
     "chg": "~0.2.0",
     "css": "^2.2.0",
+    "es5-shim": "^4.1.3",
     "grunt": "^0.4.4",
     "grunt-aws-s3": "^0.12.1",
     "grunt-banner": "^0.3.1",

sandbox/index.html.example

@@ -4,8 +4,12 @@
   <meta charset="utf-8" />
   <title>Video.js Sandbox</title>
 
-  <link href="../build/temp/video-js.css" rel="stylesheet" type="text/css">
+  <!-- Add ES5 shim and sham for IE8 -->
+  <script src="../node_modules/es5-shim/es5-shim.js"></script>
+  <script src="../node_modules/es5-shim/es5-sham.js"></script>
 
+  <!-- Load the source files -->
+  <link href="../build/temp/video-js.css" rel="stylesheet" type="text/css">
   <script src="../build/temp/video.js"></script>
 
   <!-- Set the location of the flash SWF -->

src/js/player.js

@@ -1297,7 +1297,7 @@ class Player extends Component {
 
     this.isFullscreen(true);
 
-    if (fsApi) {
+    if (fsApi.requestFullscreen) {
       // the browser supports going fullscreen at the element level so we can
       // take the controls fullscreen as well as the video
 
@@ -1354,7 +1354,7 @@ class Player extends Component {
     this.isFullscreen(false);
 
     // Check for browser element fullscreen support
-    if (fsApi) {
+    if (fsApi.requestFullscreen) {
       document[fsApi.exitFullscreen]();
     } else if (this.tech.supportsFullScreen()) {
      this.techCall('exitFullScreen');

src/js/tech/flash.js

@@ -27,7 +27,36 @@ class Flash extends Tech {
   constructor(options, ready){
     super(options, ready);
 
-    let { source, parentEl } = options;
+    // If source was supplied pass as a flash var.
+    if (options.source) {
+      this.ready(function(){
+        this.setSource(options.source);
+      });
+    }
+
+    // Having issues with Flash reloading on certain page actions (hide/resize/fullscreen) in certain browsers
+    // This allows resetting the playhead when we catch the reload
+    if (options.startTime) {
+      this.ready(function(){
+        this.load();
+        this.play();
+        this.currentTime(options.startTime);
+      });
+    }
+
+    // Add global window functions that the swf expects
+    // A 4.x workflow we weren't able to solve for in 5.0
+    // because of the need to hard code these functions
+    // into the swf for security reasons
+    window.videojs = window.videojs || {};
+    window.videojs.Flash = window.videojs.Flash || {};
+    window.videojs.Flash.onReady = Flash.onReady;
+    window.videojs.Flash.onEvent = Flash.onEvent;
+    window.videojs.Flash.onError = Flash.onError;
+  }
+
+  createEl() {
+    let options = this.options();
 
     // Generate ID for swf object
     let objId = options.techId;
@@ -61,31 +90,10 @@ class Flash extends Tech {
       'class': 'vjs-tech'
     }, options.attributes);
 
-    // If source was supplied pass as a flash var.
-    if (source) {
-      this.ready(function(){
-        this.setSource(source);
-      });
-    }
-
-    // Having issues with Flash reloading on certain page actions (hide/resize/fullscreen) in certain browsers
-    // This allows resetting the playhead when we catch the reload
-    if (options.startTime) {
-      this.ready(function(){
-        this.load();
-        this.play();
-        this.currentTime(options.startTime);
-      });
-    }
-
-    window.videojs = window.videojs || {};
-    window.videojs.Flash = window.videojs.Flash || {};
-    window.videojs.Flash.onReady = Flash.onReady;
-    window.videojs.Flash.onEvent = Flash.onEvent;
-    window.videojs.Flash.onError = Flash.onError;
-
     this.el_ = Flash.embed(options.swf, flashVars, params, attributes);
     this.el_.tech = this;
+
+    return this.el_;
   }
 
   play() {

src/js/utils/merge-options.js

@@ -1,5 +1,11 @@
 import merge from 'lodash.merge';
-import isPlainObject from 'lodash.isplainobject';
+
+function isPlain(obj) {
+  return !!obj
+    && typeof obj === 'object'
+    && obj.toString() === '[object Object]'
+    && obj.constructor === Object;
+}
 
 /**
  * Merge two options objects, recursively merging **only** plain object
@@ -20,7 +26,7 @@ export default function mergeOptions(object={}) {
     merge(object, source, function(a, b) {
 
       // If we're not working with a plain object, copy the value as is
-      if (!isPlainObject(b)) {
+      if (!isPlain(b)) {
         return b;
       }
 
@@ -29,7 +35,7 @@ export default function mergeOptions(object={}) {
       // This makes it consistent with how merge() works by default
       // and also protects from later changes the to first object affecting
       // the second object's values.
-      if (!isPlainObject(a)) {
+      if (!isPlain(a)) {
         return mergeOptions({}, b);
       }
     });