Is it possible to stop/pause video on iframe?

问题:

This is the video

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

I want to do stop or pause on it, is that possible? want to stick on iframe only

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

any function in js/jquery for the same?

回答1:

Yes you can access your video from iframe, but this will work only if the frame source is on the same domain. If it is from a different domain, cross-site-scripting (XSS) protection will kick in.

I suppose you are playing videos from your domain, (embedded iframe url domain most be the same with the page domain).

Testing:

go here: http://cache4.asset-cache.net/

and run this code in console:

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

The conclusion if your iframe source is different than your domain you cannot control video from frame. Above is how to control the video when cross site scripting does not afect you.

回答2:

I faced the same issue, I was trying to pause the videos from my local/one domain (S3 server) in iframe, after spending the hours. I get to know that if we are getting videos from local or one domain than we use video tag , it gives more controls and I have used iframe for youtube videos

here the code, here the default control is pause

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

To enable auto play

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

This will save your time and give you more controls