如何在点击 html5 视频时自动播放 bootstrap 模态？

Question

我有 bootstrap 模态 window 由 href link.

调用

模态代码为：

<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" onclick="pauseVideo()">&times;</button>
                <div class="iframe-video">
                          <video width='100%' id="video-gpro" src="someVideo.mp4" controls />
                </div>
            </div>
        </div>
        </div>
    </div>

点击以下 href link 时调用：

<a class="play-button"  href="#" data-toggle="modal" data-target="#videoModal" data-theVideo="someVideo.mp4"><div class="play-button"></div></a>

问题是我需要在点击发生后自动播放它。但是，如果我将视频标签写为自动播放，它会在页面加载时自动播放。但我需要在点击 'play-button' 后自动播放。

请帮我解决这个问题。

Answer 1

我没试过这个，但这样的东西可能对你有用...

// when the modal is opened...
$('#videoModal').on('show.bs.modal', function () {
  // call play() on the <video> DOM element 
  $('#video-gpro')[0].play()
})

如果视频继续播放，您可以反向操作暂停视频....

// when the modal is opened...
$('#videoModal').on('hide.bs.modal', function () {
  // call pause() on the <video> DOM element 
  $('#video-gpro')[0].pause()
})

如何在点击 html5 视频时自动播放 bootstrap 模态？

How to do autoplay on click in html5 Video for bootstrap modal?

jquery

html5-video

bootstrap-modal