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

How to add javascript inside a modal window to play videos?

本文关键字：javascript 播放 视频 添加 模态 窗口      更新时间：2023-09-26

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

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

$('#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 %>"，这样你就可以存储引用视频ID在这。你可能需要不止一个数据属性来存储对缩略图id的引用，等等……然后在单击函数中，可以提取这些数据。

相关文章：