I’ve got some images composed in Adobe Photoshop that contain a background layer and an object in a foreground layer. These images I would like to use in webp format in a website project:
The image should be displayed with transparency — i.e. the background of the image should be transparent, showing the underlying color of the html element — but when hovered over the image, the transparency should be disabled and therefore the background layer of the image is shown.
How can this reliably be done with JavaScript or any other web technology?
Note: I would like to avoid uploading two image versions
I am looking for an advice to do some “animation” on my home page on a WordPress website,
I have a gif playing once on my home page,
I would like to change the background color, only at a specific frame of the gif. When the gif hit its 80 frame, the background should switch from white to black.
Can it be done with javascript ?
Could you direct me on how to do that ?
Thank you very much
A gif with 80 frames or more is not really good for your website. I strongly recommend using a plugin like Slider Revolution to create animations or use other methods like Animate It!
A video would be another possible option too. You can convert your gif into video with the help of some online tools.
I am currently working on a project for chromecast and ran into a problem.
When I am loading a very short video, the (videoplayer?) screen goes black while loading.
All the video's backgrounds are white and I am switching videos quite often. Therefor, it would look a lot nicer with a white loading background.
I've tried creating a white and letting it fade out to opacity 0 on event listeners (played, loaded,..). Tried the same with a bit of a delay using setTimeout(..), but there always remains at least a short "pop of black" when switching to the actual video. Also using video's "poster" attribute (by just using a white image..) doesn't prevent this.Furthermore, the natural things like background-color or color attribute's of the video tag are all set to #FFFFFF via css.
Is there any actual way to do so, which I didnt think of yet?
Basically it only needs to work on Chrome (i think chromecast is using some derivative, webkit thing).
<canvas id="whiteoverlay"></canvas>
<video id="receiverVideoElement" loop poster="white.png"></video>
I'd love if you have some kind of tipp for me or reason why it will never work.
Ok so I need to have a video load full screen as an intro to a website. Can I do this in HTML5 or do I need to use flash?
Can someone please explain or point me to some good resources on how to do this.
I need to website to load and the 5 second clip to play through with no player controls or anything and then go straight through to the main site.
Exactly like this example: http://www.firecrackerfilms.com/
Thanks :)
If you need to set a background video try this
Use position:fixed on the video, set it to 100% width/height, and add a negative z-index on it so it appears behind everything.
If you look at VideoJS, the controls are just html elements.
HTML
<video id="background" src="video.mp4" autoplay>
CSS
#video_background {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1000;
}
The page in your example isn't full-screen, nor is it even full-viewport, it's a small video with a black background that blends into the page's black background. If you can get away with doing that, that will work.
If you care, you will never be able to auto-play an HTML5 video intro on iPad, because iOS inhibits autoload and autoplay unless they are triggered by a finger touching the screen. But then again, it can't play Flash anyway.
If you want an HTML5 video to be full-viewport, for, say, a 16:9 video viewed in a 4:3 monitor, you will make the video full-height and lose the sides of the video. Similarly for the reverse case. This will maintain the video's aspect ratio with the caveat that you lose part of the video content to hidden overflow.
If you don't care about aspect ratio, you can make the video height: 100% and width: 100%, as #coder suggests.
For this reason, it's probably easier to go with what they did on your example site, and make the video blend into the background.
Here is a nice thread about html5 vs flash video and the pros and cons:
HTML 5 <video> tag vs Flash video. What are the pros and cons?
Personally I would prefer html5 because you can watch videos on almost every device type like iphone or ipad and so on).
But html5 is not as powerful as flash videos.
You should also consider that some users have disabled javascript or flash configuration in their browser.
I don't think real fullscreen is possible with a user requesting it. At least in flash it's not possible.
If you mean to fill the whole viewport then it can be done by using css to size the video element with the caveat that if you set width and height to something that doesn't match the aspect ratio of the video, the video is not stretched to fill the box. Instead, the video retains the correct aspect ratio and is letterboxed inside the video element. The video will be rendered as large as possible inside the video element while retaining the aspect ratio.
I am using Quick time via javascript so that I can play video on my web browser. I want to resize the video so that it fits the size of the DIV. The problem is that when the player launches the video the size of the DIV remains the same but the player gets out of the DIV. I want the size of the DIV remain the same doesnt matter if the player can not be fully shown or resized.
How are you setting the size of the player? If you set the <object> width and height attributes to a certain number of pixels it should respect that. Whilst you can set width: 100%; with CSS, if that makes it resize with a liquid layout many plugins won't resize themselves after loading.
Unless you absolutely must play back old-school .mov files, I would strongly recommend avoiding the embedded video players today, and especially QuickTime which many Windows users will not have. Video on the web today is primarily done with Flash players. HTML5 <video> with fallback to Flash is nice to have for the newer browsers.