Блог

Итак, у меня есть приложение, в котором пользователи могут загружать и воспроизводить видео. Теперь у меня есть модальное окно предварительного просмотра, которое позволяет пользователям нажимать на клип, и появляется модальное окно, в котором они могут воспроизвести клип.

Однако на данный момент в модальном окне есть только миниатюра клипа, вот так:

 $('#myModal .my-profiletxt').html('<%= @clip.film.name %>');
$('.qpcliptitle').html('<%= @clip.name %>');
$('.qpdesc').html('<%= @clip.description %>');
$('.qptaglist').html('<%= @clip_tags %>')
$('#myModal .queuepagevideo').html('<%= image_tag(@clip.thumbnail.url(:large)) %>');
$('#myModal .qpposter').html('<%= image_tag(@clip.film.poster.url(:medium)) %>');
$('.qpimages').html('<%= j(rating_for @clip, "rating") %>');
$('#myModal').modal('show');
  

Как я могу добавить свой видеопроигрыватель javascript вместо миниатюры, чтобы пользователи могли просматривать и воспроизводить клипы в модальном режиме?

Вот код видеоплеера JS, который работает вне модального:

  <div class="video-img">
        <script src="http://jwpsrv.com/library/Nu3Cav_oEeKU_RIxOUCPzg.js"></script>
        <div id='my-video<%= @clip.video.id %>'></div>
        <script type='text/javascript'>
            jwplayer('my-video<%= @clip.video.id %>').setup({
                playlist: [{
                        image: "<%= @clip.video.thumbnail_url %>",
                        sources: [
                            { file: "<%= video_url(@clip.video.remote_id, :smil) %>" },
                            { file: "<%= video_url(@clip.video.remote_id, :m3u8) %>" }
                        ]
                    }],
                primary: "flash",
                width: '100%',
                height: '350',
                rtmp: {
                        bufferlength: 7
                    }
            });
        </script>
        <%#= image_tag('video-img.jpg') %>
      </div>
    </div>
  

Любая помощь здесь была бы отличной, спасибо!

Похоже, вы используете модальное окно Bootstrap, у которого есть show.bs.modal событие, которое запускается прямо перед отображением модального окна. Вы можете подключиться к этому, а затем выполнить дополнительный javascript из функции обратного вызова.

 $('#myModal').on('show.bs.modal', function(){
    //execute setup function within this
});
  

Я уверен, что есть несколько динамических аргументов, которые вам нужно будет передать, чтобы получить соответствующее видео, поэтому, вероятно, лучше всего использовать data-video="<%= @clip.video.id %>" , чтобы вы могли сохранить ссылку на идентификатор видео в этом. Вероятно, вам понадобится нечто большее, чем просто один атрибут данных для хранения ссылки на идентификатор миниатюры и т.д…Затем в вашей функции click вы можете извлечь эти данные.