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 on jwplayer.js
Uncaught TypeError: undefined is not a function位于jwplayer("@vidid").setup({和jwplayer('videodiv-@vidid').onPlay(function () {上方。

如何让jwPlayer和Page Editor相互配合？

Answer 1

我不排除与页面编辑器使用的JQuery版本冲突 - 这通常会让人感到困惑。这里有一篇很好的帖子可以解决这些问题。

http://jrodsmitty.github.io/blog/2014/11/12/resolving-jquery-conflicts-in-page-editor/

Answer 2

问题在于，当您通过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可以从number开始，这不是html元素的有效ID。您应该将代码更改为：

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

jwPlayer导致渲染不能在Sitecore的页面编辑器中加载

2 个答案: