event.preventDefault();不适用于视频点击

Question

我的网站上有一个视频元素，我想要求用户填写一份简短的表格，以便他们可以观看视频。

我有这个js，可以在单击时打开表单

$('.gated-resource').on('click', function(event){
    $('#gatedPageModal').modal('show');
    event.preventDefault();
    event.stopPropagation();
});

问题是 event.preventDefault();似乎并不总是有效，如果你的视频位于控制栏上方，它可以工作，但你只需单击控制栏和播放按钮，它就会播放视频而不是打开模式，在 iOS 上，任何点击都会播放视频。我尝试在填写表单之前将 src 设置为“”，但这会破坏 iOS 上的缩略图

Answer 1

您似乎想要实现用户在观看视频之前填写表单的要求，并且当用户与 iOS 设备上的控制栏或播放按钮交互时，您遇到了阻止视频播放的问题。以下是解决此问题的建议：

禁用控件：您可以在模式打开时禁用视频控件。这可以防止用户在填写表单之前与控件进行交互并播放视频。

javascript

// Disable video controls when the modal is shown
$('#gatedPageModal').on('show.bs.modal', function () {
    $('#yourVideoElement')[0].controls = false;
});

// Enable video controls when the modal is hidden
$('#gatedPageModal').on('hidden.bs.modal', function () {
    $('#yourVideoElement')[0].controls = true;
});

// Open the modal on click
$('.gated-resource').on('click', function(event){
    $('#gatedPageModal').modal('show');
    event.preventDefault();
    event.stopPropagation();
});

暂停视频：此外，您可以在打开模式时暂停视频，以确保它不会在后台播放：

javascript

// Pause the video when the modal is shown
$('#gatedPageModal').on('show.bs.modal', function () {
    $('#yourVideoElement')[0].pause();
});

// Resume playing the video when the modal is hidden (if needed)
$('#gatedPageModal').on('hidden.bs.modal', function () {
    $('#yourVideoElement')[0].play();
});

确保将 #yourVideoElement 替换为视频元素的实际选择器。

这种方法应该有助于防止用户在填写表单之前播放视频。