如何在html5视频中单击自动播放以获取引导模式？

Question

我有一个由href链接调用的bootstrap模态窗口。

模态代码是：

<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链接后调用的：

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

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

请把我排除在外。

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()
})