从按钮触发javascript_Javascript_Html_Video

从按钮触发javascript

javascript html video

从按钮触发javascript,javascript,html,video,Javascript,Html,Video,我这样做的代码，以便有电子邮件选择在形式时，视频结束。我想知道的是如何从onClick按钮调用这个html。整个想法是点击一个按钮并将此代码调用到一个灯箱中 <!DOCTYPE html> <html> <head> <style> #overlayContactForm { visibility: hidden; posi

我这样做的代码，以便有电子邮件选择在形式时，视频结束。我想知道的是如何从onClick按钮调用这个html。整个想法是点击一个按钮并将此代码调用到一个灯箱中

<!DOCTYPE html>
<html>
    <head>      
        <style>
            #overlayContactForm {
                visibility: hidden;
                position: absolute;
                left: 0px;
                top: 0px;
                width:100%;
                height:100%;
                text-align:center;
                z-index: 1000;
            }
            #overlayContactForm div {
                width: 428px;
                margin: 65px;
                background-color: #fff;
                border: 1px solid #000;
                padding: 15px;
                text-align: center;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <div id="player"></div>
        <script src="http://www.youtube.com/player_api"></script>
        <div align="center">
            <script>
                // create youtube player
                var player;
                function onYouTubePlayerAPIReady() {
                    player = new YT.Player('player', {
                        height: '390',
                        width: '640',
                        videoId: 'VhvUEhxL1DQ',
                        playerVars: {rel: 0},
                        events: {
                            'onReady': onPlayerReady,
                            'onStateChange': onPlayerStateChange
                        }
                    });
                }

                // autoplay video
                function onPlayerReady(event) {
                    event.target.playVideo();
                }

                // when video ends
                function onPlayerStateChange(event) {        
                    if(event.data === 0) {            
                        // $('#lightbox-panel').lightBox();
                        el = document.getElementById("overlayContactForm");
                        el.style.visibility = (el.style.visibility == "visible") ? "hidden" : 
                        "visible";
                    }
                }
            </script>
        </div>
        <div id="overlayContactForm">
            <div>
                <h1> Mobivate</h1>
                <form class="form-inline">
                    <input type="email" class="form-control" id="exampleInputEmail3"   
                        placeholder="Email Address">
                    <button type="submit" class="btn btn-default">Sign in</button>
                </form>
                <p> Testing email opt-in - Video/Form </p>
            </div>
        </div>
    </body>
</html>

听起来您希望在用户单击提交按钮时播放视频。您可以尝试以下方法：

<form class="form-inline" onsubmit="onSubmit()">
    <input type="email" class="form-control" id="exampleInputEmail3"   
                    placeholder="Email Address">
    <button type="submit" class="btn btn-default">Sign in</button>
</form>

我加了返回假；这样页面就不会刷新，但您需要正确处理。您可以在按钮上单击onclick，而不是在表单上单击onsubmit，但这取决于您想如何处理它。

您能澄清一下您想做什么吗？您可以让onclick事件调用您的函数。像这样：点击我。虽然我不清楚哪个函数会真正启动视频。事实上，你在lightbox中给了我们你想要的代码，这无助于解释你实际采取了哪些步骤来解决问题。你试过什么？您在问题中引用了onclick，是否尝试将函数附加到按钮的onclick处理程序或事件侦听器？@Perpatim如果我知道下一步，我不会寻求帮助。@BenMarch我想要的是一个在Lightbox中调用我的视频的按钮我使用了不同的方法，取得了一些进展。我在stackoverflow上发布了另一个问题，你可能可以很容易地帮助我。干杯

function onSubmit() {
    player.playVideo();
    return false;
}