Question

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

模态代码是：

$.ajax({

    url: 'postcodecheck.php',
    type: 'POST',
    dataType: 'json',
    data: 'postc=' + postc + '&huisnr=' + huisnr,
    cache: false,
    success: function(data) {
        $.each(data.location, function(index, value) {

            console.log("City " + value.city)
            console.log("postcode " + value.postcode)
            console.log("straat " + value.straat)
        })
    }
});

在点击以下href链接时调用：

<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>

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

请把我解雇。

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视频中单击自动播放以获取引导模式？

1 个答案: