我正在尝试使用 videojs-watermark npm 模块,但我得到的错误是:
TypeError: player.watermark 不是函数。
代码如下:
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 没有被反应识别。我什至尝试将代码放入数据设置中,但这也会引发videojs-watermark 不存在的错误。