Question

我有一个包含大量帖子的循环，每个帖子都有一个视频模式，在点击<button></button>元素后会打开。按钮下方是模态的html部分。要自动播放视频（在打开模态之后），我需要使用类class="start"触发div元素的单击。这是设置

<button class="btn btn-default" id="video-modals-loop" data-toggle="modal" data-target="#001">Play Video</button>

<div class="modal loop-video-modals" id="001">
    <div class="modal-dialog">
        <div class="modal-header">
            <button class="close" aria-hidden="true" type="button">Close</button>
        </div>                                  
        <div id="#product-video">   
            <div class="start" data-src="https://t-e-s-t.com/"></div>                   
        </div>
    </div>
</div>

我已经尝试过像

这样的事情了

$(document).on('click', '#video-modals-loop', function() {
    $(this).closest("#video-modals-loop").find(".lazyframe").trigger('click');  
});

但失败了。 知道如何在打开上述div的模态后触发点击？

编辑：这是一个自举模式，每个模态的开始div都是独立的。

Answer 1

在阅读了关于.closest()和以下answer on Stackoverflow的jQuery文档后，我能够解决我的问题。以下代码工作正常。希望这也有助于其他人。

$(document).on('click', '#video-modals-loop', function() {
    $(this).closest('div').find('.start').click();

    // IF needed you can use a timeout to delay the click event
    // setTimeout(function(){ 
        // $(this).closest('div').find('.start').click();
    // },1);

    return false;
});

Answer 2

如果你在桌面上尝试这个没问题，但是它不适用于移动设备因为自动播放并不支持移动设备，请注意

https://www.tutorialrepublic.com/codelab.php?topic=faq&file=autoplay-youtube-video-within-bootstrap-modal

还有一件事，下面的代码在这里没有正常工作，因为我们的代码段输出窗口也可用作移动/小型设备，只需复制代码从您的系统运行它然后它可以正常工作。

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Autoplaying YouTube Video inside Bootstrap Modal</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
    	margin: 20px;
    }
    .modal-content iframe{
        margin: 0 auto;
        display: block;
    }
</style>
<script type="text/javascript">
$(document).ready(function(){
    /* Get iframe src attribute value i.e. YouTube video url
    and store it in a variable */
    var url = $("#cartoonVideo").attr('src');
    
    /* Remove iframe src attribute on page load to
    prevent autoplay in background */
    $("#cartoonVideo").attr('src', '');
	
	/* Assign the initially stored url back to the iframe src
    attribute when modal is displayed */
    $("#myModal").on('shown.bs.modal', function(){
        $("#cartoonVideo").attr('src', url);
    });
    
    /* Assign empty url value to the iframe src attribute when
    modal hide, which stop the video playing */
    $("#myModal").on('hide.bs.modal', function(){
        $("#cartoonVideo").attr('src', '');
    });
});
</script>
</head>
<body>
<div class="bs-example">
    <!-- Button HTML (to Trigger Modal) -->
    <a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Launch Demo Modal</a>
    
    <!-- Modal HTML -->
    <div id="myModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">YouTube Video</h4>
                </div>
                <div class="modal-body">
                    <iframe id="cartoonVideo" width="560" height="315" src="//www.youtube.com/embed/YE7VzlLtp-4?autoplay=1" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>
</div>     
</body>
</html>

＆＃13;

触发器单击按钮打开模态后单击DIV

2 个答案: