41633: VIdeo Player not working

components/ILIAS/UI/src/Implementation/Component/Player/Renderer.php

@@ -74,12 +74,62 @@ public function renderAudio(Component\Component $component, RendererInterface $d
     public function renderVideo(
         Component\Component $component,
         RendererInterface $default_renderer
+    ): string
+    {
+        if ($this->isVimeo($component)) {
+            return $this->renderVimeo(
+                $component,
+                $default_renderer
+            );
+        } elseif ($this->isYoutube($component)) {
+            return $this->renderYoutube(
+                $component,
+                $default_renderer
+            );
+        }
+        return $this->renderNative(
+            $component,
+            $default_renderer
+        );
+    }
+
+    public function renderVimeo(
+        Component\Component $component,
+        RendererInterface $default_renderer
+    ): string {
+
+        $tpl = $this->getTemplate("tpl.video_vimeo.html", true, true);
+
+        $id = $this->bindJavaScript($component);
+
+        $tpl->setVariable("ID", $id);
+        $tpl->setVariable("SOURCE", $component->getSource());
+
+        return $tpl->get();
+    }
+
+    public function renderYoutube(
+        Component\Component $component,
+        RendererInterface $default_renderer
     ): string {
+
+        $tpl = $this->getTemplate("tpl.video_youtube.html", true, true);
+
+        $id = $this->bindJavaScript($component);
+
+        $tpl->setVariable("ID", $id);
+        $tpl->setVariable("SOURCE", $component->getSource());
+
+        return $tpl->get();
+    }
+
+    public function renderNative(
+            Component\Component $component,
+            RendererInterface $default_renderer
+        ): string {
+
         $tpl = $this->getTemplate("tpl.video.html", true, true);
 
-        $component = $component->withAdditionalOnLoadCode(function ($id) {
-            return "$('#$id').mediaelementplayer();";
-        });
         $id = $this->bindJavaScript($component);
 
         foreach ($component->getSubtitleFiles() as $lang_key => $file) {
@@ -101,11 +151,31 @@ public function renderVideo(
         return $tpl->get();
     }
 
+    protected function isVimeo(
+        Component\Component $component
+    ) : bool
+    {
+        if (is_int(strpos($component->getSource(), 'vimeo.com'))) {
+            return true;
+        }
+        return false;
+    }
+
+    protected function isYoutube(
+        Component\Component $component
+    ) : bool
+    {
+        if (is_int(strpos($component->getSource(), 'youtube.com'))) {
+            return true;
+        }
+        return false;
+    }
+
     public function registerResources(\ILIAS\UI\Implementation\Render\ResourceRegistry $registry): void
     {
         parent::registerResources($registry);
-        $registry->register('./assets/js/mediaelement-and-player.min.js');
-        $registry->register('./assets/css/mediaelementplayer.min.css');
-        $registry->register('./assets/js/vimeo.min.js');
+        $registry->register('https://player.vimeo.com/api/player.js');
     }
+
+
 }

components/ILIAS/UI/src/examples/Player/Video/video_vimeo.php

@@ -27,7 +27,7 @@ function video_vimeo(): string
     $renderer = $DIC->ui()->renderer();
     $f = $DIC->ui()->factory();
 
-    $video = $f->player()->video("https://vimeo.com/669475821?controls=0");
+    $video = $f->player()->video("https://player.vimeo.com/video/669475821");
 
     return $renderer->render($video);
 }

components/ILIAS/UI/src/examples/Player/Video/video_youtube.php

@@ -28,7 +28,7 @@ function video_youtube(): string
     $renderer = $DIC->ui()->renderer();
     $f = $DIC->ui()->factory();
 
-    $video = $f->player()->video("https://www.youtube.com/watch?v=YSN2osYbshQ");
+    $video = $f->player()->video("https://www.youtube.com/embed/YSN2osYbshQ");
 
     return $renderer->render($video);
 }

components/ILIAS/UI/src/templates/default/Player/tpl.audio.html

@@ -1,5 +1,5 @@
 <div class="il-audio-container">
-    <audio class="il-audio-player" id="{ID}" src="{SOURCE}" preload="metadata"></audio>
+    <audio controls style="width:100%; height: 30px; background-color: transparent;" class="il-audio-player" id="{ID}" src="{SOURCE}" preload="metadata"></audio>
     <!-- BEGIN transcription -->
     {BUTTON_AND_MODAL}
     <!-- END transcription -->

components/ILIAS/UI/src/templates/default/Player/tpl.video.html

@@ -1,5 +1,5 @@
 <div class="il-video-container">
-    <video class="il-video-player" id="{ID}" src="{SOURCE}" style="max-width: 100%;" preload="metadata" <!-- BEGIN poster -->poster="{POSTER_SOURCE}"<!-- END poster -->>
+    <video controls class="il-video-player" id="{ID}" src="{SOURCE}" preload="metadata" <!-- BEGIN poster -->poster="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="background-image:url('{POSTER_SOURCE}')"<!-- END poster -->>
         <!-- BEGIN track --><track kind="subtitles" src="{TRACK_SOURCE}" srclang="{TRACK_LANG}" /><!-- END track -->
     </video>
 </div>

components/ILIAS/UI/src/templates/default/Player/tpl.video_vimeo.html

@@ -0,0 +1,3 @@
+<div class="il-video-container">
+    <iframe src="{SOURCE}" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
+</div>

components/ILIAS/UI/src/templates/default/Player/tpl.video_youtube.html

@@ -0,0 +1,3 @@
+<div class="il-video-container">
+    <iframe src="{SOURCE}" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+</div>

templates/default/070-components/UI-framework/Player/_ui-component_player.scss

@@ -12,3 +12,16 @@ $il-player-audio-width: 100%;
 .il-audio-player {
   background: $il-neutral-color;
 }
+.il-video-container {
+  video {
+    background-position: center;
+    background-size: contain;
+    background-repeat: no-repeat;
+    width:100%;
+  }
+  iframe {
+    width:100%;
+    aspect-ratio: 16/9;
+    border:0;
+  }
+}