JwPlayer: динамическое изменение видео - PullRequest
Новая
       2

JwPlayer: динамическое изменение видео

2 голосов
/ 10 февраля 2012

У меня есть 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>

1 Ответ

5 голосов
/ 10 февраля 2012

Почему вы пытаетесь каждый раз переинициализировать плеер?Используйте его 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();
...