jwPlayer causes rendering not to load in Sitecore's Page Editor

Question

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?

Any Javascript errors in the console? Are you using an ORM like Glass Mapper...?If so, it may be the additional Sitecore page editor funk that is output and tying to make your field values editable — jammykam, Feb 16 '15 at 16:30
Do a view source and see if you have a whole bunch `` type elements around your your fields within the JS — jammykam, Feb 16 '15 at 16:51

score 4 · Answer 1 · answered Feb 16 '15 at 17:30

4

I wouldn't rule out a conflict with the version of JQuery that the Page Editor uses - this usually messes stuff up. There's a good post here on to overcome the issues.

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

answered Feb 16 '15 at 17:30

Ian Graham

3,206
1
15
23

Sitecore's use of jQuery _should_ be scoped to `$sc` to avoid conflicts, but yeah, wouldn't rule it out, there's been a few issues with this kind of thing of late... – jammykam Feb 16 '15 at 19:47

score 4 · Accepted Answer · answered Feb 16 '15 at 19:51

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();

+1 Interesting. Would wrapping with the `if` statement simply not cause the `setup()` function to not fire? Why not use `document.onload` or jquery `document.ready` instead? — jammykam, Feb 16 '15 at 20:03
Yes, `if...` will cause that `setup()` will not be fired, but only while adding the component in page editor. The minute you save the page, Sitecore refreshes the page, and the component is already there and `setup()` is fired properly. Both `document.onload` and `ready` could cause significant latency of loading the video. — Marek Musielak, Feb 16 '15 at 20:09

jwPlayer causes rendering not to load in Sitecore's Page Editor

2 Answers2

Linked