Bootstrap Modals& YouTube:自动播放并在关闭时停止 [英] Bootstrap Modals & Youtube: Autoplay and Stop on Close

问题描述

打开Twitter Bootstrap模式后，我需要能够自动播放youtube视频，然后在关闭时停止播放该视频.

I need to be able to autoplay a youtube video when a Twitter Bootstrap modal is opened and subsequently stop that video on close.

我知道之前曾有人问过这个问题，但是我能找到的答案将导致包含许多视频的页面的JavaScript代码很多，我正努力减少膨胀.到目前为止，我可以针对单个视频执行以下操作，但是问题是每个模式和每个视频都必须使用适当的变量重复此javascript代码.

I know this question has been asked before, but the answers I can find would lead to a LOT of javascript code for a page that contains MANY videos and I am trying to cut down on the bloat. So far I have the following working for individual videos, but the issue is that each modal and each video must have this javascript code repeated with the proper variables.

$('#vidThumbnail-1').click(function () {
        var src = 'http://www.youtube.com/embed/8bKmrhI-YT8?&autoplay=1';
        $('#vid1').modal('show');
        $('#vid1 iframe').attr('src', src);

      //Fit Vids Implamented Below for Mobile Compatibility
        $("#vid1Thumbnail-1 iframe").wrap("<div class='flex-video'/>");
        $(".flex-video").fitVids();
    });
$('#vid1 button').click(function () {
        $('#vid1 iframe').removeAttr('src');
    });

HTML:

<div id="vidThumbnail-1"><img src="http://img.youtube.com/vi/8bKmrhI-YT8/0.jpg" /></div>

<div id="vid1" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-body">
        <iframe src="http://www.youtube.com/embed/8bKmrhI-YT8" width="640" height="360" frameborder="0" allowfullscreen></iframe>   
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    </div>
  </div>

当您有20个视频和20个模态时，这会肿！ 有没有一种方法可以利用数据属性方法来启动内置到内部引导程序的模式，而不是单独调用它，同时仍然仅在目标模式内修改iframe src?打开模态的链接将是:

This gets bloated when you have 20 videos and 20 modals! Is there a way to utilize the Data Attributes method of initiating a modal built-into bootstrap rather than call it individually, while still modifying the iframe src within only the target modal? The link to open the modal would then be:

<a href="#vid1" role="button" data-toggle="modal">
<img src="http://img.youtube.com/vi/8bKmrhI-YT8/0.jpg"></a>

然后:

1. 读取目标模式中iframe的现有src属性(将其设置为变量吗?)
2. 在现有src属性后附加& autoplay = 1"以启动视频.
3. 关闭模态后，将src属性替换为原始属性(可以通过上面的按钮进行操作，就像上面的按钮一样).

这样，我将不需要为每个模态编写脚本，这样可以节省大量时间，并且使JS膨胀.但是，我不知道从哪里开始修改bootstrap.js来完成此操作，而且我对JS(或任何其他)编程没有经验.谢谢您能给我的任何帮助！

This way I would not need to write script for each individual modal, saving a lot of time AND bloated JS. However, I have no idea where to start modifying the bootstrap.js to accomplish this and I'm not experienced in JS (or any) programming. Thanks for any help you can give me!

推荐答案

我的解决方案:

• 不要不手动将&autoplay=1添加到iframe src

• do not add &autoplay=1 to the iframe src manually

然后添加此脚本:

var videoSrc = $("#myModal iframe").attr("src");

$('#myModal').on('show.bs.modal', function () { // on opening the modal
  // set the video to autostart
  $("#myModal iframe").attr("src", videoSrc+"&autoplay=1");
});

$("#myModal").on('hidden.bs.modal', function (e) { // on closing the modal
  // stop the video
  $("#myModal iframe").attr("src", null);
});

这篇关于Bootstrap Modals& YouTube:自动播放并在关闭时停止的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！