[Pro] background video for ipad

Hello. Im still thinking about using video as a background or design element as in http://www.chantalamui.com, but dont reach the answer. Ill write my conclusions (that could be mistaken):

  • the best way to use video as background, or as a main design element is using flash video. You can insert this flash video as a swf, but iphone and ipad will not see it.

  • you can put an image under the video to be seen if the user is on ipad, but a jpg its not a video…

  • if you use another kind of video, like QT, it comes with the player, so its really horrible… if we are speaking of design.

So, now, for me, its impossible to make a site like http://www.chantalamui.com without using flash.

If any one knows how to make it, it would be really appreciated.

Thanks.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

So, now, for me, its impossible to make a site like http://www.chantalamui.com without using flash.

Well it is an entirely Flash site - it does not just have a background video in Flash. Its all Flash!

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hello, Dave. You are completeley right. The site is in flash because I don’t know any other way to have videos as a background without using flash, so it was the question: is it possible to make a site like this without using flash?

rkl


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The problem with using any video in the background is that because the video is played (in the Browser) using plug-in architecture it tends to punch its way to the top.

This makes it very difficult to get it to reliably display behind other html items on your page cross browser/cross platform.

You can probably do it with HTML5 but then older versions of Exploder etc. wont work.

So this simple answer is that it is very very difficult to do this in any way that will work in all browsers and all operating systems.

Personally I wouldn’t spend much time on a Flash solution which is SEO unfriendly anyway and on its way out and which will require fall backs for non-flash systems (and that doesn’t just mean iOS as there are plenty of folk out there who choose not to use it.)

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Then, how do you insert the video in freeway to be out put as HTML5 without having a player, like in the example web I gave?

You can probably do it with HTML5 but then older versions of Exploder etc. wont work.

So this simple answer is that it is very very difficult to do this in any way that will work in all browsers and all operating systems.

I dont mind this. I just want to be able to make it!!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

As part of a talk I did at LCC last year, I demoed writing an HTML Video Action for Freeway.

The resulting Action, which is pretty basic, can be found on this page: HTML5 Video

There is no provision for non-HTML fallbacks (so no Flash player included), as the thrust of the event was what’s coming up, not what has been. The Action is posted as it is for students at the LCC to download and write in the bits they need.

However, now you have a tool to use, use it wisely. One thing that will lose you visitors is stuff that plays audio or video without warning. People do not all work or live in splendid isolation, and it may annoy others in the workplace/library/old folk’s home (cute though Hamster on a Piano may be), etc… Also, you have to consider bandwidth requirements. Video is pretty hungry on that score, and not everyone has the über fat pipe, or the super unlimited data plan.

Be considerate. I think the site you want to emulate is pretty inconsiderate in all of these areas, Flash aside for the moment.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hello, Paul. Thanks for your answer, but this action doesn’t make what Im looking for. I have the test in http://www.godelia.tv/pdfs/

At computer, it only display the video in safari, not in firefox, opera or explorer. In smart phone, is not displayed in android.

And if you see it on an iphone, the video doesn’t autoplay, and if you press it, the iphone open the video player to view it, so this video doesn’t perform as a background or design element.

I hope I make me understood, because Im still looking for a solution as in www.chantalamui.com. When we made this site as it is, there was a briefing, and all considerations were over the table, and it was the final decision. At the moment I havent seen a site like this one, and my client is still completely satisfied with it.

thanks.

rkl


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

This page uses Flash video (and actually full-page Flash), on auto-start, and is therefore never going to work on iOS or any other mobile platform (except for a vanishingly-few versions of Android, and even those are widely considered a Very Bad Idea from a battery life standpoint as well as a performance and compatibility standpoint).

QuickTime video can play in-place on iPad’s Mobile Safari, but iPhone and many/most other mobile device browsers require that a “helper” application open any video. This is normal and expected behavior on those devices. If I were you, I would argue to your client that their desired approach will work swimmingly on many desktop browsers, but they really need to consider a different (lighter-weight, less user-hostile) approach on mobile.

If you want moving inline elements on iOS, you have to party like it’s 1997, with animated GIF, or use Scriptaculous to move things around with JavaScript. Freeway can help you with the latter, using TransitionFX or Protaculous + custom JS.

Walter

On Apr 13, 2012, at 10:23 AM, rakeljuice wrote:

