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.
Related
I'm looking to build a microsite that has a fullscreen 360 video. I've been doing some research but can't seem to find the answer. Is it possible to have a full screen 360 video using JWPlayer, Bitmovin or another HTML5 player with static navigation elements on top if it? I think it would be feasible by changing the z index of the top element but haven't been able to verify this. Thank you.
Bitmovin Player does support this use case either through the Player API (your own controls that control the player through JavaScript) or by modifying the player Skin (available in Bitmovin-Player v7).
So let's say you want to overlay a Play button over the video you would just define a element that then calls .play() on the player instance.
$('.play-button').click(function () {
player.play();
});
The button can then easily be skinned and placed above the player with CSS.
Although changing the viewport is not supported through the API or the Controls. These get handled by touch-controls on the Video element (or the device gyro).
I have clients that ask for animations that will work on ipad. For that it would have to be non flash. They will also want the animations to work in IE. My question is, is there a best practice for this? I am assuming using flash and export with flash html5 export. Sniff out canvas capability and provide a fallback for IE6/7/8 to flash. The reason is its much faster to build complex character animations with the flash IDE timeline and css3 is better performance. Or is it best practice to build everything in something with javascript, like greensock, and build it one timed function after another. Or is there something that will convert flash or canvas animations to javascript for IE users who don't have flash installed and don't support canvas?
Try Adobe Edge.
http://html.adobe.com/edge/animate/
Looks very impressive.
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.
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.
so this is a problem:
when I'm using flash on website, and creating some dialog box which should be over all other elements I use just proper z-index for dialog box (in IE6 it's needed to set transparent wmode for flash). But flash programmer don't want to give me flash file and suggested to use iframe linking to his website.
on my website there is iframe
in iframe there is a flash object
when showing dialog box flash is over dialogbox (not depending of z-index and even wmode that I set by firebug)
I can't get touch with flash developer (anyway he sad that flash object will still remain on his website) so maybe you have any solution?
and weird thing:
- on some pc's it's working properly, one some not. what can be the reason?
Because Flash is being rendered by a plugin, I don't think changes made to the wmode property in Firebug will have immediate effect. You'll need to add the wmode="transparent" in the source and reload the page.