search

appsmithorg / appsmith

Platform to build admin panels, internal tools, and dashboards. Integrates with 25+ databases and any API.
https://www.appsmith.com
Apache License 2.0
34.66k stars 3.75k forks source link

[Bug]: Fullscreen control blocked with HLS and DASH streaming video files but not .mp4 #37594

Open toriancrane opened 1 day ago

toriancrane commented 1 day ago

Is there an existing issue for this?

Description

HLS and Dash video types are not supported in the video widget. As such, I tried to add the video using an iframe widget and custom widget.

With both widget types, if I use an .mp4 video, everything works fine. I can make the video fullscreen just fine.

However, when I try to use an .mpd or .m3u8 video, although the video plays and I can control the audio, the fullscreen functionality is blocked/grayed out.

In both instances, I have used the Video.js video player. I have also tried the Dash.js video player and the result is the same.

Steps To Reproduce

  1. Create an iframe or custom widget and add code to display an .mp4 video. Play the video and press the fullscreen button.
  2. Update the iframe or custom widget to display an HLS (.m3u8) or DASH (.mpd) video. Play the video and try to press the fullscreen button.

Public Sample App

https://app.appsmith.com/app/streamer/develop-673605b65a542b4e182b70fd

Environment

Production

Severity

Medium (Frustrating UX)

Issue video log

https://www.loom.com/share/a178e7f070c44c8c829c74f0a6560c6b?sid=333d8961-2100-4bb8-a18e-909c9b5d69cd

Version

Cloud

toriancrane commented 1 day ago

This is also now no longer working for me with MP4 files as well. The fullscreen button is blocked.

Here is the most recent code I tried in an iframe with an MP4 video:

<!DOCTYPE html>
<html>
  <head>
    <link href="https://vjs.zencdn.net/8.16.1/video-js.css" rel="stylesheet" />
  </head>
  <body>
    <video-js id="my-video" class="video-js" controls preload="auto" width="640" height="360" data-setup='{}'>
      <!-- Replace with your MP4 URL -->
      <source src="https://<url>/switzerland.mp4" type="video/mp4">
    </video-js>

    <script src="https://vjs.zencdn.net/8.16.1/video.min.js"></script>
  </body>
</html>