I am trying to embed a flash movie (.flv) into a webpage with a transparent background.
Requirements:
- Flv runs in transparent mode - I must be able to view html contents below.
- Movie does not auto play
- Movie is contained in a div and positionend absolutely using CSS
- No video controls or overlays, you shouldn't know it's an flv
- On load Movie is hidden
- Using jQuery, I click an image link to show and play the video, clicking it again stops and hides the video - vice versa
I have tried using Longtail Video Player with swfobject.js and javascript controls but no joy. Video is not transparent and controls with a click to play still feature.
Am I overcomplicating what appears to be quite a simple task.
I happy to explore any implementation.
Adobe flash embed parameters have been set correctly and wmode = transparent.
Any help would be greatly appreciated.
Cheers
Paul
This will get you a transparent overlay in flash. Its a pretty good set of code.
http://code.google.com/p/swfobject/
SWFObject Examples
The example given above is what you need for the bare bones use of SWFObject, but what if you want to use some of the other parameters the Flash plug-in has to offer? SWFObject makes it very easy to add any extra parameter you may need. The examples below are a number of different methods you may wish to use to embed your Flash content.
A simple example adding a few extra parameters
<script type="text/javascript">
var so = new SWFObject("movie.swf", "mymovie", "200", "100%", "7", "#336699");
so.addParam("quality", "low");
so.addParam("wmode", "transparent");
so.addParam("salign", "t");
so.write("flashcontent");
</script>
<div id="flashcontent"><!--put a place holder image in here.--></div>
http://blog.deconcept.com/swfobject/
EDIT:
THANKS TO Unreality: There has been an update in the code library you can now access it here: http://www.code.google.com/p/swfobject
Related
I study graphics as one of my subjects at school. Currently, my task is to make a website for a party so I have started to create the homepage. The home page has four balloons on it and when you roll over them they pop. But, what I also want them to do is to play a balloon popping sound effect when you roll over them and they pop.
However, I cant work out what the HTML would be to achieve this.
The website: partybox.businesscatalyst.com
This cannot be done efficiently using only HTML, as it will require the use of <audio> as in
<audio autoplay>
<source src="file.wav" type="audio/wav"><!--file.wav will replace your sound file with the pop effect-->
</audio>
However, the <audio> still required to be started (in case of controls) or dynamically created (in case of autoplay) - which will still require JavaScript.
A simpler JavaScript method would be like - on your onclick or onhover function, simply add this JavaScript Code:
var sound = new Audio("file.wav"); //file.wav will replace your sound file with the pop effect
sound.play(); //Play the sound
I'm a begginer, and I need your help :)
I have a simple landing page, made from one long jpg + image mapping.
I've embedded a youtube video in a specific location on the image as an object command but I want to show a different image until it is pressed (an image with a play button, for example).
The page will be shown on a facebook tab as well.
Can any1 help me?
P.S - Sorry if I have grammar mistakes :)
Thanks!
Pretty sure a placeholder can be implemented via the Youtube API or you could take a look at this, How to add a splash screen/placeholder image for a YouTube video
Using JavaScript: You could add a Listener to the image so once it is pressed it loads a video.
var image = new Image(); //Image with playbutton
//Then load your Video in the EventListener
image.onclick("load", function() {
alert("loaded");
The function() method will contain the code to run your video
This is a good link about EventListeners http://idratherbewriting.com/javascript/events-and-listeners-javascript/
I have made a flash as3 project in adobe flash pro with the dimensions 20px x 150px.
i would like to ceep it this size, but the problem is that my application needs to ask for the MICROPHONE premissions
( like in the image )
but this only happens if the flash object is big enough.
are there any workarounds with maybe the "overflow = visible" method or something ?
thx for any help
Here are a couple of options:
Temporarily increase the dimensions of the SWF in HTML. I've never done this, but I imagine it would work and is the most simplest solution.
Use wmode="transparent" or wmode="opaque" in your embed code. In both of these modes you can layer HTML on top of or underneath the Flash object. The SWF should be sized so that it is big enough to display the dialog. When the dialog is not visible, you can hide portions of the Flash app by covering them with HTML.
I've used the 2nd option successfully, not for this purpose, but for showing some HTML elements (arrow images and text) to guide the user through these "allow" camera/microphone dialogs.
For both of these options to work, you need to be able to detect when the user has closed the dialog. Though there is no official Flash API for doing this, however, there are some good work arounds for doing that.
Does anyone know if html5 video allows objects like buttons, menu, etc connected to the timeline?
Youtube flash player do this: in specific moment, show an object (banner, links, comments) over the video for defined seconds.
thanks
Yes and no,
It's possible to create very interactive video-based presentations using html5 video objects however it requires a lot more than just the video object itself. You can nest video into a canvas object then mess with the actual video image frames, you can overlay any visual html element on top of the video object itself then animate these, you can control the video playback with buttons, click events etc. You can even have the video object control the rest of the page with time-based listeners.
Popcorn.js is really really good and easy to learn, allowing you to do all of what you mentioned.
http://popcornjs.org
http://popcornjs.org/demos
It's not part of the HTML5 video standard, but it's easy to implement manually by wiring up some scripting to the progress event. By looking at the currentTime property of the video object you can decide when to show/hide additional elements.
eg showing an element on top of a video between 1 and 2 seconds into a video:
<video id="v">...</div>
<div id="overlay" style="position: relative; top: -80px;">HELLO</div>
<script type="text/javascript">
var overlay= document.getElementById('overlay');
var video= document.getElementById('v');
video.addEventListener('progress', function() {
var show= video.currentTime>=1 && video.currentTime<2;
overlay.style.visibility= show? 'visible' : 'hidden';
}, false);
</script>
X2TV (www.x2.tv) has a drag and drop studio where you can overlay icons and additional content within the HTML5 layer.
In case you woul like to use a more generic framework https://github.com/nise/vi-two could be interesting for you.
I would like to tag some parts on screen (like tagging people's head in photos in Facebook) in video (in certain second). Videos are in FLV format, video on demand. Is there any library that I can use to tag the video? or I can only use a cue point?
Environment:
Flash Media Server
Flash CS4 (ActionScript 3)
Other information can be further given. Ask me.
I don't know if there is a library (which doesn't mean there isn't any), but you could do it with cuepoints:
Create cuepoints in your video (either on encoding, or put them in on runtime via actionscript cuepoints) that have x, y, width, height as params, maybe also a duration and description.
Type for encoding cuepoints probably would be navigation, so you can get the nearest Cuepoint on seeking.
Then you need actionscript to listen for your cuepoints, and then draw those rectangles as an overlay over the video.
There is NO direct solution of this issue. I end up have to record the time in a Flash embedding the movie player and make tagging actions there.