Brightcove在Div可见时开始播放

Brightcove Begin Playing When Div Made Visible

本文关键字：开始 播放 Div Brightcove      更新时间：2023-09-26

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

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

我不断收到有关播放器为空或未定义的错误。我尝试了在这里和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>
尝试在

点击处理程序中控制台.log（modVP），以确保它包含您期望的对象。听起来modVP不是一个具有与之关联的"play"功能的播放器对象。

也看看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 错误会有所帮助。

您将要在播放器加载上运行的函数指定为onTemplateLoaded：

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

但是，您的函数称为onTemplateLoad：

var onTemplateLoad = function (experienceID) {...

modVP永远不会被定义。

相关文章：