I am rendring brightcove player from componentDidMount() and componentDidUpdate() , DOM is getting updated but video is not initialized . React+Redux

Question

I have brightcove object and i am appending it in the dom inside componentDiMount() and componentDidUpdate() function.

Issue is ,Brightcove object is getting rendered in the DOM but player is not loaded.below is my code. I am using underscore template to render object into the DOM.

    componentDidMount() {

       let script = document.createElement("script");
       script.type = "text/javascript"
       script.innerHTML = brightcove.createExperiences();
       document.body.appendChild(script);

      let brightCover = this.chooseCurrentVideoCreateUrl()
       if(!_.isUndefined(brightCover[0])) {
           var params = {
              brightCover: brightCover[0]
           }
        let videoPlayer = '<object id="<%="myExperience"+brightCover%>" className="BrightcoveExperience">'+
                          '<param name="bgcolor" value="#FFFFFF" />'+
                          '<param name="width" value="100%" />'+
                          '<param name="height" value="100%" />'+
                          '<param name="playerID" value="720309809001" />'+
                          '<param name="playerKey" value="AQ~,AAAAp4YWl7E,S6CN7FjhVAvtDOWxkCENYOdaZ_aPLFrM" />'+
                          '<param name="isVid" value="true" />'+
                          '<param name="dynamicStreaming" value="true" />'+
                          '<param name="isUI" value="true" />'+
                          '<param name="includeAPI" value="true" />'+
                          '<param name="@videoPlayer" value="<%=brightCover%>" />'+
                        '</object>';
        let videoTemplate = _.template(videoPlayer);

        $(".bigVideo").append(videoTemplate(params))

    }

    render() { 
         return (
            <div className="videosWrap">
                 <div className="bigVideo"></div>
            </div>
         ) 
    }

Object is getting rendered in DOM but player is not loaded.

score 1 · Answer 1 · edited Dec 08 '16 at 14:25

I have fixed this issue. I have just rendered below code in componentDidUpdate()

   let script = document.createElement("script");
   script.type = "text/javascript"
   script.innerHTML = brightcove.createExperiences();
   document.body.appendChild(script);

We have to add this script again because our DOM is updated with new brightcove object and I have also rendering html using dangerouslySetInnerHTML , so it will create react Id for newly added elements.

I am rendring brightcove player from componentDidMount() and componentDidUpdate() , DOM is getting updated but video is not initialized . React+Redux

1 Answers1