Question

我有一个使用Twitter bootstrap构建的简单响应式网站。

我有一个视频坐在一个被调用的模态中，只需点击一下按钮即可自动播放。

我想在页面加载时调用我的函数而不是单击按钮。

<a href="#" class="btn btn-default" data-toggle="modal" data-target="#videoModal" 
data-theVideo="https://www.youtube.com/embed/44H1gmn9tBA">VIDEO</a>

<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-body">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <div>
                <iframe width="100%" height="350" src=""></iframe>
            </div>
        </div>
    </div>
</div>

和.js

<script type="text/javascript">
  autoPlayYouTubeModal();
function autoPlayYouTubeModal() {
  var trigger = $("body").find('[data-toggle="modal"]');
  trigger.click(function () {
      var theModal = $(this).data("target"),
          videoSRC = $(this).attr("data-theVideo"),
          videoSRCauto = videoSRC + "?autoplay=1";
      $(theModal + ' iframe').attr('src', videoSRCauto);
      $(theModal + ' button.close').click(function () {
          $(theModal + ' iframe').attr('src', videoSRC);
      });
      $('.modal').click(function () {
          $(theModal + ' iframe').attr('src', videoSRC);
      });
  });
  }
</script>

上述所有内容均按预期工作，但我一直在尝试执行此操作（下方），以便在页面加载时调用自动播放功能。

<script>
$("document").ready(function(){

$("#videoModal").trigger("click");
});
</script>

当我将视频modal.trigger功能粘贴到控制台时，它会返回模态，但模式和视频永远不会启动。

感谢任何帮助。

Answer 1

应该是

$(function(){
       $('[data-toggle="modal"]').trigger("click");
});

因为模态窗口click事件处理程序具有自动播放选项。

在页面加载Javascript上调用函数

1 个答案: