我正在尝试在我的reactjs项目中实现videojs。我向视频组件提供“src”作为 Prop 。普劳尔“没有找到该媒体的兼容来源。”。下面是我的代码
initVideoJS = () => {
let self = this;
let that = this;
const options = {
fluid: true,
preload: "auto",
autoplay: false,
controls: true,
aspectRatio: "16:9",
loop: false,
// playVideo: false
}
myPlayer = videojs('video-el-p', options)
}
render () {
return (
<section className="assets-container-right" id="assets-container-right">
<div className="assets-container-wrapper">
<section className="video-container" id="video-container" style={{height: `${this.state.video_container_height}px`}}>
<div className="video-player">
<video onContextMenu="return false;"
ref={node => this.video_el = node}
className="video-js video-el vjs-big-play-centered vjs-default-skin"
id="video-el-p" loop={false} controls>
<source src={this.props.assetVersion && this.props.assetVersion.video.file} type="video/mp4"/>
Your browser does not support HTML5 video.
</video>
</div>
</section>
但是当我提供静态视频 url 作为 src 时,相同的代码可以工作。还有
this.props.assetVersion.video.file
是有效的视频网址。该 url 适用于普通 html5 视频组件。我究竟做错了什么?
附:应用程序的其他页面中使用了另一个 videojs 播放器实例。但那有不同的id。所以我认为这不会影响它。
我已经多次实现 videojs,但这是我第一次遇到这个问题。提前致谢。
最佳答案
我认为问题在于,当您使用条件 <source src={this.props.assetVersion && this.props.assetVersion.video.file} type="video/mp4"/>
时,视频源可能未定义。
也许尝试仅在视频 src 未定义时渲染视频元素。它看起来像这样。
render() {
let video;
if (this.props.assetVersion) {
video = (
<video onContextMenu="return false;"
ref={node => this.video_el = node}
className="video-js video-el vjs-big-play-centered vjs-default-skin"
id="video-el-p" loop={false} controls>
<source src={this.props.assetVersion.video.file} type="video/mp4" />
Your browser does not support HTML5 video.
</video>
);
}
return (
<section className="assets-container-right" id="assets-container-right">
<div className="assets-container-wrapper">
<section className="video-container" id="video-container" style={{ height: `${this.state.video_container_height}px` }}>
<div className="video-player">
{video}
</div>
</section>
关于javascript - Videojs 不使用动态 URL,但使用静态 URL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59652080/