How to programmatically pause Azure Media Player embedded in iframe

Question

I'm embedding videos that I've uploaded to Azure and indexed using the Video Indexer, but running into a problem with controlling playback programmatically. I found an example of how to seek to a certain point in the video using the following code:

const payload = {
	time: currentStartTime,
    origin: "https://www.videoindexer.ai",
};
videoPlayerFrame.currentTime = currentStartTime;
if ("postMessage" in window) {
	videoPlayerFrame.contentWindow.postMessage(payload, payload.origin);
}

This works great for seeking to specific points in the video. I can't figure out how to use postMessage to send a pause command though. Based on my investigation so far, it seems like the window embedded in the iframe has a message listener that is then calling the azure media player's API, and I see the AMP has a pause function in its API. At this point I just can't find any documentation on whether I'm doing something wrong or whether this is possible or not.

This is an example of the kind of thing I've tried so far:

if ("postMessage" in window) {
	videoPlayerFrame.contentWindow.postMessage('pause', 'https://www.videoindexer.ai');
}

Answer 1

@Reed Johnson Thanks for reaching out to us, the Azure Media Player doesn't directly support the 'pause' command through postMessage. The postMessage feature is primarily designed to support seeking, as you've seen with your time update code.

That said, you might be able to work around this limitation by using the HTML5 video player's standard methods. The 'contentWindow' property of an iframe returns the Window object of an iframe element, which means you can theoretically access the video element and use its 'pause' method.

Here's an example of how you might be able to do this:

const iframe = document.querySelector('iframe');  
const innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;  
const videoElement = innerDoc.getElementsByTagName('video')[0];  
  
if (videoElement) {  
  videoElement.pause();  
}  

This code gets the iframe from your page, gets the document within the iframe, then looks for the first video element in that document. If it finds a video element, it tries to pause it.

Please note that this method may not work if the iframe content is hosted on a different domain than your page due to same-origin policy restrictions. If the video player is on a different domain, the browser will block your script from accessing the content inside the iframe for security reasons.

If you're looking to have more control over the video playback, you might want to consider using Azure Media Player directly in your application instead of embedding it in an iframe. This would allow you to use all of the AMP API methods directly.

Please kindly let us know how it works, I hope it helps.

Regards,

Yutong

-Please kindly accept the answer and vote 'Yes' if you feel helpful, thanks a lot.