3

私は現在、Sitecore 7.2 (MVC) でのレンダリングに取り組んでおり、(メディア ライブラリまたは YouTube などの外部ソースからの) ビデオへのリンクを jwPlayer に表示します。コンテンツ エディターの [プレゼンテーションの詳細] から (有効なデータ ソースを使用して) レンダリングを追加すると、すべてが正常に見え、完全に機能します。しかし、私が今直面している問題は、ページ エディターから同じことを (まったく同じレンダリングとデータ ソースで) 実行しようとすると、そのプレースホルダーに何も表示されないことです。

ビデオを処理するレンダリングの部分は次のとおりです。

@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 enabledjwplayer.js で
  • Uncaught TypeError: undefined is not a function上jwplayer("@vidid").setup({からjwplayer('videodiv-@vidid').onPlay(function () {どんどん。

jwPlayer とページ エディターをうまく連携させるにはどうすればよいですか?

4

2 に答える 2

4

問題は、 を介してコンポーネントを追加すると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 要素の有効な ID ではありません。コードを次のように変更する必要があります。

var vidid = "jwp-" + Guid.NewGuid().ToString();
于 2015-02-16T19:51:59.307 に答える