暂停YouTube视频并使用表单显示div [英] pause youtube video and show div with a form

问题描述

在我的网站上有一个YouTube视频：

< div ID = 视频 > < iframe width =560height =315src =https://www.youtube.com/embed/some_videoframeborder =0allowfullscreen>< / iframe> < / div>

暂停它并通过在视频上覆盖一个表单来询问用户的问题： $ b

 < h1>到目前为止，您喜欢该视频吗？ < / h1>< div id =question> <形式> < input type =radioname =questionvalue =poorchecked> Poor< br> < input type =radioname =questionvalue =good>好< br> < input type =submitvalue =Submit> < / form>< / div>  

在一段固定时间之后暂停视频的javascript代码以及用于很好地显示表单的css是什么？基本上我想模仿一次 coursera.org 的讲座。

解决方案

使用下面的代码来暂停和恢复视频，而不是停止并重新开始播放视频

  var iframe = document.getElementsByTagName（iframe）[0] .contentWindow; 
 
 iframe.postMessage（'{event：command，func：playVideo，args：}'，'*'）; 
 iframe.postMessage（'{event：command，func：pauseVideo，args：}'，'*'）; 
  

I have a youtube video on my website:

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

after some fixed time, I want to pause it and ask the user a question by overlaying a form over the video:

<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>

What would be the javascript code to pause the video after a fixed period of time and what would be the css for displaying the form nicely? Basically I want to mimic the way lectures on coursera.org once looked like.

解决方案

Use the below code to pause and resume the video on opening and closing the popup instead of stop and starting the video again

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

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

这篇关于暂停YouTube视频并使用表单显示div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！