jwPlayer заставляет рендеринг не загружаться в редакторе страниц Sitecore

В настоящее время я работаю над рендерингом в 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 хорошо работать друг с другом?


jwplayer sitecore page-editor sitecore7 sitecore7.2
person Corey Adler    schedule 16.02.2015    source источник
comment
Любые ошибки Javascript в консоли? Используете ли вы ORM, например Glass Mapper...? Если да, то это может быть дополнительный фанк редактора страниц Sitecore, который выводится и связывается, чтобы сделать значения ваших полей редактируемыми.   -  person jammykam    schedule 16.02.2015
comment
Я использую Glass Mapper.   -  person Corey Adler    schedule 16.02.2015
comment
Добавлены ошибки Javascript в консоли.   -  person Corey Adler    schedule 16.02.2015
comment
Сделайте источник просмотра и посмотрите, есть ли у вас целая куча элементов типа <code> вокруг ваших полей в JS.   -  person jammykam    schedule 16.02.2015
comment
Я вижу несколько элементов <code>, но их нет ни в одном JS.   -  person Corey Adler    schedule 16.02.2015

Ответы (2)


arrow_upward
4
arrow_downward

Проблема в том, что когда вы добавляете компонент через Page Editor, скрипт запускается до того, как элемент div <div id="@vidid"> будет добавлен в DOM. Не спрашивайте меня, почему...

Решение действительно простое: оберните код javascript условием if, проверив, существует ли уже 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-элементов. Вы должны изменить свой код на:

var vidid = "jwp-" + Guid.NewGuid().ToString();
person Marek Musielak    schedule 16.02.2015
comment
+1 Интересно. Не приведет ли перенос оператора if к тому, что функция setup() просто не сработает? Почему бы вместо этого не использовать document.onload или jquery document.ready? - person jammykam; 16.02.2015
comment
Да, if... приведет к тому, что setup() не будет запущено, а только при добавлении компонента в редакторе страниц. В ту минуту, когда вы сохраняете страницу, Sitecore обновляет страницу, и компонент уже есть, и setup() запускается должным образом. И document.onload, и ready могут вызвать значительную задержку загрузки видео. - person Marek Musielak; 16.02.2015

arrow_upward
4
arrow_downward

Я бы не стал исключать конфликт с версией JQuery, которую использует редактор страниц — это обычно приводит к путанице. Здесь есть хороший пост, чтобы преодолеть проблемы.

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

person Ian Graham    schedule 16.02.2015
comment
Использование Sitecore jQuery должно быть ограничено $sc, чтобы избежать конфликтов, но да, не исключаю этого, в последнее время было несколько проблем с такого рода вещами... - person jammykam; 16.02.2015