disable native controls for better firefox mobile compatibility (#19)

collab-project · Jan 18, 2016 · 55d9a3e · 55d9a3e
1 parent effebe8
commit 55d9a3e
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 2 deletions.
diff --git a/examples/animated-gif.html b/examples/animated-gif.html
@@ -19,6 +19,12 @@
   #myVideo {
       background-color: #6EF55F;
   }
+  /* make sure the custom controls are always visible because
+     the plugin hides and replace the video.js native mobile
+     controls */
+  .vjs-using-native-controls .vjs-control-bar {
+      display: flex !important;
+  }
   </style>
 </head>
 <body>

diff --git a/examples/audio-video.html b/examples/audio-video.html
@@ -22,6 +22,12 @@
   #myVideo {
       background-color: #E8E884;
   }
+  /* make sure the custom controls are always visible because
+     the plugin hides and replace the video.js native mobile
+     controls */
+  .vjs-using-native-controls .vjs-control-bar {
+      display: flex !important;
+  }
   </style>
 </head>
 <body>

diff --git a/examples/image-only.html b/examples/image-only.html
@@ -16,6 +16,12 @@
   #myImage {
       background-color: #6B2DA8;
   }
+  /* make sure the custom controls are always visible because
+     the plugin hides and replace the video.js native mobile
+     controls */
+  .vjs-using-native-controls .vjs-control-bar {
+      display: flex !important;
+  }
   </style>
 </head>
 <body>

diff --git a/examples/video-only.html b/examples/video-only.html
@@ -15,13 +15,19 @@
   <style>
   /* place fullscreen control on right side of the player */
   .video-js .vjs-control.vjs-fullscreen-control {
-    position: absolute;
-    right: 0;
+      position: absolute;
+      right: 0;
   }
   /* change player background color */
   #myVideo {
       background-color: #47AFD1;
   }
+  /* make sure the custom controls are always visible because
+     the plugin hides and replace the video.js native mobile
+     controls */
+  .vjs-using-native-controls .vjs-control-bar {
+      display: flex !important;
+  }
   </style>
 </head>
 <body>

diff --git a/src/js/videojs.record.js b/src/js/videojs.record.js
@@ -482,6 +482,17 @@
                     // XXX: below are customizations copied from videojs.wavesurfer that
                     //      tweak the video.js UI...
                     this.player().bigPlayButton.hide();
+
+                    // the native controls don't work for this UI so disable
+                    // them no matter what
+                    if (this.player().usingNativeControls_ === true)
+                    {
+                        if (this.player().tech_.el_ !== undefined)
+                        {
+                            this.player().tech_.el_.controls = false;
+                        }
+                    }
+
                     if (this.player().options_.controls)
                     {
                         // progress control isn't used by this plugin