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

时间:2015-06-24 11:23:42

标签: javascript jquery html iframe

这是视频

if(Name.HasChanged)
{
    if(string.IsNullOrEmpty(Name.NewValue))
        Name.DiscardChanged();
}

我想停止或暂停它,这可能吗?我只想坚持使用iframe

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

js / jquery中的任何函数都是相同的吗?

3 个答案:

答案 0 :(得分:1)

是的,您可以从iframe访问您的视频,但这仅在帧源位于同一域时才有效。如果它来自不同的域,跨域脚本(XSS)保护将启动。

我认为您正在播放来自您网域的视频,(嵌入式iframe网址域与网页域大致相同)。

测试:

去这里: 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源与您的域不同,则无法控制来自帧的视频。以上是跨站点脚本编写不会影响您时如何控制视频。

答案 1 :(得分:0)

我正在使用此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>

答案 2 :(得分:-2)

我遇到了同样的问题,我花了几个小时后试图在iframe暂停我本地/一个域(S3服务器)的视频。我知道如果我们从本地或一个域获取视频而不是我们使用视频标记,它会提供更多控件,我已经为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>
  

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