I hope I make me understood, because Im still looking for a solution as in www.chantalamui.com. When we made this site as it is, there was a briefing, and all considerations were over the table, and it was the final decision. At the moment I havent seen a site like this one, and my client is still completely satisfied with it.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hello, Waltd. I dont want moving elements in the web, gifs or similar. I want video in the web. For example, enter http://www.i-tek.es/demoweb/msicilia. This web was though as a web video based like the chantalamui.com one. and the video session took place, and after that the client decided that ipad iphones, etc. are their priority, so we transformed video to stop motion to make animated GIF, but sincerelly, for me, the satisfaction is 50% less than with the video.

I dont think video is hostile. Why? What is the difference between entering a web and see an element moving or see a person dancing? The audio? The video don’t need to have audio in most of cases. And if it have audio, you can switch it on / off.

This was the best point of our design studio, it made our studio different from other, and know, after the apple decision not to view flash, we are in the past, like lots and lots or design studios…

Now, Im working on a writers web. This web should start with images of his hand writting. Without video, this is completelly impossible. And you dont need audio for that.

About others phone, I have a Hero HTC and it can see any kind of content.

And about positioning, most of my client doesnt matter this. They need a visual impact web. But they want any device could see it.

Im really upset with the way the net is taking at all.

Well, Ive exposed my personal thoughts. I feel free to do it at this forum. And I like people who you can speak to, as people I find here.

Thanks


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

###TL:DR

Your frustration is shared with a lot of other people.

I think this approach of having in-page video play on page load is very dramatic and can have a powerful effect on the visitor. I also know from years of experience that it won’t work the same way everywhere. Mobile browsers are extraordinarily powerful and fully-featured, but plug-ins are very last-century and are being displaced by more modern standards. If you want to continue using this approach, you’re going to have to segment your site into have and have-not versions for the platforms that are visiting it.

###Limitations you can and cannot control

It’s important in design (or any creative endeavor) to embrace the limitations of your materials. Video is a bandwidth pig, and bandwidth on mobile devices is precious (and often subject to caps and over-limit charges). That’s why nearly all mobile platforms enforce a No Autoplay rule by fiat.

Bandwidth is one of the components of your design, you cannot ever afford to forget it – even on desktop. In today’s over-caffeinated world, you have approximately a tenth of a second to show your visitors something and get them over the white screen of death “hump”. Unless you are presenting your video director’s portfolio, and have explained and warned your audience about the delay (and even then, there’s no pleasing everyone) you are going to have people leave when they can’t have it NOW! And that’s on the desktop. Take a drive into the country, and enjoy the splendor that is ATT “Edge” 2G connectivity. Now realize that a large portion of the country and indeed the world are not anywhere beyond that state of 2007 art.

Without knocking your aesthetic approach one bit – even in a perfect world, where Adobe had figured out how to deliver Flash on a mobile device without cutting the battery life literally in half – you would still need to find a way to cut your movie file sizes down to the point where they were nearly as awful-looking as an animated GIF in order to fit inside the limitations of the radio delivery system.

###Future-orientation

Adobe have acknowledged that mobile Flash was a dream, and they are not going to develop it any further. They have a bunch of new tools coming out that let you convert Flash into open standards JavaScript, CSS, and HTML5 video, and further, to author animated and time-based presentations in those standards from the start. Take a look at Tumult Hype for one excellent example, and I think made just up the road from Freeway, somewhere near Oxford.

###Business decision

You might want to consider your traffic numbers and more importantly your traffic trends, and make a cold-hearted business decision:

  • Make two sites, and sniff the browser/platform to divide your audience (twice the effort).
  • Create a single site, with careful consideration for the platform that is growing more rapidly than the others* (artistic compromise, advanced scripting).

It’s not perfect, and it’s definitely not going to be easy to do, but I am sure that you can make a choice there that will make business sense.

Walter

*I suspect you will see the line for iDevices going sharply up, and the desktop trending slightly down or flat, depending on the window of time you choose to analyze.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I bought an iPad to see what the sites I design and others look like on them. I now realise that all of my serious reading of web sites is now on the iPad. I just don’t use a desktop for reading websites anymore. I’m sure there are many more people like me.

With some 350 million iOS devices sold and growing! The writing is on the wall. All web sites must behave well for these devices.

When I visit http://www.i-tek.es/demoweb/msicilia the user experience is not very good. The animated gifts do not behave that well causing the text to be unreadable.

When I visit chantalamui.com the experience is non existent. A blank white page! Nothing to see hear move on.

You could argue its the fault of the device and not the website. Then again didn’t King Cunute think he could stop the tide?

David

Sent from my iPad

On 14 Apr 2012, at 13:01, “rakeljuice” email@hidden wrote:

