当 iframe 视频在 Qualtrics 中结束时自动前进到下一页

Posted 2023-05-09

【中文标题】当 iframe 视频在 Qualtrics 中结束时自动前进到下一页

【英文标题】：auto-advance to next page when iframe video ends in Qualtrics

【发布时间】：2017-07-30 19:05:02

【问题描述】：

我正在尝试在我的 Qualtrics 调查中使用 iframe 嵌入 vimeo 视频。当这个视频结束时，我想自动前进到下一页（即自动按下“下一步按钮”）。在使用 vimeo 之前，我的视频存储在 Dropbox 上，为此我使用了以下代码（网址不是真实的）：

<video autoplay="" id="video1"  ><source src="https://dl.dropboxusercontent.com/u/6339921/att/fam.mp4" type="video/mp4"></video>

Qualtrics.SurveyEngine.addOnload(function()     
  that = this; 
  document.getElementById('video1').addEventListener('ended',myHandler,false);
  function myHandler(e) 
    if(!e)  
      e = window.event; 
    
    that.clickNextButton();  
  
);

但是，我似乎必须将 iframe 与 vimeo 一起使用，但我无法使自动前进工作（视频会播放但页面不会前进）。也许是因为我以错误的方式分配了“ID”。这是代码：

<iframe id="player1"  src="https://player.vimeo.com/video/20708824?autoplay=1api=1&player_id=player1&title=0&byline=0&portrait=0&background=1&mute=0&loop=0"   frameborder="0"></iframe>

Qualtrics.SurveyEngine.addOnload(function() 

  that = this;
  var idPlayer = new Vimeo.Player('player1');
  document.getElementByID('player1').addEventListener('ended',myHandler,false);
  function myHandler(e) 
    if(!e)  e = window.event; 
        that.clickNextButton();  
  
);

我正在寻找 a) 修复 iframe 代码的选项，或 b) 使用我在 Dropbox 视频中使用的旧代码嵌入 vimeo 视频的选项。 非常感谢，如果这一切听起来很幼稚，我深表歉意，我不是程序员 :-(

【参考方案1】：

您不能将事件侦听器添加到来自不同域的 iframe。它被称为跨域脚本，出于安全原因，浏览器不允许这样做。

您必须使用 postMessage。已经编写了一个 javascript 类，但您应该知道如何将其集成到 Qualtrics 中：

https://github.com/vimeo/player.js