Question

我知道这已经被问到并得到了回答，但是我没有找到任何我发现的选项。当模式关闭时，我试图让视频停止播放或暂停视频。我遇到的一个问题是能够定位关闭按钮。我已经将console.logs放在我尝试过的功能中，但它们根本没有在控制台中注册。感谢您提供的任何见解。

<div id="myModal<%= index + 1 %>"  data-id='<%= list.video_id %>'class="modal fade videoModal" role="dialog">
        <div class="modal-dialog">
          <!-- Modal content-->
          <div class="modal-content bmd-modalContent" >
            <div class="modal-body modal-header">
              <div class="close-button">
                <button id='single' type="button" class="close fancybox-close" data-dismiss="modal" aria-label='Close' ><span aria-hidden="true">&times;</span></button>
              </div>
              <div class='embed-responsive embed-responsive-16by9'>
                <iframe id='player' class='embed-responsive-item' src="https://youtube.com/embed/<%= list.video_id %>?rel=0&enablejsapi=1" allowFullScreen='true' frameborder="0"></iframe>
              </div>
            </div>
          </div>
        </div>
      </div>

修改的对不起，我已经尝试了很多jQuery，当时我的app.js文件夹中没有。这就是我现在正在做的事情。

$('[id^=myModal]').on('hidden.bs.modal', function(event) {
  console.log(player);
  event.target.stopVideo();
});

Answer 1

使用更多详情更新问题

很难说出问题是什么，因为你只发布了html。您在查找关闭按钮和console.log时遇到问题不会触发。显然，你的javascripe文件在console.log行之上有一些错误。

要检测模态是否已关闭，您可以使用此事件

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

我不会在生成模式时更改模态的id，而是将data-attr放在此元素上以拥有一个.on('hidden.bs.modal')并控制每个模态

<强>更新

来自youtube-api docs https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

有人说如果你用youtube视频嵌入你的html iframe，那么你在js中制作类似的东西：

function onYouTubeIframeAPIReady(){
    var iframe = document.getElementById("my-video");
    video = new YT.Player(iframe);
}

你不必定义你创建的Player的属性，它将从iframe中获取它。

小提琴：http://jsfiddle.net/ux86c7t3/2/

Answer 2

好吧，你可以简单地删除iframe的src，然后再次放回去;所以iframe停止运行。

body{margin:0;}
.menu{
  display:inline-block;
  width:auto;
  height:100%;
  max-width: 400px;
  background:antiquewhite;
  position: absolute;
  top:0;
}

a{display:block;}
.menu-left{
  position: relative;
  transform: translateY(-50%);
  top: 50%;
  width:200px;
  background:bisque;
  float:left;
}
.menu-right{
  position: relative;
  background:burlywood;
  width:200px;
  transform: translateY(-50%);
  top: 50%;
  margin-left:200px;
  box-sizing: border-box;
  display:none;
}
.content{
  background:cadetblue;
  width:100%;
  vertical-align:top;
  padding-left:200px;
  box-sizing:border-box;
}
.content p{margin:0}
.padding{padding-left:400px;}

现在是Jquery部分

<head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
  <div class="menu">
  <div class="menu-left">
    <a>xxx</a>
    <a>xxx</a>
    <a>xxx</a>
  </div>
  <div class="menu-right">
    <a>xxx</a>
    <a>xxx</a>
    <a>xxx</a>
    <a>xxx</a>
    <a>xxx</a>
    <a>xxx</a>
    <a>xxx</a>
  </div>
</div>

<div class="content">
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
</div>
</body>

模态关闭/隐藏时停止/暂停视频

2 个答案: