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>

- user348173

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

- Cheery

Answer 2

感谢之前的回答！对我很有帮助！（但是答案已经过期了）。

实际上，对于所有最新版本的jwPlayer，我们无法直接从此URL加载新视频。我们必须使用有效的JSON将此视频添加到播放列表（使用load（）方法）：

jwplayer().load("https://mywebsite.com/myplaylist.json");

或者像这样的数组：

jwplayer('myElement').load([{
  file: "/videos/myVideo.mp4",
  image: "/images/myImage.png",
  title: "My Favorite Video!",
  description: "This has lots of kittens in it!"
}]);

您可以在这里查看所有API参考文档。

- Doc Roms