javascript - JwPlayer:动态改变视频

Question

我的页面上有 jwPlayer 和以下标记:

div class="block_video">
    <div class="slider_video" id="slider_video">
        <div class="navigation_container">
            <div class="navigation">
                <ul class="thumbs">
                    <% foreach (var publicationVideo in Model.PublicationVideos)
                       {%>
                    <li><a id='<%=publicationVideo.PathToVideo %>' data-isurl="<%=publicationVideo.IsUrl %>" href="/assets/images/i/2.jpg" class="thumb" title="<%=Model.Name %>">
                        <img  src="/assets/images/video-content.png" width="49px" height="41px" />
                    </a>
                        <div class="caption">
                            <div id="video_player">
                            </div>
                            <div class="caption_video">
                                <%=Model.Name %></div>
                        </div>
                    </li>
                    <% } %>
                </ul>
                <!-- .thumbs-->
            </div>
            <!-- .navigation-->
        </div>
        <!-- .navigation_container-->
        <div class="slideshow">
            <div class="render">
            </div>
            <div class="caption-container">
            </div>
        </div>
        <!-- .slideshow-->
    </div>
    <!-- .slider_video-->
</div>
<!-- .block_video-->

它看起来是这样的:

当页面加载时一切正常(第一个视频加载)。但是当我点击另一个视频(在图像上)时，播放器就会消失。如果我再次单击然后播放器是应用程序。还有一个问题:当我点击所有图片两次，然后当我点击第一次时，它会播放之前加载的文件，再次点击会播放正确的文件。

这是我的 JS:

<script type="text/javascript">
    $(document).ready(function () {
        var isUrlOnReady = $(".block_video a").attr("data-isurl");
        var providerOnReady;
        if (isUrlOnReady === "True")
            providerOnReady = "youtube";
        else
            providerOnReady = "http";

        loadPlayer('<%=Url.Action("GetVideo", "Video", new {videoName = Model.PublicationVideos[0].PathToVideo}) %>', providerOnReady);           


        $(".block_video a").click(function () {
            var isUrl = $(this).attr("data-isurl");
            var fileName = $(this).attr("id");
            var provider;
            var path;

            if (isUrl === "True") {
                provider = "youtube";
                path = fileName;
            }
            else {
                provider = "http";
                path = '<%=Url.Action("GetVideo", "Video", new {videoName = -1}) %>';
                path = path.replace("-1", fileName);
            }


            loadPlayer(path, provider);

        });
    });

// load player
function loadPlayer(fileName, provider) {
    jwplayer("video_player").setup({
        flashplayer: '<%=Url.Content("~/assets/js/jwplayer/player.swf")%>',
        file: fileName,
        height: 173,
        width: 210,
        provider: provider,
        controlbar: 'bottom'
    });
}
</script>

Answer 1

为什么你每次都试图重新初始化播放器？使用其 API 并提交到媒体文件的播放器 URL。简单的例子:

$(document).ready(function () {
   jwplayer('player').setup({
        flashplayer: 'player.swf',
        height: 173,
        autostart: true,
        width: 210,
        controlbar: 'bottom'
    });
   $('.media').click(function(){
       jwplayer().load($(this).text());
   })      
 });
</script>
<div id='player'></div><br />
<div class='media'>video.mp4</div>
<div class='media'>video2.mp4</div>

如果没有 autostart: true，您可以加载媒体并将其播放为

jwplayer().load($(this).text()).play();