如何为新视频刷新 video.js 播放器答案

【问题标题】：How to refresh video.js player for new video如何为新视频刷新 video.js 播放器
【发布时间】：2020-11-25 14:14:03
【问题描述】：

我正在使用 video.js 作为视频播放器，但我遇到了问题。问题是当我尝试播放任何其他视频时，播放器不会刷新并且总是播放旧视频。

import React, { Component } from 'react';
import videojs from 'video.js';
import { sendData } from '../../analytics/sendData';

 class Video360Player extends Component {
    componentDidMount() {
        // instantiate Video.js
        const videoJsOptions = {
            autoplay: true,
            controls: true,
            sources: [{
              src: this.props.videoUrl,
              type: 'video/mp4'
            }]
          }
        this.player = videojs(this.videoNode, videoJsOptions,this.props, function onPlayerReady() {
          console.log('onPlayerReady', this)
        });
      }
    
      // destroy player on unmount
      componentWillUnmount() {
        if (this.player) {
          this.player.dispose()
        }
      }
    
      // wrap the player in a div with a `data-vjs-player` attribute
      // so videojs won't create additional wrapper in the DOM
      // see https://github.com/videojs/video.js/pull/3856
      render() {
        return (
          <div> 
            <div data-vjs-player>
              <video ref={ node => this.videoNode = node } className="video-js"></video>
            </div>
          </div>
        )
      }}
export default Video360Player

【问题讨论】：

代码中的其他视频网址在哪里？
动态传递
从这里 src: this.props.videoUrl,
你如何尝试播放其他视频？
我在视频播放器下方有一些缩略图，当我点击该缩略图时，它应该会在视频播放器中更新

标签： javascript reactjs video.js

【解决方案1】：

这是因为你的Video360Player 有player 而你通过了videoJsOptions 到componentDidUpdate 中的player，它在安装组件时只调用一次。所以要解决这个问题，你应该添加componentWillReceiveProps：

componentWillReceiveProps(nextProps) {
  if (nextProps.videoUrl !== this.props.videoUrl) {
    this.player.dispose();
    const videoJsOptions = {
      autoplay: true,
      controls: true,
      sources: [
        {
          src: this.props.videoUrl,
          type: "video/mp4",
        },
      ],
    };
    this.player = videojs(
      this.videoNode,
      videoJsOptions,
      this.props,
      function onPlayerReady() {
        console.log("onPlayerReady", this);
      }
    );
  }
}

【讨论】：