How can I capture and stream video of an iframe? - javascript

On a website I have an iframe that loads my game (from another domain), I would like to capture and stream it. How can I achieve this? just the contents of this iframe as the user interact with it, not the entire screen or page.
Here's what I tried:
using getDisplayMedia() from Chromium/Mozilla browser api,
adding feature-policy: to the HTTP header and allow attribute is what I thought would do the trick but what happened is that it just allows you to use the Screen Capture API which does not seem to support capturing the iframe contents as video.
second, I tried using iframe has allow='displaycapture' but when I call getDisplayUserMedia() the iframe does not show up.
My last ditched desperate attempt is a browser extension that can capture the iframe contents somehow as video stream but that seems tough since its not like the iframe screen output is being streamed as a binary somewhere deep inside the chromium engine.

Related

hide html attribute in inspection browsers

i want to create a video learning site.
I want people can't get to download my videos.
how to hide element attribute in inspection browsers because people can't get the video URL in inspection browsers
how to disable download button in video element
You can't hide a HTML element from the browser. You could create a seperate website which host the video's but doesn't show the real link to the video (proxy website) and only allow the ip-address of the "front-end" website to access those videos.
It's simply not possible. It will be visible in the HTML source code anyways. Only server-side code won't appear in the page's source on client-side.
Sidenote: Even if you could hide the video tag or the video's URL in the source, the browser should download the video itself which can be found in Chrome (or other browser's) Developer Console.

How can I show the same HTML 5 YOUTUBE Video twice on a website without loading it twice?

How can I show the same HTML5 YOUTUBE Video twice on a website without loading it twice?
Here you are taught to display a same html 5 video twice without having to load twice. But I want to know how to do it with a youtube video, using the IFRAME tag. The link is taught using the canvas, but I can not do the same with the iframe. Can you duplicate the video even with the iframe? Or is there a way to "catch" the iframe video tag? (I've tried, but it has an "access denied" error). This might help, too.
This is just an example, but I wanted to do something like this:
Original youtube video.png
My "site" with 1 youtube video and several canvas.png
I wanted to take this video is to post several in my site, enabling multiple simultaneous playbacks. As this would take a lot of the internet, I wanted to get the current frame of the original video simultaneously and place them on several canvases, this link teaches you to do just that, but using videos (< video> tag). I want to do this using youtube videos.
I want all players to play / pause at the same time, as if they were copying each other
You can't.
At least, not legitimately. There is no provision in the YouTube Iframe API for granting you access to the underlying video element.

How to customize the way your site appears in an iframe

I noticed that when you embed sites like Youtube.com and Streamble.com, only the video appears in the iframe. How do they do that? Shouldn't an iframe load the whole webpage?
What I've tried:
Initially I thought you're supposed to wrap the mp4 file in og:video tags, but that didn't work.
How do they do that? By only serving up the video. Look at the url in the src attribute on the iframe. Load it up on a browser (you'll need to add http to the front of it) and you'll get only the video content.

Extremely weird behavior: IE11 seems to create an invisible tab when scripts are blocked and then allowed - how to fix it?

IE at its best:
There is a USB stick with an HTML document on it. When the user opens it in IE11 and scripts are blocked, a prompt appears to allow those scripts to run.
When you click on allow, the site seems to get reloaded, but it also looks like a new tab is opened/ closed.
As soon as JS is enabled, you get redirected to an online version of the site.
Now, on the site there is a video which starts autoplaying after 10 seconds. But in IE11, a few seconds later the same video starts playing parallely so you here the sound twice.
When you check the DOM and remove the <video> tag (there is only 1), one video stops playing. The one that started later though keeps playing. Even when I visit another website the video keeps playing.
Only closing the browser stops the video.
This behaviour does not occur when I allow scripts to be executed directly.
Using video.js and jQuery.
Any ideas?
HTML Elements do not require JavaScript and/or ActiveX for serving their content. They are automated.
After the page is loaded and rendered as plain HTML, allowing JavaScript, will trigger DOM construction and re-render the content. However, DOM may duplicate the instance of media object and start running a parallel stream, that is, a dupe of the stream already initiated by HTML automation. !Not visible by DOM.
So, there's no new tab being opened or failing to close, it's simply an HTML Automated instance handling the initial stream.
And this will happen only when running HTML pages locally.
Finally:
The best way of avoiding this - expected but unwanted behavior - would be to:
Set the Video Element "autoplay" property to "false".
p.s.:
About the following issue of which you say: "As soon as JS is enabled, you get redirected to an online version of the site."
That's something no browser can or will do for you on its own. So you'll have to remove the code that is triggering the browser navigation to the online content yourself.
Good luck.

playing audio on a web page without interruption by page reload

I want to create a web page that contains an (Flex/Flash) audio player that doesnt get reloaded when the page reloads. Currently, i am popping out the player in a new window. Please check http://www.paadal.com to see it in action.
What i want to achieve is to have the player in the same window, but it shouldnt reload. I am sure many of you will say use AJAX to prevent reloading of page like songza.fm. But the problem is search engines cannot index AJAX applications. This is true for a full fledged Flex app as well.
Is there any way to have the player in the same window? but not reload.
Thanks
Just add Ajax to existing page hierarchy, change each link to ajax call after page load (with javascript) and only reload content of some container. If you do it that way, search engines (and users without JS, with mobile phones for example) can access your page, and users with JS enabled can get bonus as music player
No, you cannot have a single element exempt from a page-reload, not without loading portions of the page via asynchronous calls to the server. When a window refreshes, it flushes the DOM out, including your mp3 player.
saying "searching engines cannot index AJAX apps" is totally dependent on how the application is written, there are plenty of ways to write an application that is still spider-able and plenty of other techniques for indexing (like www.sitemaps.org implimented by most major search vendors)
You can not maintain anything in a browsers memory after leaving the page (which is implied by a page reload)
For your use, it sounds like using old HTML frames/framesets could easily solve your issue, with a hidden frame containing your audio and the rest of your site in the main frame window.
It depends on the design of your website. You can us a standard html background sound, embedded media player or flash player on your main web page. The others pages will have to be used as a single pop up layered into each other. this will cause your music from the main page to play and allow you to navigate throughout your website because you linked the popup pages. To return to the main page use a close window script .

Categories