javascript JwPlayer:动态变化视频

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/9221994/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 05:58:56  来源:igfitidea点击:

JwPlayer: dynamic change video

javascriptasp.net-mvcjwplayer

提问by user348173

I have jwPlayer on my page and the following markup:

我的页面上有 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-->

It's looks as follows: enter image description here

它的外观如下: 在此处输入图片说明

When page is load all works fine(first video was load). But when I click on another video(on image) then player is dissapper. If I click again then player is apper. And another problem: When I click on all images twice, then when I click for example on the first, it plays the previous loaded file, click once again plays the correct file.

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

This is my JS:

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

回答by Cheery

Why are you trying to reinitialize the player every time? Use its API and submit to player URL of the media file. Simple example:

为什么每次都尝试重新初始化播放器?使用其 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>

Without autostart: trueyou can load media and play it as

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

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