fix: chapters in Safari

* fix: control-bar styles in Safari * fix: chapters from object in Safari
cloudinary · Feb 12, 2024 · 54b2cd2 · 54b2cd2
1 parent 0d319c8
commit 54b2cd2
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/src/assets/styles/main.scss b/src/assets/styles/main.scss
@@ -242,8 +242,9 @@ $icon-font-path: '../icon-font' !default;
   }
 
   .vjs-control-bar {
-    z-index: 2;
+    -webkit-backdrop-filter: blur(10px);
     backdrop-filter: blur(10px);
+    z-index: 2;
     font-size: 120%;
     // responsive controls sizes, based on container width
     // font-size: clamp(100%, 2cqw, 150%);
@@ -256,6 +257,7 @@ $icon-font-path: '../icon-font' !default;
     }
 
     .vjs-progress-control {
+      -webkit-backdrop-filter: blur(10px);
       backdrop-filter: blur(10px);
       position: absolute;
       left: 0px;

diff --git a/src/plugins/chapters/chapters.js b/src/plugins/chapters/chapters.js
@@ -77,7 +77,7 @@ const ChaptersPlugin = (function () {
   /**
    * Bootstrap the plugin.
    */
-  ChaptersPlugin.prototype.initializeChapters = function initializeChapters() {
+  ChaptersPlugin.prototype.initializeChapters = async function initializeChapters() {
     const chaptersUrl = this.options === true ? this.getChaptersFileUrlByName() : this.options.url;
 
     if (chaptersUrl) {
@@ -100,6 +100,10 @@ const ChaptersPlugin = (function () {
         default: true
       });
 
+      // required for Safari to display the captions
+      // https://github.com/videojs/video.js/issues/8519
+      await new Promise(resolve => setTimeout(resolve, 100));
+
       const end = this.player.duration();
       Object.entries(this.options).forEach((entry, index, arr) => {
         const cue = new VTTCue(