0

例如：我有两段不同的 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>

我现在想做的是，当用户导航到此页面时，他将首先看到视频，然后在观看视频后，他将单击下一步并出现问题。

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

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

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

3 回答 3

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/

于 2013-06-06T00:58:01.323 回答
0

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

这个类似的问题可能对你有帮助。

于 2013-06-06T00:54:09.257 回答
0

快速添加一个按钮，可能在 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。

于 2013-06-06T00:57:40.690 回答