Question

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

我可以让一切正常，除了比赛部分。一旦视频可见，我必须手动点击播放按钮，这不是我想要的。

我不断收到有关播放器为null或未定义的错误。我已经尝试过这里和Brightcove开发人员参考中的示例，但无济于事：

以下是我的代码（出于安全目的，ID替换为00000000）：

<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错误。

Answer 2

您指定要在播放器加载时运行的功能为onTemplateLoaded：

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

但是，您的功能称为onTemplateLoad：

var onTemplateLoad = function (experienceID) {...

永远不会定义modVP。

Div可见时，Brightcove开始播放

2 个答案: