Question

例如：我有两个不同的HTML代码，一个是嵌入式YouTube视频：

<iframe width="560" height="315" src="http://www.youtube.com/embed/kZlXWp6vFdE" frameborder="0" allowfullscreen></iframe>

这是关于视频的问题：

<form>
    <h3> How was the video? </h3>
    <input type="button"name="option1" /> Good!
    <br/>
    <input type="button"name="option2" /> Bad!
</form>

我现在要做的是，当用户导航到此页面时，他会首先看到视频，然后在观看视频后，他会点击下一个，然后会出现问题。

我不希望下一个按钮链接到问题所在的其他页面，问题必须加载到同一页面上。

最简单的形式我可以把它放在那里，

用户导航到该页面。
观看视频并点击下一步。
视频消失，问题就出现了。

Answer 1

你可以这样做：

<iframe id="video" width="560" height="315" src="http://www.youtube.com/embed/kZlXWp6vFdE" frameborder="0" allowfullscreen></iframe>
<form id="form" style="display:none;">
    <h3> How was the video? </h3>
    <input type="button"name="option1" /> Good!
    <br/>
    <input type="button"name="option2" /> Bad!
</form>
<a href="#" id="next">Next</a>

和js：

document.getElementById('next').addEventListener('click', function() {
    document.getElementById('video').style.display = 'none';
    document.getElementById('next').style.display = 'none';
    document.getElementById('form').style.display = 'block';
});

在这里演示：http://jsfiddle.net/Fs73d/2/

Answer 2

我能想到的最佳方法是使用Chromeless Youtube Player API。这将允许您通过JS添加事件处理程序以检查视频何时播放完毕。然后，您可以继续显示表单。

This similar question may be of help to you.

Answer 3

快速添加按钮，可能位于iframe下方：

<input type="button" value="Next" id="btnNext"/>

确保在页面加载时隐藏您的表单，您可以通过多种方式执行此操作，我只会添加一些内联CSS：

<form style="display: none;">

我正在为您的iFrame添加ID，这样可以更轻松地定位：

<iframe id="iYoutubeVid" ../>

现在为JS：

document.getElementById("btnNext").onclick = function() {
    document.getElementById("iYoutubeVid").style.display = "none";
    document.getElementById("btnNext").style.display = "";
}

使用此示例可以单击“下一步”按钮。如果您正在寻找更复杂的东西，我建议使用Youtube API。

如何将JS实现为两段HTML代码？

3 个答案: