是否可以在 iframe 上停止/暂停视频？

Posted 2023-05-09

【中文标题】是否可以在 iframe 上停止/暂停视频？

【英文标题】：Is it possible to stop/pause video on iframe?

【发布时间】：2015-09-10 13:50:35

【问题描述】：

这是视频

 <iframe id="vt"  autoplay="false"  src="http://cache4.asset-cache.net/xd/468140002.mp4?v=1&c=IWSAsset&k=2&d=72990B68305E4FDFEE95B69A879131BCD6D7111452E48A17C03F8342D660D5A451EBC1DEC2A827C9&b=RTdG" frameborder="0" allowfullscreen></iframe> 

我想停止或暂停它，可以吗？只想坚持 iframe

http://jsfiddle.net/karimkhan/2Lgxk5h3/7/

js/jquery 中的任何函数都可以吗？

【问题讨论】：

当 iframe 不在同一个域中时，您无法使用脚本访问 iframe。 （搜索跨站点脚本 XSS）。我曾经尝试通过触发 iFrame 上的空格键事件（这应该使视频停止）来做到这一点，但我无法让它工作并放弃了。

【参考方案1】：

是的，您可以从 iframe 访问您的视频，但这仅适用于帧源位于同一域中的情况。如果它来自不同的域，跨站点脚本 (XSS) 保护将启动。

我想您正在播放您域中的视频，（嵌入式 iframe url 域与页面域大部分相同）。

测试：

到这里： http://cache4.asset-cache.net/

并在控制台中运行此代码：

var video = undefined;
//define iframe in html
ifrm = document.createElement("IFRAME"); 
ifrm.setAttribute("src", "http://cache4.asset-cache.net/xd/468140002.mp4?v=1&c=IWSAsset&k=2&d=72990B68305E4FDFEE95B69A879131BCD6D7111452E48A17C03F8342D660D5A451EBC1DEC2A827C9&b=RTdG"); 
ifrm.setAttribute("id", "vt");
ifrm.setAttribute("width","420");
ifrm.setAttribute("autoplay","false"); 
ifrm.setAttribute("height","345");
document.body.appendChild(ifrm); 

//iframe load event
ifrm.onload = function() 
    var btnPlay = document.createElement("BUTTON");
    btnPlay.setAttribute("onclick", "play();");
    var t1 = document.createTextNode("PLAY ME");       
    btnPlay.appendChild(t1);                               
    document.body.appendChild(btnPlay);

    var btnPause = document.createElement("BUTTON");        
    btnPause.setAttribute("onclick", "pause();");
    var t2 = document.createTextNode("PAUSE ME");      
    btnPause.appendChild(t2);                              
    document.body.appendChild(btnPause);

    video = document.getElementById("vt").contentWindow.document.body.getElementsByTagName('video')[0];



//play stop methods
function play()

  if (video != undefined)
    video.play();
  return false;


function pause()

  if (video != undefined)
    video.pause();
  return false;

结论如果您的 iframe 源与您的域不同，则您无法从帧控制视频。以上是跨站脚本不影响您时如何控制视频。

【参考方案2】：

我使用以下代码在 iframe 中播放/暂停视频：

播放：

var frames = document.getElementsByTagName('iframe');var t=1;
for (var i in frames)
  $(frames[i]).contents().find('video')[0].play();
  if(t===frames.length)break;
                  t++;

和

暂停：

var frames = document.getElementsByTagName('iframe');var t=1;
for (var i in frames)
  $(frames[i]).contents().find('video')[0].pause();
  if(t===frames.length)break;
                  t++;

【讨论】：

请添加更多详细信息以扩展您的答案，例如工作代码或文档引用。

【参考方案3】：

我正在为您使用此 html 和 JS 代码停止、播放暂停视频库中的视频提供解决方案。

    <script>
      var slideIndexVid = 1;
      showSlidesVid(slideIndexVid);
      
      function plusSlidesVid(n) 

        
        showSlidesVid(slideIndexVid += n);
      
      
      function currentSlideVid(n) 
        showSlidesVid(slideIndexVid = n);
      
      
      function showSlidesVid(n) 
        var i;
        var slidesVid = document.getElementsByClassName("vid-slides");
        var dotsVid = document.getElementsByClassName("dot-vid");

       
        $('#vidS1')[0].contentWindow.postMessage('"event":"command","func":"' + 'pauseVideo' + '","args":""', '*');
        $('#vidS2')[0].contentWindow.postMessage('"event":"command","func":"' + 'pauseVideo' + '","args":""', '*');
        $('#vidS3')[0].contentWindow.postMessage('"event":"command","func":"' + 'pauseVideo' + '","args":""', '*');
        $('#vidS4')[0].contentWindow.postMessage('"event":"command","func":"' + 'pauseVideo' + '","args":""', '*');
        $('#vidS5')[0].contentWindow.postMessage('"event":"command","func":"' + 'pauseVideo' + '","args":""', '*');
        $('#vidS6')[0].contentWindow.postMessage('"event":"command","func":"' + 'pauseVideo' + '","args":""', '*');
        
        
        if (n > slidesVid.length) slideIndexVid = 1
        if (n < 1) slideIndexVid = slidesVid.length
        for (i = 0; i < slidesVid.length; i++) 
          slidesVid[i].style.display = "none";
        
        for (i = 0; i < dotsVid.length; i++) 
            dotsVid[i].className = dotsVid[i].className.replace(" active-vid", "");
        
        
        slidesVid[slideIndexVid-1].style.display = "block";
        dotsVid[slideIndexVid-1].className += " active-vid";      
        
    </script>

<div class="video-container">
      <h2>Our Demo Sessions</h2>
      <div class="vid-slides">
        <iframe id="vidS1" src="https://www.youtube.com/embed/PGW3lgbGFc8?rel=0&&enablejsapi=1" frameborder="0" enablejsapi allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
      <div class="vid-slides">
        <iframe id="vidS2" src="https://www.youtube.com/embed/oolJWcOhHCw?rel=0&&enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
      <div class="vid-slides">
        <iframe id="vidS3" src="https://www.youtube.com/embed/9MO1aY1xC80?rel=0&&enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
      <div class="vid-slides">
        <iframe id="vidS4" src="https://www.youtube.com/embed/q5jEY92Amgw?rel=0&&enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
      <div class="vid-slides">
        <iframe  id="vidS5" src="https://www.youtube.com/embed/VLUl3NgQY1A?rel=0&&enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
      <div class="vid-slides">
        <iframe id="vidS6" src="https://www.youtube.com/embed/rw8GhqZaNHE?rel=0&&enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>

      <a class="prev-video" onclick="plusSlidesVid(-1)"><</a>
      <a class="next-video" onclick="plusSlidesVid(1)">></a>
      
      <div style="text-align:center">
        <span class="dot-vid" onclick="currentSlideVid(1)"></span> 
        <span class="dot-vid" onclick="currentSlideVid(2)"></span> 
        <span class="dot-vid" onclick="currentSlideVid(3)"></span>
        <span class="dot-vid" onclick="currentSlideVid(4)"></span> 
        <span class="dot-vid" onclick="currentSlideVid(5)"></span> 
        <span class="dot-vid" onclick="currentSlideVid(6)"></span>
      </div> 
    </div>

【参考方案4】：

我遇到了同样的问题，花了几个小时后，我试图在 iframe 中暂停本地/一个域（S3 服务器）中的视频。我知道，如果我们从本地或一个域获取视频而不是使用视频标签，它会提供更多控制，我已经将 iframe 用于 youtube 视频

这里是代码，这里默认控制是暂停

            <video width='200' height='180' src="" style='position:absolute;width:100%;height:100%;left:0' controls>
            </video>

启用自动播放

        <video width='200' height='180' src="" style='position:absolute;width:100%;height:100%;left:0' controls autoplay>
        </video>

这将节省您的时间并为您提供更多控制权

【讨论】：

这不是解决方案，解决方案是明确回答问题