HTML5 beta

Hi Jeff,

at the moment the HTML5 support is turned on only for mobile browsers. Right now, we are not thinking on turning the HTML 5 option as the default one, because all the features that we have for Flowplayer work only for Flowplayer and not for the HTML5 video player.

If you like customize your version of plugin, you can add more supported browsers, just add their user agents into the fv-wordpress-flowplayer/view/frontend-head.php on line 8, into the array $aUserAgents.

Zdenka

Attempted to view my test page (same as referred to in my prior comment) on my iPad today. Won’t display on the iPad – gives me an error of “need flash player”. iPad is running version iOS 4.2.1

You didn’t say what we need to do if we are already using FV WordPress Flowplayer. I attempted to install the HTML5 beta and it failed. I don’t want to screw up my other videos on my blog using the previous version, but would like to test the beta version to see if it plays nicely with WPtouch 2.1

What exactly do I back up via FTP?

I believe it told me it failed to install because the folders already existed.

Do you know if this new HTML version will work with the WPtouch plugin? This is a deal breaker if it doesn’t.

Well, I took the plunge and all seems to be working great on my Flash enabled computer, and my iPhone and iPad via WPtouch.

Now the only thing missing is to get a image or splash image to appear over the player while viewing on the iPHone or iPad.

If anyone has an Android, I would sure appreciate it if you would test this page to seen if my videos play. On the iPad or iPhone I have to wait for the play buttons to appear over the player, with isn’t too bad, it’s just if I had a splash screen showing while waiting for the play button that would be nice. Here’s the link.

“http://rpriest.com/blog/2010/08/morgan-kyle/”

That’s good to hear!

I’ve heard from a friend with an Android that my HTML5 videos under HTML5 support does not work on his phone. That’s not good ;(

Hi Shamus,

Thanks for testing. Unfortunately the speed with which the play button shows up is not under our control, as you said it’s the hosting and the speed of your connection. However we’ll be adding the splash screen functionality, so hopefully it will cover this problem.

Zdenka

“Generally, there’s no coded that would play on every device…”

How does Vimeo and YouTube do it?

“Using multiple video formats would be somehow hard to manage within one FV Flowplayer shortcode. Also, you would have to create and upload those videos. At this moment we are not implementing this functionality, we’ll see about this in the future.”

Oh I totally agree, nor do I want to encode and upload more than one video. Is that what Vimeo and Youtube does? Do they encode more than one video to play on different devices? One for the iPad, one for the Android, one for the iPhone, one for the desktop computer, one for slow DSL one for fast broadband… the list could go on…

Well, I’ll be looking forward to see the other possible solution you have that may allow Android and iPhone/iPad view the same video. You guys are smart I know you can pull it off. Thanks for your had work, I’ve done a lot of testing on other similar WP apps to display HTML5 videos and you solution seems to be the best so far!

Maybe you can ask CNN how they do it. It blows me away how you see a small image on their page, tap on it, and it blows up to a bigger size pushing the pages text down making room for it. Then sets there waiting for you to press the play button. Works the same way on both the iPhone or iPad. Very cool! Check it out on this page:

http://www.cnn.com/2011/CRIME/01/18/arizona.shooting/index.html

Just to clarify the percentage reasoning – Since my layout is almost all fluid except for the body tag, I would like to have my videos almost always (almost) cover 100% of their <div>’s width at load time and then set the appropriate height value(default height isn’t as important as it would be determined by the aspect ratio).

After doing some testing with it – I see that this will take more to resolve than the percent width. It looks like it would be necessary to add a calculation to adjust the height as well, I didn’t notice the slight skewing before and assumed that height was auto adjusting.

I will rummage through the code and see if I can figure anything out – If you know where the best place to add in some changes, I would appreciate it greatly!

example page: ‘http://onebrownshoe.com/45-2/&#8217; – That is set as if manually set for mobile only. On desktop video is too small (also top/bottom margins are much different on mobile than on desktop for some reason)

Thanks again,
Jay

Zdenka,

Thank you for your quick reply. I know what you mean about the equal browsers bit – so frustrating when trying to do anything. However, in Firefox on Android the HTML5 bit actually works and you don’t have to watch the video in full screen but it actually plays in the page. That is where the problem comes in RE: the big black box with an arrow and the default circle “play” icon not disappearing when you begin to play the video. (I’m not sure if it matters but I am using wp-mobile-video-player and have 5 different source file formats).

I may still try to play around with some javascript to see if I can find a way to alter the height according to the ratio and width of the video, but for now I will make do with manually defining it.

Thanks for your help and have a great day!
Jay

Hi Wendy,

the problem here is when you use splash screen. If there is no splash screen used, there is the notification that the flash is not installed. The flash object does this itself. However, when we covered this by the splash image, the notification is not visible anymore.

The only way we can overcome this is to start detecting whether the flash is installed, and then replace the splash screen back with the notification. We’ve been trying to avoid this solution, therefore we have used only the user-agent based method.

If you add more user agents, you can use html5 even in safari or chrome. Or if you decide to use html as default (but this requires some programming skills and understanding of the code) you can use the html5 video almost everywhere. However you have to realize that the html5 video supports only video playback and the splashscreen. Other features won’t work there.

Also it’s good to keep in mind that html5 video does not work in all browsers and with all video formats. So you may run into trouble in browsers such as Opera, IE, Safari or even firefox. Check out this test to see how different browsers support html5 video tag. You will see that Safari and Firefox support completely different video codecs. And this is were the trouble starts – you will have problems to find one video format which can be played for both browsers.

Back to your original question, we will try to think about the problem, on how to notify people they need flash, even when they use splash screen. Be sure I’ll let you know if we come up with solution.

Zdenka

Hi Rebecca,

the current version on wordpress.org contains also support for mobile devices, such as the beta version had, this beta version is older than the current one in wp repostitory. It has been only released for testing. Please use the most current version from wp repository.

Zdenka