Plyr not working on Tizen 3.0

[guiloviu]

Hello.

I am using this great video player for a webapp intended for Smart TV and it is working quite well on virtually all TVs.

However, on Samsung TVs with Tizen 3.0 (2017 models), it does not load the Plyr player and the video plays with Samsung's native player, creating the problem of not working certain actions intended to work with Plyr (play, pause, fast forward, rewind or perform an action after finishing the video).

Any solution to force the Plyr player on this system?

Thanks.

[MahdiAhazan]

Hi

Try this code:

Head:

      <link rel="stylesheet" href="https://cdn.plyr.io/3.5.10/plyr.css" />
      <script src="https://cdn.plyr.io/3.5.10/plyr.js"></script>
      <script src="https://cdn.jsdelivr.net/hls.js/latest/hls.js"></script>

Body:

        <video controls crossorigin playsinline >
          <source 
            type="application/x-mpegURL" 
            src="<?php echo $signedurlwithvalidinterval ?>"
          >
        </video>

        <script>
        // src="https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8" Default URL For more qualities
        document.addEventListener("DOMContentLoaded", () => {
          const video = document.querySelector("video");
          const source = video.getElementsByTagName("source")[0].src;

          // For more options see: https://github.com/sampotts/plyr/#options
          // captions.update is required for captions to work with hls.js
          const defaultOptions = {};

          if (Hls.isSupported()) {
            // For more Hls.js options, see https://github.com/dailymotion/hls.js
            const hls = new Hls();
            hls.loadSource(source);

            // From the m3u8 playlist, hls parses the manifest and returns
            // all available video qualities. This is important, in this approach,
            // we will have one source on the Plyr player.
            hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {

              // Transform available levels into an array of integers (height values).
              const availableQualities = hls.levels.map((l) => l.height)

              // Add new qualities to option
              defaultOptions.quality = {
                default: availableQualities[0],
                options: availableQualities,
                // this ensures Plyr to use Hls to update quality level
                forced: true,        
                onChange: (e) => updateQuality(e),
              }

              // Initialize here
              const player = new Plyr(video, defaultOptions);
            });
            hls.attachMedia(video);
            window.hls = hls;
          } else {
            // default options with no quality update in case Hls is not supported
            const player = new Plyr(video, defaultOptions);
          }

          function updateQuality(newQuality) {
            window.hls.levels.forEach((level, levelIndex) => {
              if (level.height === newQuality) {
                console.log("Found quality match with " + newQuality);
                window.hls.currentLevel = levelIndex;
              }
            });
          }
        });
        </script>

[ghost]

I have the same problem. I saw two other issues like mine, but none of them had an answer. I think if I open a third issue, it will be another one with no answer. pd: translated by Deepl