I've been searching for a way to put a looping animation with alpha over top of web content for a few weeks now. The fact that I can't seem to find anyone asking this question or any answers to it makes me think the solution is so mind-numbingly easy that no one needs to ask it.
For an example of this effect go to bonfirestudios.com
They have used this technique multiple times throughout the website, most notably their logo on the main page. They have an animation loop playing over top of their website content. It could just be a video played with a screen blending mode, but my knowledge of html and css is so limited I'm not sure what I should be looking for.
It seems so simple in concept: play a video (with alpha data) on loop, but I can't find anything (or don't know where/how to look specifically) that explains how to achieve this effect. Notably, there are no video controls or anything to otherwise indicate it is a video that's playing. I've checked their code, but my limited understanding of javascript and the like find it hard to know what I'm looking for.
Any help or direction is greatly appreciated, thank you.
It is a video playing (right-click over the animation and you'll see such option as "save video").
The container format is webM (which can contain VP8 or VP9 video codec). This format is from Google and supports transparency.
Related
On YouTube's player, when you hover on progress-bar and traverse your mouse along, you see a series of thumbnails, as well as time-values. This is great, when you're tying to find a scene that you know of visually, and want its time-value.
Whereas, on videojs player, you see only time-values.
(On X-Finity (Comcast, their fast-forward similarly shows rapid series of thumbnails. But, googling seems to reveal that Videojs doesn't have fast-forward. And, I think I'd prefer YouTube's feature over a fast-forward.)
So, bottom-line question is: How to make Videojs player behave like YouTube's?
(I'm thinking this would be difficult to implement for the end-user, in javascript. Detecting that the slider is being moved is no doubt straight-forward, but code to display thumbnails would be the part that I have NO IDEA
how to accomplish.)
Anyone know how to program this?
BrightCove developed a 'thumbnails' plugin that implements this.
See their example coding here:
https://support.brightcove.com/display-thumbnail-previews-plugin#Example
There is more specific discussion on the subject in this forum here:
How to generate video preview thumbnails for use in VideoJS?
My first cut at implementing the notion is here:
https://weasel.firmfriends.us/Private3-BB/
This may well be a long-shot (I suspect some of the feature requests in the project I'm working on might be 'bordering on' pedantic) but is there a simple way - that doesn't involve designing a javascript video player - to lower the amount of time the html5 video player progress bar takes to disappear, once the mouse stops moving?
Yes, you read me right.
I guess what I'm hoping for is, say, an html attribute in the video tag that can be set to a certain amount of milliseconds, or something... I haven't been able to find anything, so I'm guessing the answer is 'no'.
Actually I'm hoping the answer is a straight 'no', but unfortunately I have to ask.
Any help, either way, much appreciated.
Thanks.
So I searched quite some time for an answer to that now, but so far was not able to find any. This is my first time really looking into HTML5 video questions, so please forgive me if my question is totally stupid.
I read quite a few things about this awesome video tag and how it works. However, I only find the info that the controls parameter enables the whole control bar or not, and then it seems to be up to the browser, which controls exactly are shown.
To make even more clear what I am talking about, in Chrome, the full screen Button looks like this:
I found this example here: http://www.w3schools.com/html/html5_video.asp
And as you can (probably) see, the button is there, when you open this site. However, as soon as you click the "Try it yourself" button right below it, the full screen button is not shown anymore, and that is, despite the code seems to be basically the same.
I understand that this is inherent to the browser how it handles it. However, the behaviour is exactly the same in at least Firefox, so I am wondering: What is the logic behind this? Is there any way to "trick" the browser into allowing the fullscreen button?
Some points that I (I think) have already ruled out as the source of the problem:
The actual size of the video being larger than the player
Some CSS tricks like setting the width to a specific value and max-width to 100%
Any ideas?
That is because the video in your second example is inside an iframe, which is quite restrictive as to how you can manipulate the content inside of it.
I imagine adding the allowfullscreen attribute to an iframe would show a different result r.e. video controls.
The idea is that there'll be a 3D animation looping (an idle character, probably rotating) and it will change to another animation when someone hovers the cursor over it (say, the character getting nervous), and another animation when clicked (say, the character startling). But if I use the old way of just changing the video it will look kind of weird because it will change drastically most of the time, how do I make this transition look good?
I'm kind of new to HTML so maybe it's easier than what I think, but I really have no idea of how to achieve this. Thank you in advance for your answers! :)
Two options, make it an actual 3d model (hard) or control the flow of the video and wait for the video to finish before showing the next part/animation. Going down that route would require you to use HTML5 video tags for the video and you would have to look into the javascript API it exposes to control it. It's not terribly hard, but too broad an interface to cover in this answer.
I have a piece of Flash on an HTML page that when you hover over it, it expands out to reveal more information.
There are text links that it expands over, however in everything but IE, when it's not expanded those links are still covered by the Flash making them unclickable.
I have the Flash piece in a separate DIV wmode set to transparent.
I know this is possible to make work but for the life of me, I can only get it to work in IE.
Does anyone have any idea of what I'm missing?
Thanks.
I'm a little confused by what you're looking for, so I'll give you a couple of areas to look into. With luck, one of these will get you going, but otherwise, feel free to ask more questions. I'm a little slow on the uptake sometimes....
First off, by default, most browsers place flash files in the uppermost layer. So, the links that you cannot click are stuck in behind your flash presentation - basically, in the eyes of the browser, you are actually clicking on the flash presentation!
This article has some good information on this:
http://kb2.adobe.com/cps/155/tn_15523.html
But basically, you can use a parameter called WMODE in both the object and embed tags. For example, you could implement it like this:
and then add wmode="transparent" into your embed tag.
However, to make it smooth across all browsers (and to make the code a little easier to read/follow), you should also add some z-index values to your stylesheet.
I hope this helps a bit. If not, remember, I'm slow on the uptake....:-)