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-->

它看起来如下： enter image description here

当页面加载时，一切正常（第一个视频加载）。但是当我点击另一个视频（在图像上）时，播放器就会消失。如果我再次点击，那么播放器就是apper。还有一个问题：当我点击所有图像两次时，当我点击第一个图像时，它会播放上一个加载的文件，再次点击播放正确的文件。

这是我的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();

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 参考 here

JwPlayer：动态更改视频

2 个答案: