jwPlayer导致渲染无法在Sitecore的页面编辑器中加载 [英] jwPlayer causes rendering not to load in Sitecore's Page Editor

问题描述

我目前正在Sitesite 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错误:

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

如何使jwPlayer和页面编辑器相互配合良好?

解决方案

问题是，当您通过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();
 

I'm currently working on a rendering in Sitecore 7.2 (MVC) that will show a jwPlayer given a link to a video (either in the Media Library or from an external source, like YouTube). When I add the rendering (with a valid data source) through Presentation Details in the Content Editor everything looks fine, and works perfectly. The trouble that I'm running into right now, though, is that when I try to do the same thing from the Page Editor (with the exact same rendering and data source), nothing is showing up in that placeholder at all.

The part of the rendering that deals with the video is as follows:

@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)
}

Other things that might help:

• When I comment out everything in the <script> tag above the rendering shows up perfectly.
• A reference to jwplayer.js is found on the page (that was my first thought)

Console errors in Javascript:

• No suitable players found and fallback enabled on jwplayer.js
• Uncaught TypeError: undefined is not a function on jwplayer("@vidid").setup({ and on jwplayer('videodiv-@vidid').onPlay(function () { from above.

How can I get jwPlayer and Page Editor to work nicely with each other?

解决方案

The issue is that when you add a component through Page Editor, the script is fired before the div <div id="@vidid"> element is added to DOM. Don't ask me why...

The solution is really simple: wrap your javascript code with if condition, checking if the div is already there:

<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>

There is also another issue with your code - Guid can start with number, and this is not a valid id for html elements. You should change your code to:

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

这篇关于jwPlayer导致渲染无法在Sitecore的页面编辑器中加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！