Question

我正在尝试使用videojs-offset插件和ReactJS。

但是，它向我显示了以下错误 -

TypeError：this.player.offset不是函数

import React, { Component } from 'react';
import './App.css';
import PropTypes from 'prop-types';
import "video.js/dist/video-js.css";
import videojs from 'video.js'
import videoJsContribHls from 'videojs-contrib-hls'
import offset from 'videojs-offset';

export default class VideoPlayer extends React.Component {
    componentDidMount() {
        // instantiate Video.js
        this.player = videojs(this.videoNode, this.props, function onPlayerReady() {
            console.log('onPlayerReady', this);
            this.player.offset({
                start: 10,
                end: 300,
                restart_beginning: false //Should the video go to the beginning when it ends
          });
        });
        }

    // destroy player on unmount
    componentWillUnmount() {
        if (this.player) {
            this.player.dispose()
        }
    }
    render() {
        return (
            <div>
                <div data-vjs-player>
                    <video ref={ node => this.videoNode = node } className="video-js"></video>
                </div>
            </div>
        )
    }
}

将AnyY videojs插件与reactJS集成时，这是一个常见问题。

Answer 1

通过以下更改解决了此问题 -

首先，在VideoJS选项中，应该初始化插件，比如 sh

如果你的插件没有任何参数，你可以像plugins: offset: {start: 10, end: 300, restart_beginning: false} }

一样初始化它

然后，在componentDidMount（）方法中，注册这样的插件 -

plugin_name: {}

此解决方案适用于将任何videojs插件与react进行集成。

Answer 2

    import React, { useRef, useEffect } from 'react'
import videojs from 'video.js'
import "video.js/dist/video-js.css"

const App = () => {
  const videoNode = useRef(null)
  const player = useRef(null)

  var data = {
    src: 'https://streaming-armonia.insertmendoza.com.ar/live/armonia/index.m3u8',
    poster: 'https://cdn.pixabay.com/photo/2018/10/22/18/02/teacher-3765909_960_720.jpg',
    controls: true,
    autoplay: true
  }

  //<source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
  //<source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm">

  useEffect(() => {

    player.current = videojs(videoNode.current, {
      controls: data.controls,
      autoplay: data.autoplay,
      poster: data.poster,
      fill: true,
      fluid: true,
      preload: 'auto',
    })

    player.current.src({ type: "application/x-mpegURL", src: data.src })

    //player.current.hlsQualitySelector()

    return () => player.current.dispose()

  }, [data.src, data.controls, data.autoplay, data.poster])

  return (
    <div>
      <video ref={videoNode} className="video-js"></video>
    </div>
  )
}

export default App

如何在ReactJS中使用VideoJS插件？

2 个答案: