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

Question

这是视频

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

我想在它上面停止或暂停，这可行吗？只想停留在iframe上。是否有js/jquery中的任何功能可以实现相同的效果？

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

- nlper

---

当iframe不在同一域上时，您无法使用脚本访问它（请搜索跨站点脚本攻击XSS）。我曾尝试通过触发iFrame上的空格键事件来停止视频，但我无法使其正常工作，最终放弃了。 - Michiel

Answer 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源与您的域不同，则无法从帧控制视频。以上是在跨站脚本攻击不影响您时如何控制视频的方法。

- SilentTremor

Answer 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++;
}

- ncs ncs

---

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

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

- enigmatic_fool

Answer 4

我遇到了同样的问题，我试图在iframe中从我的本地/一个域（S3服务器）暂停视频，在花费数小时后。我知道如果我们从本地或一个域获取视频，则使用video标记，它提供更多控件，而我已经为YouTube视频使用了iframe

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

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

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

- Vinay Kumar

---

那不是解决方案，解决方案应该是明确回答问题。 - Yash Karanke