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.
Related
I'm developing a web app whose main purpose is streaming dancing videos and I'm facing this problem just in chrome mobile, it works flawlessly in firefox mobile, and in every other desktop browser.
The thing is I need to be able to flip an html5 video element and it works... well, it works until I go fullscreen, then it stays for a few seconds and reverts to the original video (not flipped).
I'm using the css "transform: scaleY(-1)" property.
I've tried setting this property to the video tag, to an upper div, within the video tag and the div which requests fullscreen. And to the div requesting the full screen with no success. If I set scale(); to any positive number between 0 and 1, it seems to do the trick but it doesn't work with negative numbers.
I'm aware of the UA css :not(:root):-webkit-full-screen {transform: none !important}, but it doesn't seem to be the problem. I would rather say it's more related to the way chrome handles video in fullscreen mode.
Any help would be appreciated. If I can't make it work, I'll have to provide another stream with the mirrored version of each video.
Thanks in advance, If you need any examples don't hesitate on asking.
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.
looking to use HTML5 video tag and JS. the aim is to make a video swap from one video to the next very smoothly just like a cut in the movie. I have had a look at the API
http://www.w3.org/TR/html5/video.html#tracklist
if anyone has an idea that would be great. My current plan is to familiarise myself with the API and figuare out how to que up the video for a smooth change. currently sellect a src and then play() causes an ugly white space pause before the next video comes in.
many thanks for looking
Use firefox and make hardware acceleration on. if you have good hardware it should work.
and you can also try this method, imagine if you have 5 videos to play and when you are in the 2nd video you can keep them by the video currently you are playing ,keep them on left and right sides and make them pause. when you move on to the 3nd video you can just get that relevant video and make it play. this method should eliminate any unnecessary lags.
HTML5 videos use a very low amount of CPU, so there's no reason you can't have multiple tags on the page at the same time. I would suggest having them all on the page and then using CSS and JavaScript to transition between them.
You won't be able to make this work on iOS since it doesn't allow playback to initialize without user interaction. The user will have to click to start each video.
Annoying, but that's how Apple rolls.
I'm working on a web page with an animated background. I'm using MooTools to crossfade a series of images that are of a decent size (like 1100px x 750px).
I think since the browser is having to do so much rendering work crossfading these images, when you make the page fullscreen, the crossfade animation will become choppy.
In looking for ways to overcome this, I'm already planning on rewriting the slideshow in the most efficient JavaScript I can muster.
Does anyone have any other ideas on how to have the animated background run smoothly at large browser window sizes?
Crossfade effect is expensive and you'll get very low frames per second at that resolution. Instead of a crossfade I'd try a slide up/down/left/right or wipe effect. I'm a big fan of the jQuery tools Scrollable plugin.
AS you said yourself, this is probably a rendering issue, and not really an issue with the speed of your javascript, especially since there is a performance difference between fullscreen and non-fuulscreen.
I doubt optimizing your js will have any real effect.
Ok, this is pretty weird...
Here's the page in question: http://s289116086.onlinehome.us/lawjournaltv/index.php
The main blue callout background was originally a PNG, but when I applied some jQuery trickery to it (click the numbers in the top right to see what I mean), an ugly white border appeared where the transparency should be. See this screenshot from IE8: http://skitch.com/darkdriving/n62bu/windows-xp-professional
I figured I could sacrifice the quality/flexibility of a PNG and just resaved each of the backgrounds as GIFs and set the matte color to white (for now). Well, I was proven wrong because IE is treating the GIF transparency the same as the original PNGs.
I've read here that the issue with PNGs, Javascript, and IE has something to do with multiple filters can't be applied to one image, but shouldn't GIFs be exempt from this because they lack the Alpha Channel? Is there any way to make this page look similar in IE to Firefox or Webkit browsers?
Thanks in advance!
This is a bug in IE.
No current version of IE supports the opacity CSS proeprty, so jQuery uses the Alpha filter instead. However, filters force the element to be fully opaque, so they don't work orrectly with transparent PNGs.
To use transparent PNGs in semi-transparent elements, the PNGs need to be applied using the AlphaImageLoader filter (even in IE8). For example:
if ($.browser.msie)
$(something).css({
background: 'none',
filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/Folder/Image.png", sizingMethod="scale"),alpha(opacity=100)'
});
(This code works; I'm using it right now)
I basically solved this by loading a different set of images (using PHP) on each page refresh. It's not as dynamic, but my attempts at using the ugly, proprietary CSS filters or other javascript-based plugins were all fruitless. In my eyes, this is clearly one of the biggest bugs I've come across in my time spent hacking away at IE. In fact, I'm suprised it took this long for me to encounter it.
Word to the wise in this case: try to back transparent imagery on a solid color or suffer the consequences in IE.