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

问题描述

我一直在尝试在我的网络应用程序中嵌入视频播放器。我正在为此使用 video.js 库。我还想要一个播放列表，就像他们在 YT 或 UDEMY 或任何其他网络应用程序中一样。因此，无论我在哪里尝试阅读有关如何实现它的信息，我都会受到阻碍，因为他们拥有解释如何在 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 的这个博客来做到这一点。帮帮我吧。

因此，首先，如果你们中的任何人有任何可以分享的回购链接或教程链接，将不胜感激！但是，如果您也可以提供其他帮助，它也将解决我的问题。

如果您有任何其他库允许我添加播放器的一些控件（前进、后退、上一个、下一个、字幕、质量选择器、播放速度等），我也愿意提出建议，并且我可以在其中添加播放列表也。

谢谢！！

标签： javascriptreactjsvideo.js

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

问题描述

应用程序.js

视频.js

结果：

我面临的问题：

解决方案

推荐阅读