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的引用等等。然后在您的点击功能中，您可以提取此数据。

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

1 个答案: