javascript - 当 Div 可见时 Brightcove 开始播放

Question

我有一个页面最终将包含多个视频。单击占位符图像时，占位符将隐藏，视频将显示并开始播放。

除了演奏部分之外，我可以让一切正常工作。一旦视频可见，我必须手动单击播放按钮，这不是我想要的。

我不断收到有关玩家为空或未定义的错误。我已经尝试过此处和 Brightcove 开发人员引用中找到的示例，但无济于事:

以下是我的代码(出于安全目的，ID 替换为 00000000s):

<div class="video-container">
    <a href="#" class="video-placeholder" data-brightcove-id="00000000"><img src="/media/video-placeholders/myplaceholder.png' class='video-placeholder-photo"><span class="video-placeholder-icon"><i class="material-icons">&#xE038;</i></span></a>
    <div class="video-player" style="display: block;">
            <div id="player" style="display:none">
            </div>
            <script language="JavaScript" type="text/javascript" src="https://sadmin.brightcove.com/js/BrightcoveExperiences.js"></script>
            <object id="player-object" class="BrightcoveExperience">
                <param name="width" value="100%" />
                <param name="height" value="100%" />
                <param name="bgcolor" value="#FFFFFF" />
                <param name="playerID" value="00000000" />
                <param name="playerKey" value="00000000" />
                <param name="isVid" value="true" />
                <param name="isUI" value="true" />
                <param name="dynamicStreaming" value="true" />
                <param name="includeAPI" value="true" />
                <param name="templateLoadHandler" value="onTemplateLoaded" />
                <param name="templateReadyHandler" value="onTemplateReady" />
                <param name="@videoPlayer" value="00000000" id="video-player-param" />
                <param name="autoStart" value="false" />
                <param name="secureConnections" value="true" />
                <param name="secureHTMLConnections" value="true" />
            </object>
    </div>
</div>
<script type="text/javascript" src="https://sadmin.brightcove.com/js/BrightcoveExperiences.js"></script>
<script type="text/javascript">
    var player, modVP;

    var onTemplateLoad = function (experienceID) {
    // get references to the player and API Modules and Events
        console.log('onTemplateLoad has loaded');
        player = brightcove.api.getExperience(experienceID);
            modVP = player.getModule(brightcove.api.modules.APIModules.VIDEO_PLAYER);
    };

        // template ready event handler
        var onTemplateReady = function (evt) {
            console.log('onTemplateReady is ready');
            modVP.addEventListener(brightcove.api.events.MediaEvent.PLAY, onMediaEventFired);
        };

    $('document').ready(function() {
        $('.video-placeholder').click(function(e) {
            e.stopImmediatePropagation();
            //$('.video-placeholder').show();
            //$('.video-player').hide();
            //$(this).parent().children('.video-placeholder').hide();
            //$(this).parent().children('.video-player').show();
            modVP.play();
            return false;
        })
        });
</script>

Answer 1

尝试在点击处理程序中使用 console.log(modVP) 以确保它包含您期望的对象。听起来 modVP 不是一个具有与其关联的“播放”功能的玩家对象。

也请查看 videojs()。这听起来对你来说是一个更好的用例。 http://docs.brightcove.com/en/perform/brightcove-player/samples/load-player-dynamically.html播放器api和videojs()使用可以参见 http://docs.brightcove.com/en/perform/brightcove-player/reference/api/player.html

此外，更新您的问题以包含您遇到的 JavaScript 错误也会有所帮助。