Brightcove 在 Div 可见时开始播放

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 不是具有关联 'play' 函数的播放器对象。

同时查看 videojs()。这听起来像是一个更好的用例。 http://docs.brightcove.com/en/perform/brightcove-player/samples/load-player-dynamically.html The player api and videojs() use can be found http://docs.brightcove.com/en/perform/brightcove-player/reference/api/player.html

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

Answer 2

您指定函数运行在播放器加载时为 onTemplateLoaded:

<param name="templateLoadHandler" value="onTemplateLoaded" />

但是你的函数被调用 onTemplateLoad:

var onTemplateLoad = function (experienceID) {...

Do modVP 永远不会被定义。

Brightcove 在 Div 可见时开始播放

Brightcove Begin Playing When Div Made Visible

javascript

jquery

brightcove