I want video in the web. For example, enter http://www.i-tek.es/demoweb/msicilia. This web was though as a web video based like the chantalamui.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I bought an iPad to see what the sites I design and others look like on them.

For those who don’t own an iOS device you can always use the iPhone/iPad simulator in Xcode to get an idea of what’s going on with your sites. It’s useful.

Todd


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hello. I entered to say you I have the “almost” solution, and there are lots of comments. I will read them right now.

Just to say that if you enter http://www.godelia.tv/test you can see a video with html and graphic elements over it. Ive tried in several places, and conclusions are:

  • in opera, no. But I dont think anything worked in opera…
  • in safari, ok
  • in Firefox, ok
  • in IE, ok, but the video is under graphic and html elements
  • in iphone, the video needs the video player.
  • in my android, no.

I inserted the video as a hype element.

Thanks.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Your frustration is shared with a lot of other people.
Adobe have acknowledged that mobile Flash was a dream, and they are not going to develop it any further.

Yes, thats the word!! Walter, thanks for your considerations. I take all them into account.

When I visit http://www.i-tek.es/demoweb/msicilia the user experience is not very good. The animated gifts do not behave that well causing the text to be unreadable.

I would like to know what you see, because I can read text properly in all the systems…

Then again didn’t King Cunute think he could stop the tide?

what?? Thanks anyway for your comments aswell.

you can always use the iPhone/iPad simulator in Xcode

great idea. Ill for this. I have no idea what is the xcode.

Thanks all of you


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Take a look at Tumult Hype for one excellent example, and I think made just up the road from Freeway, somewhere near Oxford.

I forgot to say that the ballet schooll one (the one with gifs) in hype made, and the “almost” solution I found is using Tumult Hype


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

If you’re on Snow Leopard or Lion, it’s a download (nominal cost?) in the App Store. Xcode is the application that developers use to write applications for Mac OS X and iOS. One of the facets of that tool is the iOS simulator.

King Canute (of legend) famously ordered the tide to recede, because he thought he was that powerful, but ended up wet. iOS is the tide, and the designers and developers who believe that Flash has a future are the king.

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On my iPad the text block on the left is blurry. For some reason I think the animation is causing it.

http://www.i-tek.es/demoweb/msicilia/

Sent from my iPad

On 14 Apr 2012, at 18:30, “rakeljuice” email@hidden wrote:

I would like to know what you see, because I can read text properly in all the systems…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

For me the godelia.tv video doesn’t play on my iPad in Safari, Dolphin, Opera Mini or Atomic Web.

Not sure if this is because I cannot access the video itself to ‘touch’ it? Behind other elements?

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

If you’re on Snow Leopard or Lion, it’s a download (nominal cost?) in the App Store

Hello. My iOS is 10.6.7 so I can’t install Xcode 4, that requires 10.7 … Im looking for the 3 one. Ihope Ill find it.

King Canute (of legend)

I’ve read the full story. Quite graphical.Thanks

On my iPad the text block on the left is blurry. For some reason I think the animation is causing it.http://www.i-tek.es/demoweb/msicilia/

I think you mean the address text. I dont like it, its not very clear, but as it can be changed with WebYep, It takes this aspect. I would like to make it more solid, but dont know how.

For me the godelia.tv video doesn’t play on my iPad in Safari, Dolphin, Opera Mini or Atomic Web.

Mistake solved. Videos were not prcessed in the video server with the mobile profile. Now they are ok, and you should be able to see them.

Thanks everybody


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

If you sign up for the FREE Apple Developer program at http://connect.apple.com you can download it, along with lots of other geekery, from the developer tools section of that site.

Walter

On Apr 16, 2012, at 6:50 AM, rakeljuice wrote:

If you’re on Snow Leopard or Lion, it’s a download (nominal cost?) in the App Store

Hello. My iOS is 10.6.7 so I can’t install Xcode 4, that requires 10.7 … Im looking for the 3 one. Ihope Ill find it.

King Canute (of legend)

I’ve read the full story. Quite graphical.Thanks

On my iPad the text block on the left is blurry. For some reason I think the animation is causing it.http://www.i-tek.es/demoweb/msicilia/

I think you mean the address text. I dont like it, its not very clear, but as it can be changed with WebYep, It takes this aspect. I would like to make it more solid, but dont know how.

For me the godelia.tv video doesn’t play on my iPad in Safari, Dolphin, Opera Mini or Atomic Web.

Mistake solved. Videos were not prcessed in the video server with the mobile profile. Now they are ok, and you should be able to see them.

Thanks everybody


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options