如何在 videojs 上添加质量选择器选项

Question

以下是我的代码：我需要在使用 videojs 的网页中添加质量选择器。我不确定如何使用这些插件，React 中没有任何插件示例。我插入插件的方式不起作用。请帮忙

视频

<script src="https://vjs.zencdn.net/7.6.6/video.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
    <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
    <script src="https://cdn.streamroot.io/videojs-hlsjs-plugin/1/stable/videojs-hlsjs-plugin.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-overlay/1.1.4/videojs-overlay.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
    <script src="../dist/silvermine-videojs-chromecast.min.js<?php echo "?".$version; ?>"></script>


                <div class="col-sm-6">
                    <div class="video-player1">
                        <video autoplay id="example-video" class="video-js vjs-theme-fantasy custom-videojs" controls>
                        </video>
                        <script>
                            var options = {
                                html5: {
                                    hlsjsConfig: {
                                        // Put your hls.js config here
                                    }
                                },
                                controls: true,
                                techOrder: [ 'chromecast', 'html5' ], // You may have more Tech, such as Flash or HLS
                                plugins: {
                                    chromecast: {}
                                }
                            };

                            // setup beforeinitialize hook
                            videojs.Html5Hlsjs.addHook('beforeinitialize', (videojsPlayer, hlsjsInstance) => {
                                // here you can interact with hls.js instance and/or video.js playback is initialized
                            });

                            var player = videojs('example-video', options, function() {});

                            var overlay_content = '<div class="overlay_title"><div class="wrapper"><img src="images/nologo.jpg" align="middle" class="logoVideo" id="logovideo"> <div style="padding-left:10px"><h2 id="channeltitle" style="font-size: 22px;" ></h2><h4 id="descrtitle" style="font-size: 17px;"></h4></div></div><div id="progressp" class="progress-bar"><div id="progress_channel" class="progress"></div></div>';
                            player.overlay({
                                overlays: [{
                                    start: 'useractive',
                                    content: overlay_content,
                                    end: 'userinactive',
                                    align: 'bottom'
                                }]
                            });
                            function play(url) {
                                player.pause();
                                player.src({
                                    src: url,
                                    type: 'application/x-mpegURL'
                                });
                                player.load();
                                player.play();
                                // here you can interact with hls.js instance and/or video.js playback is initialized
                            }
                        </script>

Answer 1

您可以尝试添加此插件：https ://github.com/silvermine/videojs-quality-selector

您应该在顶部添加这些导入：

<link href="https://unpkg.com/@silvermine/videojs-quality-selector/dist/css/quality-selector.css" rel="stylesheet">
<script src="./path/to/video.min.js"></script>
<script src="https://unpkg.com/@silvermine/videojs-quality-selector/dist/js/silvermine-videojs-quality-selector.min.js"></script>

然后你必须以这种方式将控件添加到播放器栏：

player.controlBar.addChild('QualitySelector');