Question

我的网站上有一个youtube视频：

＆＃13;

<div id="video">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/some_video" frameborder="0" allowfullscreen></iframe> 
</div>

＆＃13;

经过一段固定时间后，我想暂停一下，并通过在视频上叠加表单向用户提问：

＆＃13;

<h1>how do you like the video so far? </h1>
<div id="question">
  <form> 
    <input type="radio" name="question" value="poor" checked>Poor<br> 
    <input type="radio" name="question" value="good">Good<br> 
    <input type="submit" value="Submit"> 
  </form>
</div>

＆＃13;

在一段固定的时间后暂停视频的javascript代码是什么？用于显示表单的css会是什么？基本上我想模仿coursera.org讲课的样子。

Answer 1

Tyr this：

HTML：

 <div id="video">
          <iframe id="iframe" width="560" height="315" src="https://www.youtube.com/embed/W5MZevEH5Ns" frameborder="0" allowfullscreen ></iframe> 
        </div>
    <div id="message">
        <h1>how do you like the video so far? </h1>
        <div id="question">
          <form> 
            <input type="radio" name="question" value="poor" checked>Poor<br> 
            <input type="radio" name="question" value="good">Good<br> 
            <input type="submit" value="Submit"> 
          </form>
        </div>
    <div>

JQuery的：

<script>

 $(document).ready(function(){
        // hiding message on load
        $("#message").hide();

        // time out function
        setTimeout(function(){
        var yourIframe = ('iframe#iframe');
        var src = $('#iframe').attr('src');      

        $('#iframe').attr('src', '').attr('src', src);//pause youtube video
        $("#message").show(); // show message 
        }, 5000);

 });

</script>

Answer 2

使用以下代码在打开和关闭弹出窗口时暂停和恢复视频，而不是停止并再次启动视频

var iframe = document.getElementsByTagName("iframe")[0].contentWindow;

iframe.postMessage('{"event":"command","func": "playVideo","args":""}','*');
iframe.postMessage('{"event":"command","func": "pauseVideo","args":""}','*');

暂停youtube视频并使用表单显示div

2 个答案: