React 使用Ocx播放视频问题

本文将分享一个开发中遇到的问题，最近在项目中使用 Ocx 播放视频，但是调用 Ocx 接口成功了，但是界面没有图像。项目采用 React + UmiJS来实现。

具体原因不是很清楚，根据猜测可能跟 React 的生命周期、虚拟DOM有关系吧！！！

问题代码（Player.js）：

import React, { Component } from 'react';

class Player extends Component {
    notInstall() {
        console.log("没有安装ocx插件");
    }
    
    componentDidMount() {
        // 在这里开始去调用方法播放视频，但是出问题了
    }
    
    render() {
        return (
            <div>
                {/* 播放窗口 */}
                <object id="playBackPanel" objIndex="1" width="800px" height="500px"
                            classid="CLSID:039A2134-AE3A-48FF-A4AC-C23C789983EE"
                            onerror={this.notInstall}></object>
            </div>
        );
    }
}

export default Player;

react广告位

修复后的代码（Player.js）：

export default function() {
    setTimeout(function(){
        // 这里面去调用方法播放视频，OK
    }, 1000);
    
    return (
        <div>
            {/* 播放窗口 */}
            <object id="playBackPanel_1" objIndex="1" width="1000px" height="500px"
                        classid="CLSID:039A2134-AE3A-48FF-A4AC-C23C789983EE"
                        onerror="notInstall()"></object>
        </div>
    );
}

虽然能够播放视频了，但是不知道这是为什么？？？

该文章仅仅是将过程记录，希望对你有参考价值。