Skip to content

Shaka UI not work in Safari #8733

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
vanminhquangtri opened this issue Jun 11, 2025 · 10 comments
Open

Shaka UI not work in Safari #8733

vanminhquangtri opened this issue Jun 11, 2025 · 10 comments
Labels
component: UI The issue involves the Shaka Player UI status: waiting on response Waiting on a response from the reporter(s) of the issue type: bug Something isn't working correctly
Milestone

Comments

@vanminhquangtri
Copy link

Have you read the FAQ and checked for duplicate open issues?
Yes

If the problem is related to FairPlay, have you read the tutorial?

Yes, this is about Fairplay

What version of Shaka Player are you using?

Shaka player UI 4.12.6
https://cdnjs.cloudflare.com/ajax/libs/shaka-player/4.12.6/shaka-player.ui.min.js

Can you reproduce the issue with our latest release version?
Yes. I have upload code to sanbox here:
https://codesandbox.io/p/github/vanminhquangtri/shaka-safari-public/master?workspaceId=ws_RCUrfGuVdd4UaWbwyWe3p6

Can you reproduce the issue with the latest code from main?
Yes. I have upload code to sanbox here:
https://codesandbox.io/p/github/vanminhquangtri/shaka-safari-public/master?workspaceId=ws_RCUrfGuVdd4UaWbwyWe3p6

Are you using the demo app or your own custom app?
Custom app

If custom app, can you reproduce the issue using our demo app?
Yes. I have upload code to sanbox here:
https://codesandbox.io/p/github/vanminhquangtri/shaka-safari-public/master?workspaceId=ws_RCUrfGuVdd4UaWbwyWe3p6

What browser and OS are you using?
Safari 17.6, macOS Monterey 12.7.6

For embedded devices (smart TVs, etc.), what model and firmware version are you using?

What are the manifest and license server URIs?

What configuration are you using? What is the output of player.getNonDefaultConfiguration()?

Image

What did you do?

When init ui overlay, player not start running.

What did you expect to happen?
Player run okay when init UI

What actually happened?

Everything okay. But if init UI player not start running.
although it did the call request to certificate and this requests is success.
Without init UI, player run oki. But I need to init UI to use shaka UI.

Image

Are you planning to send a PR to fix it?
Yes If I can

@vanminhquangtri vanminhquangtri added the type: bug Something isn't working correctly label Jun 11, 2025
@shaka-bot shaka-bot added this to the v4.16 milestone Jun 11, 2025
@avelad
Copy link
Member

avelad commented Jun 11, 2025

Image

Can you fix it? Thanks!

@avelad avelad added status: waiting on response Waiting on a response from the reporter(s) of the issue component: UI The issue involves the Shaka Player UI labels Jun 11, 2025
@vanminhquangtri
Copy link
Author

@avelad sorry can you please give me your email account of github

@vanminhquangtri
Copy link
Author

@avelad if not possible please check if you can access this link sandbox: https://codesandbox.io/p/github/vanminhquangtri/shaka-safari-public/master

@avelad
Copy link
Member

avelad commented Jun 11, 2025

@avelad if not possible please check if you can access this link sandbox: https://codesandbox.io/p/github/vanminhquangtri/shaka-safari-public/master

Yes, it works!

@shaka-bot shaka-bot removed the status: waiting on response Waiting on a response from the reporter(s) of the issue label Jun 11, 2025
@vanminhquangtri
Copy link
Author

Hello @avelad can you please let me know if you need any other info to help you debug?

@avelad
Copy link
Member

avelad commented Jun 12, 2025

I have created a basic example that works:

<html>
<head>
  <script src="https://shaka-project.github.io/shaka-player/dist/shaka-player.ui.js"></script>
  <link rel="stylesheet" href="https://shaka-project.github.io/shaka-player/dist/controls.css">
  <style>
    body, html {width: 100%; height: 100%; margin: 0; background: #000;}
    video {width: 100%; height: 100%; display: block; user-select: none;}
  </style>
</head>
<body>
  <div id="video-container" style="width:100%; height:100%;">
    <video id="video" autoplay></video>
  </div>
  <script>
    async function initPlayer() {
      // Install built-in polyfills to patch browser incompatibilities.
      shaka.polyfill.installAll();

      // Check to see if the browser supports the basic APIs Shaka needs.
      if (!shaka.Player.isBrowserSupported()) {
        // This browser does not have the minimum set of APIs we need.
        console.error('Browser not supported!');
        return;
      }
      const videoContainer = document.getElementById('video-container');
      const video = document.getElementById('video');
      const localPlayer = new shaka.Player();
      localPlayer.attach(video);
      const ui = new shaka.ui.Overlay(localPlayer, videoContainer, video);
      const controls = ui.getControls();
      const player = controls.getPlayer();
      await player.load('https://storage.googleapis.com/shaka-demo-assets/sintel/dash.mpd');
    }

    document.addEventListener('DOMContentLoaded', initPlayer)
  </script>
</body>
</html>

@vanminhquangtri
Copy link
Author

vanminhquangtri commented Jun 12, 2025

I have created a basic example that works:

<script src="https://shaka-project.github.io/shaka-player/dist/shaka-player.ui.js"></script> <style> body, html {width: 100%; height: 100%; margin: 0; background: #000;} video {width: 100%; height: 100%; display: block; user-select: none;} </style>
<script> async function initPlayer() { // Install built-in polyfills to patch browser incompatibilities. shaka.polyfill.installAll();
  // Check to see if the browser supports the basic APIs Shaka needs.
  if (!shaka.Player.isBrowserSupported()) {
    // This browser does not have the minimum set of APIs we need.
    console.error('Browser not supported!');
    return;
  }
  const videoContainer = document.getElementById('video-container');
  const video = document.getElementById('video');
  const localPlayer = new shaka.Player();
  localPlayer.attach(video);
  const ui = new shaka.ui.Overlay(localPlayer, videoContainer, video);
  const controls = ui.getControls();
  const player = controls.getPlayer();
  await player.load('https://storage.googleapis.com/shaka-demo-assets/sintel/dash.mpd');
}

document.addEventListener('DOMContentLoaded', initPlayer)
</script>

hi @avelad yes it work on Edge and Chrome. But not Safari. My issue happen on Safari. Thank you.

@avelad
Copy link
Member

avelad commented Jun 12, 2025

For me, it works!

Image

@vanminhquangtri
Copy link
Author

Okay, let me re-check with your code then I will feedback. Thank you.

@tykus160
Copy link
Member

FYI @avelad demo also works ok for me in Safari.

@avelad avelad added the status: waiting on response Waiting on a response from the reporter(s) of the issue label Jun 12, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: UI The issue involves the Shaka Player UI status: waiting on response Waiting on a response from the reporter(s) of the issue type: bug Something isn't working correctly
Projects
None yet
Development

No branches or pull requests

4 participants