Videojs not working with dynamic URL but working with static URL

Question

I am tryign to implement videojs in my reactjs project. I am providing "src" to video component as props. The plauer "No compatible source was found for this media.". Below is my code

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>

But the same code works when I give a static video url as src. Also

this.props.assetVersion.video.file

is a valid video url. This url works on normal html5 video component. What am I doing wrong?

p.s. There is another videojs player instance used in some other page of the application. But that has different id. So I don't think that is affecting it.

I have implemented videojs multiple times but this is the first time I am coming accros this issue. Thanks in advance.

Check if you have read rights on the folder that you are using for static video url? — smishra, Jan 08 '20 at 18:48
Yes I have the rights. When I use simple html5 video element, everything works. — EdG, Jan 08 '20 at 19:07

score 1 · Answer 1 · answered Jan 08 '20 at 18:53

I think the issue is in the fact that the video source might be undefined as you are using a conditional <source src={this.props.assetVersion && this.props.assetVersion.video.file} type="video/mp4"/>

Perhaps try to only render the video element when ever the video src is not undefined. It would look something like this.

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>

Videojs not working with dynamic URL but working with static URL

1 Answers1