如何在React JS中基于video.js实现播放列表功能

修复方案 #

核心问题 #

当前代码已经正确引入了播放列表相关依赖，但是漏了初始化videojs-playlist-ui插件的步骤，也没有将播放列表UI挂载到指定容器中，同时存在React语法不规范的小问题。

修改步骤 #

1. 将JSX中所有的class属性替换为className，这是React指定的DOM类名写法
2. 完成playlist初始化后，添加playlistUi插件的初始化代码，指定播放列表的挂载容器
3. 删除手动编写的<ol class="vjs-playlist">相关代码，插件会自动生成带缩略图、点击切换功能的播放列表结构

修改后的完整video.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: "High" },
                { bandwidth: 4194304, name: "High+" }
            ]
        })

        const videoList = [{
            name: "视频1",
            sources: [{
                src: 'http://media.w3.org/2010/05/sintel/trailer.mp4',
                type: 'video/mp4'
            }],
            poster: "http://media.w3.org/2010/05/sintel/poster.png"
        }, {
            name: "视频2",
            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)
        // 新增：初始化播放列表UI，指定挂载容器
        this.player.playlistUi({
            container: document.querySelector('.playlist-container')
        })
        this.player.playlist.autoadvance(0);
    }

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

    render() {
        return (
            <div className="main-preview-player">
                <video id="preview-player" className="video-js vjs-fluid" controls preload="auto" crossorigin="anonymous">
                    <p className="vjs-no-js">若要观看此视频，请启用JavaScript，并考虑升级到支持HTML5视频的网页浏览器</p>
                </video>
                {/* 播放列表容器，插件会自动往里渲染内容 */}
                <div className="playlist-container preview-player-dimensions vjs-fluid"></div>
            </div>
        );
    }
}

补充说明 #

• 可以在视频列表的每个条目里添加name、description字段，插件会自动把这些信息展示在播放列表中
• 如果需要自定义播放列表的样式，直接覆盖vjs-playlist相关的CSS类即可
• 如果希望更灵活的控制播放列表逻辑，也可以选择自己实现播放列表：点击对应条目时调用this.player.playlist.currentItem(index)方法即可切换到指定下标的视频

替代播放器推荐 #

如果觉得video.js插件配置繁琐，可以选择react-player组件搭配自定义控制栏实现需求，所有交互逻辑都可以自己控制，天生适配React环境，也支持快进快退、倍速播放、字幕、画质选择等常见功能。

内容的提问来源于stack exchange，提问作者NinjaCoderDotCom