Videojs 不使用动态 URL，但使用静态 URL答案

【问题标题】：Videojs not working with dynamic URL but working with static URLVideojs 不使用动态 URL，但使用静态 URL
【发布时间】：2020-01-08 18:47:25
【问题描述】：

我正在尝试在我的 reactjs 项目中实现 videojs。我正在为视频组件提供“src”作为道具。 plauer“找不到此媒体的兼容来源。”。下面是我的代码

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

是有效的视频网址。此网址适用于普通的 html5 视频组件。我究竟做错了什么？

附言在应用程序的其他页面中使用了另一个 videojs 播放器实例。但这有不同的id。所以我认为这不会影响它。

我已经多次实现了 videojs，但这是我第一次遇到这个问题。提前致谢。

【问题讨论】：

检查您是否对用于静态视频网址的文件夹具有读取权限？
是的，我有权利。当我使用简单的 html5 视频元素时，一切正常。

标签： javascript reactjs video.js

【解决方案1】：

我认为问题在于视频源可能未定义，因为您使用的是条件<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>

【讨论】：