reactjs - 使用videojs-watermark时TypeError : player. watermark is not a function

Question

我正在尝试使用 videojs-watermark npm 模块，但我得到的错误是:

TypeError: player.watermark is not a function.

代码如下:

import React, { Component } from "react";
import videojs from "video.js";
import "videojs-watermark";

class App extends Component {
  componentDidMount() {
    const player = videojs("my-player");
    player.watermark({
      file: "watermarks.png",
      xpos: 50,
      ypos: 50,
      xrepeat: 0,
      opacity: 0.5,
    });
  }

  render() {
    return (
      <div className="App">
        <video
          id="my-player"
          class="video-js"
          controls
          preload="auto"
          poster="//vjs.zencdn.net/v/oceans.png"
          data-setup="{}"
        >
          <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
            {" "}
            .
          </source>
          <source
            src="//vjs.zencdn.net/v/oceans.webm"
            type="video/webm"
          ></source>
          <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
            {" "}
            .
          </source>
          <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/" target="_blank">
              supports HTML5 video
            </a>
          </p>
        </video>
        <script></script>
      </div>
    );
  }
}

export default App;

我猜 videojs-watermark 没有被 React 识别。我什至尝试将代码放入数据设置中，但这也引发了 videojs-watermark 不存在的错误。

Answer 1

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

import watermark from 'videojs-watermark';
import 'videojs-watermark/dist/videojs-watermark.css';

class App extends Component {

componentDidMount(){
    videojs.registerPlugin('watermark', watermark);
    
    
    const player = videojs('my-player');
    player.watermark({
    file: 'watermarks.png',
    xpos: 50,
    ypos: 50,
    xrepeat: 0,
    opacity: 0.5,
    })
}

render() {
return (
  <div className="App">
    <video
    id="my-player"
    class="video-js"
    controls
    preload="auto"
    poster="//vjs.zencdn.net/v/oceans.png"
    data-setup='{}'>
    <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"> . 
    </source>
    <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"> 
    </source>
    <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"> . 
    </source>
  <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/" target="_blank">
      supports HTML5 video
    </a>
  </p>
</video>
<script>

</script>
  </div>
);
}
}

export default App;