sitecore - jwPlayer 导致渲染无法在 Sitecore 的页面编辑器中加载

Question

我目前正在使用 Sitecore 7.2 (MVC) 进行渲染，该渲染将显示一个 jwPlayer 给定一个视频链接(在媒体库中或来自外部来源，如 YouTube)。当我通过内容编辑器中的演示详细信息添加渲染(使用有效数据源)时，一切看起来都很好，并且运行良好。不过，我现在遇到的问题是，当我尝试从页面编辑器(使用完全相同的渲染和数据源)执行相同的操作时，该占位符中根本没有显示任何内容。

渲染中处理视频的部分如下:

@if (Model.VideoLink != null && Model.Image != null)
{
    var vidid = Guid.NewGuid().ToString();
    <div class="article-video-module">
        <p class="video-placeholder-text">@Html.Raw(Model.Heading)</p>
        <div id="@vidid">Loading the player...</div>
        <script type="text/javascript">
            jwplayer("@vidid").setup({
                file: "@Model.VideoLink.Url",
                image: "@Model.Image.Src",
                width: "100%",
                aspectratio: "16:9",
                sharing: {
                    link: "@Model.VideoLink.Url"
                },
                primary: 'flash'
            });
            jwplayer('videodiv-@vidid').onPlay(function () {
                $(this.container).closest('.fullbleed-video-module').find('.video-placeholder-text').hide();
            });
            jwplayer('videodiv-@vidid').onPause(function () {
                $(this.container).closest('.fullbleed-video-module').find('.video-placeholder-text').show();
            });
        </script>
    </div>

    @Editable(a => Model.Description)
}

其他可能有帮助的事情:

• 当我注释掉 <script> 中的所有内容时渲染上方的标签完美显示。
• 在页面上找到了对 jwplayer.js 的引用(这是我的第一个想法)

Javascript 中的控制台错误:

• No suitable players found and fallback enabled在 jwplayer.js 上
• Uncaught TypeError: undefined is not a function在 jwplayer("@vidid").setup({和 jwplayer('videodiv-@vidid').onPlay(function () {从上面。

我怎样才能让 jwPlayer 和 Page Editor 相互配合？

Answer 1

问题是当您通过 Page Editor 添加组件时，脚本在 div <div id="@vidid"> 之前触发元素被添加到 DOM。不要问我为什么……

解决方案非常简单:用 if 包装你的 JavaScript 代码条件，检查 div 是否已经存在:

<script type="text/javascript">
    if (document.getElementById("@vidid")) {
        jwplayer("@vidid").setup({
            file: "@Model.VideoLink.Url",
            image: "@Model.Image.Src",
            width: "100%",
            aspectratio: "16:9",
            sharing: {
                link: "@Model.VideoLink.Url"
            },
            primary: 'flash'
        });
        jwplayer('videodiv-@vidid').onPlay(function () {
            $(this.container).closest('.fullbleed-video-module').find('.video-placeholder-text').hide();
        });
        jwplayer('videodiv-@vidid').onPause(function () {
            $(this.container).closest('.fullbleed-video-module').find('.video-placeholder-text').show();
        });
    }
</script>

您的代码还有另一个问题 - Guid 可以以数字开头，这不是 html 元素的有效 id。您应该将代码更改为:

var vidid = "jwp-" + Guid.NewGuid().ToString();