0

For a couple of hours I've been trying to get video.js to display the quality option just like YouTube for adaptive bitrate streaming, yet every option I've tried has resulted in error.

I'm using Video.js version 8:

<?php
class VideoPlayer {

    private $video;

    public function __construct($video) {
        $this->video = $video;
    }

    public function create($autoPlay) {
        $autoPlayAttr = $autoPlay ? "autoplay" : "";
    
        $filePath = $this->video->getFilePath();

        $dataSetupOptions = json_encode(['autoplay' => $autoPlay]);
    
        echo <<<HTML
        <link href="node_modules/video.js/dist/video-js.min.css" rel="stylesheet">
        <script src="node_modules/video.js/dist/video.min.js"></script>
        <script src="node_modules/@videojs/http-streaming/dist/videojs-http-streaming.js"></script>
        <script src="videojs-hls-quality-selector/dist/videojs-hls-quality-selector.min.js"></script>
        
        <style>
            .video-js {
                max-width: 940px;
                width: 940px;
                padding-top: 56.25%;
                height: 0;
                font-size: 13px;
            }
        </style>
    
        <video id="my-video" class="video-js" $autoPlayAttr controls preload="auto" data-setup='$dataSetupOptions'>
            <source src="$filePath" type="application/x-mpegURL">
        </video>

        <script>
            document.addEventListener('DOMContentLoaded', function() {
                var player = videojs('my-video');
                player.hlsQualitySelector();
            });
        </script>
    HTML;
    }
    

}
?>
hakre
  • 193,403
  • 52
  • 435
  • 836
William Lee
  • 1
  • I'd be more strict on the data-setup attribute value enclosing it in double quotes and wrapping the json_encode() in htmlspecialchars(), but this just FYI as I do not think this is directly related to your question. is this error free from the javascript and network console in regard to the many files you load? (I mean in the browser.) – hakre Jul 29 '23 at 21:28
  • Yes in fact the video plays just fine, I tried adding the plug-in and it would give me errors like "hls-quality-selector does not exist" or "____ isn't a function" but I worked through them, now the only issue is that the button just won't show and it actually doesn't show in the HTML code either so I know it isn't a CSS issue – William Lee Jul 29 '23 at 21:50
  • 1
    Could it be it needs multiple srcs for the different qualities? – hakre Jul 29 '23 at 21:53
  • Lol I haven't thought about that, that could be the case. I'm just not sure because the way how i set it up is there is one .m3u8 playlist master file that links to multiple versions and resolutions/bitrates for the videos, I don't know how I would set it up then – William Lee Jul 29 '23 at 22:08

0 Answers0