IFrame HTML5 keyboard focus, - javascript

I'm making a game in HTML5 canvas, and I need it to be multiplayer so I am using node.js to accomplish this. But since my website is run a different server I have had to find a way to load the app on a page, on that server, I have used HTML IFrame to do that, which works fine and looks good except it doesn't get keyboard focus.
Is there a simple js script I can run to give it focus, either on the front end og inside the iframe?
<iframe src="mysite.com" height=750 width=1000 frameborder = 0 scrolling = "no" name="myFrame">
<p>Your browser does not support iframes.</p>
</iframe>
I have seen there is a Jquery solution, but I hopped I could get around it, since the simple HTML is working well.

Related

Can't get html5 video in a webpage to loop or autoplay on android browser?

The final device I'll be putting this on is an android TV box, but I'm testing on my galaxy s5. Both are having the same issue.
I'm using Full Screen Browser by Klurige, and I originally had some GIF's at the bottom of the page that I wanted to loop, but they ended up being to clunky and big to run efficiently on the TVbox, so I decided to switch over to html5. I've tried with WEBM and MP4, both are doing the same thing.
I have the autoplay and loop attributes in the html5 video as such:
<video id="zach" loop autoplay class="picture"><source src="P-Zach.webm">Error</video>
Neither works be default in the browser. I just see a gray video icon. I can't even click to start it.
I've tried formatting in different ways and everything mentioned on the broken-links.com blog post people keep pointing to. I've tried javascript .play() options. None do anything.
If I add the controls attribute to the video, I can play the video, so I know the video file works, but it still won't loop.
Any help?
Okay, so it looks like it has something to do with android blocking webview from letting javascript control the html5 video.
That, in combination with the lack of native support for loop or autoplay attributes made me ditch fullscreen browser and switch to the only browser I could find that DID support those - Firefox.
I used an app called Ful!screen (or something like that) to remove the notification bar, loaded firefox with the webpage (with html5 playing and looping perfectly) and scrolled down slightly to hide the top bar.
Tada! Fullscreen browser with html5 video instead of GIFs.
Solved my own issue another way.

HTML flicker when above VMR9

I'm working on a web app with an ActiveX that decodes video with FFMPEG and renders the video using VMR9.
for some reason, each time I'm trying to put some HTML (even with IFrame) causes the panel to flicker.
How can I eliminate the flickering?
Maybe it is related to how I initialize the VMR9.
Thanks
Does the video play normal on your computer?
And for a webapp i recommend to decode in h.264.

How do you completely unload a swf (sounds and all) using javascript?

So, I have web page that uses javascript to let a user select different audio files to listen to (using this player: http://www.macloo.com/examples/audio_player/) which works great in every browser except for any version of IE. After the audio starts playing I can't figure out a programmatic way to make the audio stop playing after the user clicks on another item to listen to. I don't have access to the source of the swf so I'm trying to use javascript to do this. I went so far as to replace the entire body of the page - $("body").html("blank") - but it still played the audio loaded into the swf in it's entirety.
Is there any way I can completely remove a swf from a page (sound and all) just using javascript?
You could try
location.href = location.href;
That will completely reload the page.
Have you tried?
$('object').remove();
Well, you may need to use External-interface and call flash method from javascript and that flash method will remove the swf file. If you are using Action-Script 3 with Flash Player 10 then you can use unloadAndStop() method. This method will unload your swf and will remove all its events and sounds etc. it is better to use unloadAndStop() method than unload() method.
And if you want to hide flash from server-page , you have many ways , call page refresh with a variable passed in query string , based on that variable value , you can hide/show your swf file. If you do want to do it with JavaScript then take your swf in Div and hide that Div..
Well, I tried all of the solutions proposed and they didn't work across all browsers for me. :( What I ended up doing is loading up the flash content in an iframe - when I changed the src of that it would completely and reliably kill the audio that was playing. I think this might have been because the audio appeared to be streaming? Ugh, anyway - iframe time!

Iframe size manipulation

Is there a way to make the Iframe request an external website as if it is a mobile device, so the content returned will have a small dimension etc?
I am displaying external websites in iframes, using width and height attributes
<iframe src="http://marketwatch.com" width="300px" height="300px" ></iframe>
but because the browser is not a mobile browser, the content returned is tailored to normal browser, and I end up having scrollbars.
If the content returned is that for a mobile device, then no more scrollbars etc.
It depends on how the website detects if it should be a mobile browser.
If the site has a mobile-specific URL you can go to that always renders the mobile site, then just go to that.
If it looks at the user-agent string and does things like that then you might not be able to do it. I think a lot will detect based on the user agent, but just redirect to a mobile version of the site though. If you know the mobile version of the site then you can just use that and it should be fine.
Of course, this requires you to know before hand what sites you want to use. Not sure if there's a generic solution.

Resizing of AS-based Flash app from FireFox vs. IE

I have put in some controls to allow users to resize my Flash app via Javascript:
document.getElementById("flashApp").height*=1.25;
document.getElementById("flashApp").width*=1.25;
This works great in IE/Safari, but is ignored in Firefox. I know it's talking the the flash app and gets and sets the height/width vars ok, but the same code run in FireFox ignores the scaling. (It's not the DOC spec issue)
Any thoughts?
Bill
Make sure you've got flashApp set in both embed and object tags. One browser might look for the id in the embed tag, while another uses object.

Categories

Resources