javascript - 如何在模态窗口中添加 javascript 来播放视频？

Question

所以，我有一个应用程序，用户可以在其中上传和播放视频。现在，我有一个预览模态窗口，允许用户单击一个剪辑，然后会弹出一个模态，他们可以在其中播放该剪辑。

不过目前，模态框只有剪辑的缩略图，如下所示:

$('#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>

这里的任何帮助都会很棒，谢谢!

Answer 1

似乎您正在使用 Bootstrap 的模式，它有一个 show.bs.modal在显示模式之前触发的事件。您可以连接到它，然后从回调函数中执行进一步的 javascript。

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

我确定您需要传递一些动态参数才能获得有问题的视频，因此最好使用 data-video="<%= @clip.video.id %>"这样您就可以在其中存储对视频 ID 的引用。您可能需要的不仅仅是一个数据属性来存储对缩略图 ID 等的引用...然后在您的点击功能中，您可以提取此数据。