7

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

我知道以前有人问过这个问题,但我能找到的答案会导致包含许多视频的页面出现大量 javascript 代码,我正试图减少臃肿。到目前为止,我对单个视频进行了以下工作,但问题是每个模式和每个视频都必须使用适当的变量重复此 javascript 代码。

$('#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 个模态时,这会变得臃肿!有没有办法利用 Data Attributes 方法来启动内置引导模式的模式,而不是单独调用它,同时仍然只在目标模式中修改 iframe src?打开模式的链接将是:

<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(或任何)编程方面没有经验。感谢你给与我的帮助!

4

6 回答 6

13

我的解决方案:

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

然后添加这个脚本:

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+"&amp;autoplay=1");
});

$("#myModal").on('hidden.bs.modal', function (e) { // on closing the modal
  // stop the video
  $("#myModal iframe").attr("src", null);
});
于 2016-04-06T11:56:21.740 回答
1

我找不到处理此问题的动态方法,因此我为我们正在开发的站点创建了一种动态方法来处理此问题。

以下是链接:

<li><a href="#" data-toggle="modal" data-target="#video1">Video: video 1</a></li>
<li><a href="#" data-toggle="modal" data-target="#video2">Video: video 2</a></li>

以下是模态:

<div id="video1" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/vidpath" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div id="video2" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/vidpath2" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

这是脚本:

// autoplay video functionality
$( "[data-target^='#video']" ).click(function() { 
    // get the ID of the clicked video
    var dataTarget = $(this).attr("data-target");
    dataTarget = dataTarget.substring(1,7); 
    var vidId = '#'+dataTarget; 

    // get the vid src
    var vidSrc = $(vidId+ " iframe").attr('src');

    // create the autoplay
    var vidSrcAuto = vidSrc+'?autoplay=1'; 

    // get the iframe element
    var iframeEl = $(vidId+ " iframe"); 


    $(vidId).on('show.bs.modal', function () {  
        $(iframeEl).attr("src", vidSrcAuto);
    });

    $(vidId).on('hidden.bs.modal', function (e) {  
        $(iframeEl).attr("src", vidSrc);  
    });   

}); 
于 2018-04-02T18:03:59.847 回答
1
                    <div class="close-button">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span></button>
                    </div>

   $('.close').on('click', function (e) {
        $("#myModal iframe").attr("src", null);
    });
于 2017-03-13T13:29:51.510 回答
1

你好@Benjamin Morrison 希望你已经得到了解决方案,我正在为仍在寻找相同解决方案的其他用户回答这个问题

$(document).ready(function() {
  $('.modalclick').on('click', function(e) {
    e.preventDefault();
    var src = $(this).attr('href');
    $('#myModal').modal('show');
    $('#myModal iframe').attr('src', src);
  });
  //auto close or pause on model hide
  $("#myModal").on('hidden.bs.modal', function(e) {
    $("#myModal iframe").attr("src", '');
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
      </div>
      <div class="modal-body">
        <iframe src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

      </div>
      <div class="modal-footer">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">SKIP >></button>

      </div>
    </div>
  </div>
</div>
<a class="modalclick" href="https://www.youtube-nocookie.com/embed/3j4nia24Oms?rel=0&showinfo=0&autoplay=1">click me</a><br>
<a class="modalclick" href="https://www.youtube.com/embed/ycK617mKlvA?rel=0&showinfo=0&autoplay=1">click me 1</a><br>
<a class="modalclick" href="https://www.youtube.com/embed/z329gFDUJis?rel=0&showinfo=0&autoplay=1">click me 2</a>

只需在可点击链接的 href 标签上添加 Youtube Embed url,您可以制作尽可能多的链接。@Benjamin 在您的情况下将图像保留在锚标记内,以便图像可点击。

于 2018-08-03T10:16:36.173 回答
0

这是一个JS Fiddle

我添加了一些渐进增强功能,因此如果 JS 失败,在这种情况下您将被带到 YouTube 视频。

该链接需要一个数据视频嵌入和一个目标,我们将在其中添加视频,其他一切都应该正常工作。示例中的事件适用于 Bootstrap 3 模式,如果您使用的是 2.X,它将只是“隐藏”。

$('[data-provider="modal-video"]')
   .on('click', function (evt) {
      evt.preventDefault();
      var $target = $(evt.currentTarget),
          videoSrc = $target.data('video-embed'),
          $modal = $($target.data('target'));

      $modal
        .find('iframe').attr('src', videoSrc)
        .end()
        .on('hide.bs.modal', function () {
            $(this)
                .off('hide.bs.modal')
                .find('iframe').attr('src', '');
        })
        .modal('show');
});
于 2013-10-01T22:22:37.050 回答
0

干净的方法是为嵌入式 iframe 启用JS Youtube API。只需添加enablejsapi参数即可。截至 2020 年,这只是没有黑客攻击的停止视频的有效解决方案。

我最终得到:

function play_youtube_in_modal(src) {
    // enablejsapi = for enabling to stop on hide.bs.modal
    src += "?autoplay=1&modestbranding=1&rel=0&fs=1&enablejsapi=1";
    $("#modal_youtube_iframe").attr("src", src);

    //show
    $("#modal_youtube").modal("show");
}

// stop playing the youtube video when I close the modal
$('#modal_youtube').on('hide.bs.modal', function (e) {
    $('#modal_youtube_iframe').each(function(){
        this.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*')
    });
})
于 2020-01-26T12:44:17.040 回答