如何在 react-JS 中的 video.js 中添加播放列表？

Question

我一直在嘗試在我的 web 應用程序中嵌入視頻播放器。 我正在為此使用 video.js 庫。 我還想要一個播放列表，就像他們在 YT 或 UDEMY 或任何其他 web 應用程序中的播放列表一樣。 因此，無論我在哪里嘗試閱讀有關如何實現它的信息，我都會受到阻礙，因為他們擁有解釋如何在 HTML 中實現它的文檔。！ 我可能會不必要地感到困惑，但我需要一些幫助。

我的代碼如下：

應用程序.js

import './App.css';
import VideoPlayer from './videojs';

function App() {
  return (
    <div className="App">
      <VideoPlayer />
    </div>
  );
}

export default App;

視頻.js

import React from 'react';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import VideoPlaylistPlugin from 'videojs-playlist';
import 'videojs-contrib-quality-levels';
import 'videojs-extra-buttons';
import "videojs-extra-buttons/dist/videojs-extra-buttons.css";
import "videojs-playlist-ui";
import "videojs-playlist-ui/dist/videojs-playlist-ui.vertical.css"
videojs.registerPlugin('playlist', VideoPlaylistPlugin);

export default class VideoPlayer extends React.Component {
    componentDidMount() {
        this.player = videojs('preview-player');

        this.player.extraButtons({
            quickBackward: { seconds: 3 },
            quickForward: { seconds: 3 },
            qualitySelect: [
                { bandwidth: 524288, name: "Low" },
                { bandwidth: 1048576, name: "Mid" },
                { bandwidth: 2097152, name: "Hight" },
                { bandwidth: 4194304, name: "Hight+" }
            ]
        })

        var videoList = [{
            sources: [{
                src: 'http://media.w3.org/2010/05/sintel/trailer.mp4',
                type: 'video/mp4'
            }],
            poster: "http://media.w3.org/2010/05/sintel/poster.png"
        }, {
            sources: [{
                src: 'http://media.w3.org/2010/05/bunny/trailer.mp4',
                type: 'video/mp4'
            }],
            poster: 'http://media.w3.org/2010/05/bunny/poster.png'
        }];

        this.player.playlist(videoList)

        this.player.playlist.autoadvance(0);
    }

    componentWillUnmount() {
        if (this.player) {
            this.player.dispose();
        }
    }

    handleClick1() {
        console.log("Video 1");
    }
    handleClick2() {
        console.log("Video 2");
    }
    handleClick3() {
        console.log("Video 3");
    }

    render() {
        return (
            <div class="main-preview-player">
                <video id="preview-player" class="video-js vjs-fluid" controls preload="auto" crossorigin="anonymous">
                    <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/">supports HTML5 video</a></p>
                </video>

                //The div below is just the area in which i want to have playlist video's thumbnail
                //which on click will play the video connected to that thumbnail.
                <div class="playlist-container  preview-player-dimensions vjs-fluid">
                    <ol class="vjs-playlist">
                        <li>
                            <span onClick={this.handleClick1}>Video 1</span>
                        </li>
                        <li>
                            <span onClick={this.handleClick2}>Video 2</span>
                        </li>
                        <li>
                            <span onClick={this.handleClick3}>Video 3</span>
                        </li>
                    </ol>
                </div>
            </div>
        );
    }
}

結果：

我面臨的問題：

我無法理解如何使用videojs-playlist和videojs-playlist-ui庫來獲得我想要實現的目標。 我嘗試通過 videojs、videojs-playlist、videojs-playlist-ui 的鏈接和 videojs 的這個博客來做到這一點。 幫幫我吧。

因此，首先，如果你們中的任何人有任何可以分享的回購鏈接或教程鏈接，我們將不勝感激。 但是，如果您也可以提供其他幫助，它也將解決我的問題。

如果您有任何其他庫允許我添加播放器的一些控件（前進、后退、上一個、下一個、字幕、質量選擇器、播放速度等），我也願意提出建議，並且我可以在其中添加播放列表也。

謝謝！！

Answer 1

• 播放列表插件不需要注冊 - 只需import 'videojs-playlist';
• 應該初始化播放列表 UI 插件 - this.player.playlistUi();
• 播放列表元素應該是一個 div - <div class="vjs-playlist">
• 播放列表項應包含 playlistUi 以顯示圖像的thumbnail屬性。