Question

我有brightcove对象，我将它附加在componentDiMount（）和componentDidUpdate（）函数内的dom中。

问题是，Brightcove对象在DOM中呈现但是播放器没有被加载。下面是我的代码。我使用下划线模板将对象渲染到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>
         ) 
    }

对象在DOM中呈现，但播放器未加载。

Answer 1

我已经解决了这个问题。我刚刚在componentDidUpdate()

中的代码下面进行了渲染

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

我们必须再次添加此脚本，因为我们的DOM使用新的brightcove对象进行更新，并且我还使用dangerouslySetInnerHTML渲染html，因此它将为新添加的元素创建反应ID。

我正在从componentDidMount（）和componentDidUpdate（）渲染brightcove播放器，DOM正在更新，但视频未初始化。反应+终极版

1 个答案: