I have 3D game made in Unity3D. After some time have been spent, it works in flash correctly.
Currently i need to find a way to display HTML content over my flash.
wmode=opaque, wmode=transparent have failed, because stage3d, which unity uses to render 3d content, requires wmode=direct.
I have tried other hacks like using iframe, but this works different in all browsers(correct behaviour only under chrome with release flash player)
Now i'm thinking about get screenshot of flash stage from action script, pass this data to javascript, render this on canvas, hide flash, and move custom HTML element over this.
All this looks so sad, am i missing some important information?
if you use flash and want to render the scene in an canvas :).... better use only flash, don't do that :) .. and strange why it doesn't work for you because I often put a div above the flash content and it works.
Related
Basically, I am trying to create an HTML5 canvas to overlay an embedded 3rd party flash application. I cannot set the flash's wmode as I have no control over the flash itself, I was wondering if it was possible to work around this, and position a canvas (or anything for that matter) visibly in front of the flash element.
I understand that this is probably not possible, but I would appreciate any feedback, even if it's just telling me that what I'm asking is impossible.
I'm working with a DirectShow application that exports as a Firefox plugin for video streaming.
To the best of my knowledge, it seems as though the plugin is being rendered on a separate window from the web page. I'd like to edit the application to allow html elements over the plugin much like flash allows with wmode='opaque' or 'transparent'. Another option that would work is to pass mouse events through the application (such as mouse move and mouse down).
I've been reading up on put_MessageDrain and put_Owner, but I'm not sure how to apply these to the application or if they will work.
I'm also aware that iframe shimming may work, but since I have access to the source code of the application I'd like to add the functionality directly rather than use a work around. Is iframe shimming my best option? It seems like the easiest option.
The application currently uses Windowless mode and is always on top of everything else on the web page.
The way video is displayed with DirectShow video renderers, you cannot make it transparent without providing your own video renderer filter, or custom allocator/presenter object for one of the standard video renderers. DirectShow renderers display video with DirectDraw or Direct3D surface which stands alone from hosting window and is not interacting with host in a way supposed to get you combined picture with transparent video and something else as well.
I've been reading up on put_MessageDrain and put_Owner
These are for Windowed mode, you seem to use Windowless which assumes that you are providing a hosting window and rectangle to cover opaquely. Renderless, the third mode VMR-7/9 and EVR offer you is the one where you provide allocator/presenter and override the presentation.
Windows SDK (for some you might need to look for an older version, not the latest) provides with samples: Renderless, VMR9Allocator, EVRPresenter which demo the renderless mode.
I'm working on a project of visualising audio into canvas, so far I understood that I would have to use AudioAPI, something like SoundManager 2 etc. which has a flash fallback. There is one thing tho, I don't wan't to use flash fallbacks (at the moment I would only want this visualisation to work in modern browsers with support of HTML5 audio), therefore I'm not sure if I should use it. Is it possible to achieve cross browser visualisation without any external resources? or using SoundManager 2, but somehow without flash fall back? I'm new to this, could you please outline steps that I need to take in order to proceed with project.
Nope. No cross-browser way to do this if you don't want a Flash fallback. Chrome and Safari have the Web Audio API and Firefox has the Audio Data API (for now, it's been deprecated), but IE doesn't currently have any way to manipulate audio without plugins.
I want to create a html5 page with video and an image overlay - meaning some image that is showing over the video. This overlay will in time also be text in some cases. Is there any good way to achieve this?
What I've been trying this far is to use a <video> tag to hold the video, and draw the image into a canvas, which I place on top of the video. To show it I need to move the video back setting z-index to -1, but then the video controls won't work. Maybe there's a solution to make the controls work again, but I'm not sure if I'm on the right path here.. I am assuming there is a recommended solution to this. Maybe using a canvas which I fill both video and overlay into. Or something completely different?
Note: I edited the question as it originally pointed in the wrong direction regarding what was important here. I'd love to have a solution which makes this work seamlessly in fullscreen and everything, but the focus is: What is the appropriate way to place items on top of video - in html5?
Achieving what you want and have it supported in out-of-the-box fullscreen is problematic. Fullscreen support in html5 video is only optional and in any way not accesible thorugh the API (See discussion here).
Even if you used the built in fullscreen there is no way you could inject content above it unless you are willing to change the video file itself on the server in runtime.
what you can do however (And what I did in a similar case) is to implement your own video controls, run the video tag without the built in controls, and have fun with overlaying as many layers as you want on top of your now out of focus video.
As for fullscreen, you can implement some sort of custom background fullscreen similar to what's been done here
edit: The problem you're having by placing a canvas over the video is blocking the built in html video controls. My suggestion is to implement your own video controls (play, pause, volume, seeker, etc.) using html and javascript calling the video API. You can probably even make it prettier then the ugly built in controls.
Your controls can be contained in a layer above the overlaid canvas, and thus the video will be shown, above it the overlay and above it your control set.
You can read a little about implementing your own controls here or here
And anyway this can easily be much better than this.
I have a page where the user can click a button to play word pronunciation,
you can take a loot at http://japaneseclass.jp/note/open/351
Right now, the page uses flash player, and it is really heavy to load about 100 flash sound button on a single page.
I have already tried other flash player such as 1bit player, and they are all the same (heavy)
What are some other alternatives?
I tried to use embed, and it is also heavy.
What I have in mind is to use img button and use javascript to play it, but I dont know how.
You could create one flash audio player that sits somewhere on the page unseen, and make your buttons call it using ExternalInterface, passing a reference to the mp3 you want to play. That way the actual media player is very small, and it loads in the audio tracks on demand.