Background Video
Permalink Browser Info Environment
Hi James,
I would like to share some things I found using a video background that may be helpful to you and my fellow users of your theme.
Video Size:
I started with a video file that was far too large (14Mb). I was finally able to reduce it to 4Mb to get fairly good results by doing the following:.
- Clip length to about 25 sec
- Reduce resolution to 640x400
- Eliminate (not mute) audio track
- Encode using MP4/H264
Android Phone:
I you remember I reported that I had trouble viewing the video on my android phone (Samsung Grand Prime). I have since specified an IOS fallback image and as stated above reduced the video size to get the following results on several browsers.
Chrome - When the video file size is too large a black background is displayed. The 4Mb video will display but doesn't play smoothly. It seems to use the IOS fallback image if available. Perhaps better results could be achieved on Chrome using WebM/V8 encoding?
Mozilla - On Mozilla an unclickable play button is displayed instead of the video. I suppose it's unclickable because the other content is on top and so the clicks never reach the button.
AdBlock - The AdBlock browser, I believe is a Mozilla variant with AdBlock plus rolled in. It plays the 4Mb video perfectly. So probably there is a secret setting that would make Mozilla work also.
Samsung - The default Samsung browser just displays a black background instead of the video.
Future Enhancements:
Here are a couple of ideas that may be worth considering for future versions.
1. Documentation - In addition to stating that the theme automatically adjusts to resolution of the video and images it would be useful to have some recommendations, guidelines, or tips for each of the target areas.
2. Video Load - While browsing the net for recommended background video resolutions I came a cross an interesting implementation in which a short video was loaded and played first. While it was playing a second longer looping video loaded and then played after the first. I don't know if something like this is possible in Concrete but it would be cool if it were.
I would like to share some things I found using a video background that may be helpful to you and my fellow users of your theme.
Video Size:
I started with a video file that was far too large (14Mb). I was finally able to reduce it to 4Mb to get fairly good results by doing the following:.
- Clip length to about 25 sec
- Reduce resolution to 640x400
- Eliminate (not mute) audio track
- Encode using MP4/H264
Android Phone:
I you remember I reported that I had trouble viewing the video on my android phone (Samsung Grand Prime). I have since specified an IOS fallback image and as stated above reduced the video size to get the following results on several browsers.
Chrome - When the video file size is too large a black background is displayed. The 4Mb video will display but doesn't play smoothly. It seems to use the IOS fallback image if available. Perhaps better results could be achieved on Chrome using WebM/V8 encoding?
Mozilla - On Mozilla an unclickable play button is displayed instead of the video. I suppose it's unclickable because the other content is on top and so the clicks never reach the button.
AdBlock - The AdBlock browser, I believe is a Mozilla variant with AdBlock plus rolled in. It plays the 4Mb video perfectly. So probably there is a secret setting that would make Mozilla work also.
Samsung - The default Samsung browser just displays a black background instead of the video.
Future Enhancements:
Here are a couple of ideas that may be worth considering for future versions.
1. Documentation - In addition to stating that the theme automatically adjusts to resolution of the video and images it would be useful to have some recommendations, guidelines, or tips for each of the target areas.
2. Video Load - While browsing the net for recommended background video resolutions I came a cross an interesting implementation in which a short video was loaded and played first. While it was playing a second longer looping video loaded and then played after the first. I don't know if something like this is possible in Concrete but it would be cool if it were.
| Type: | Discussion |
|---|---|
| Status: | In Progress |
James,
I have come across some more info on the web that may be helpful to anyone using background video. In this short article the authors talks about file sizes and formats. He discusses potential problems with conversion/transcoding, bandwidth, etc and how to test the video before trying to use it as a background image.
http://thenewcode.com/903/Preflight-Your-Video-For-Delivery-in-HTML...
In another article the same guy describes his HTML/CSS implementation. You obviously have your own implementation but may never the less find it an interesting read.
http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-V...
Best Regards
Rick
I have come across some more info on the web that may be helpful to anyone using background video. In this short article the authors talks about file sizes and formats. He discusses potential problems with conversion/transcoding, bandwidth, etc and how to test the video before trying to use it as a background image.
http://thenewcode.com/903/Preflight-Your-Video-For-Delivery-in-HTML...
In another article the same guy describes his HTML/CSS implementation. You obviously have your own implementation but may never the less find it an interesting read.
http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-V...
Best Regards
Rick
I'd like to add to the discussion about the IE and Edge.
Now I know Microsoft has it's own idea how a web browser should be creating all kinds of problems, but as it's one of the most used I'm wondering if there's a solution for scaling of the video.
Mozilla/Chrome scales the frontpage video just nicely but IE/Edge doesn't seem to render correctly, the video doesn't scale as it should (100% height, cropping the width) but instead it just goes 100% width.
It looks like your own demo does this as well, so I guess it's not just my unawareness in question this time ;)
Is there a solution to this ?
Now I know Microsoft has it's own idea how a web browser should be creating all kinds of problems, but as it's one of the most used I'm wondering if there's a solution for scaling of the video.
Mozilla/Chrome scales the frontpage video just nicely but IE/Edge doesn't seem to render correctly, the video doesn't scale as it should (100% height, cropping the width) but instead it just goes 100% width.
It looks like your own demo does this as well, so I guess it's not just my unawareness in question this time ;)
Is there a solution to this ?
Awesome feedback. Thank you! I will look for ways to implement your suggestions.
Thanks again,
James