[Express] FWE HTML5 and webm

I am using the HTML5 video action. So far so good, however.
I discover that the theodora/ogg conversion for Firefox doesn’t give as good results as webm does (In terms of Quality and size). Also webm can be used in as well Firefox and Chrome. However I cannot use the webm version in this action. Flowplayer simply won’t show the video in Firefox but just the sound. The latest release of flowplayer should be able to handle webm, but I don’t have a clou how to integrate this new version.
The webm plays fine in FF without flowplayer by the way
Can someone help me with this. I don’t mind to add code but need to know how.
I know there are actions that handle this but then I need the Pro version, which is overkill for my usage.
Thanks
Ben


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

Edit, forgot to check the “ping”


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

The the VideoJS player or the SublimePlayer (free or paid account required) instead. Those allow you to pick your poison, so to speak.

Walter

On Dec 18, 2012, at 6:39 AM, Ben wrote:

I am using the HTML5 video action. So far so good, however.
I discover that the theodora/ogg conversion for Firefox doesn’t give as good results as webm does (In terms of Quality and size). Also webm can be used in as well Firefox and Chrome. However I cannot use the webm version in this action. Flowplayer simply won’t show the video in Firefox but just the sound. The latest release of flowplayer should be able to handle webm, but I don’t have a clou how to integrate this new version.
The webm plays fine in FF without flowplayer by the way
Can someone help me with this. I don’t mind to add code but need to know how.
I know there are actions that handle this but then I need the Pro version, which is overkill for my usage.
Thanks
Ben


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

Thanks Walter,
I am quite a novice in this area. So using one of those would that mean I create an account were my video’s are hosted? I guess not, so how will I integrate one of those players into my uploaded website so that for those specific browsers they will switch from my .mp4 to webm, in a way your terrific HTML5 video action does ?

Can you give me a clou ?

Thanks

Ben


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

The account for Sublime Player doesn’t mean you host your films there, it just gives you access to the constantly-updated-battle-tested script without any effort on your part. A paid account gives you the ability to customize the player, remove the unobtrusive Sublime branding (fades out after a couple seconds of playback), etc.

But I totally missed the [Express] flag in the subject line here – neither of these options are available for Express in Action form. You will need to apply them by hand, using the various Page / HTML Markup, Markup Items controls. Sorry for skipping that basic point.

Walter

On Dec 18, 2012, at 10:35 AM, Ben wrote:

Thanks Walter,
I am quite a novice in this area. So using one of those would that mean I create an account were my video’s are hosted? I guess not, so how will I integrate one of those players into my uploaded website so that for those specific browsers they will switch from my .mp4 to webm, in a way your terrific HTML5 video action does ?

Can you give me a clou ?

Thanks

Ben


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

Ok Walter, no problem
I can understand that I need to do some “handcoding”
Can you perhaps point me into a direction where I can find out how to put the right code into the right place using the Page /HTML markup and Markup items ?

Thanks again

Ben


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

Well, for Sublime, you can copy/paste from my example page. Sublime Player

View source (you may have to enable the Develop menu in your Safari preferences, if you don’t already have that enabled, in order to see this option).

There are two script tags in the HEAD of the page, which you would add using your Page / HTML Markup dialog in the Before /HEAD section. The first is the HTML5 “shiv”, which coerces IE to display HTML5 elements like the video tag properly. That script tag is wrapped in a conditional comment, which hides it from all browsers except IE, so be sure to grab the lines, too.

The second script tag is the link to Sublime for the player script. PLEASE NOTE CAREFULLY! This is MY link, not yours. You will need to alter the name of the script to match the “token” given to you when you sign up for Sublime. Linking to my script from your page will not hurt me, but it will not work for you. Your public URL must be registered with Sublime, and you get one token per account. They do the math on their end and figure out whether to serve the script based on the referrer header. This also means that you cannot preview the effect in Freeway – only on your live server.

Finally, wherever you want to display your movie, insert a Markup Item to hold it. Back in the source of my example page, copy the entire

Let’s say you made a new folder in your site root (next to the Resources folder) called ‘video’. In that folder, you placed your poster.jpg, movie.theora.ogv, movie.webm, and movie.mp4 files. Assuming that your HTML page publishes into the root folder (next to Resources), you would replace the poster="test-poster.jpg" with poster="video/poster.jpg", and similar changes for the other files. There is no requirement that you add any format other than mp4 – the other two are for Firefox and Chrome specifically, and both of them will fail-back to using Flash and the mp4 if they aren’t provided. The mp4 file will play on all mobile browsers and all WebKit browsers except Chrome.

Don’t forget to also alter the dimensions to match your video. You can set these to something larger than the native resolution of the movie if you want to sacrifice ultimate playback quality for a smaller download. Just be sure to set them to a proportional equivalent.

In Pro, the Action takes care of all this for you, and for bonus geek points, converts the entire page into valid HTML5. Express can’t do that, and so if you validate your page after pasting in all of this code, you will get an error for the use of

VideoJS follows exactly the same basic instructions, with the addition of an external stylesheet right before the link to the video.js script file. You can view an example of that Action’s output here: VideoJS

Walter

On Dec 18, 2012, at 10:58 AM, Ben wrote:

Ok Walter, no problem
I can understand that I need to do some “handcoding”
Can you perhaps point me into a direction where I can find out how to put the right code into the right place using the Page /HTML markup and Markup items ?

Thanks again

Ben


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

Thank you so much for your comprehensive answer.
I think I can manage that.

Another Question still, if I may:
When you state in your earlier post that the Sublime Player account provide me with a constantly update script, is something similar also applicable for Flowplayer ?, as in that case I should be able to use the webm in your HTML5 action in stead of the theodora/ogg ?. This as the latetst release of flowplayer handles webm as I understand.

mmm… complicated stuff…, but I am starting to undertsand.

Anyway thank you so much for staying with me and providing me your knowledge.

Ben


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

I don’t know about FlowPlayer. The simple fact is that you can put both WebM and Ogg/Theora in your video tag. The beauty of this new HTML5 tag is that only the first format that the browser recognizes will be downloaded and used at all. The others are completely ignored. It’s not like you have to worry that you should only put one format in there – you put all three if you like, or just mp4 if you want to fall back to Flash on every device that doesn’t support it. You should definitely never skip mp4 – that’s where all your new visitors will look from their iOS and Android devices.

Walter

On Dec 18, 2012, at 12:26 PM, Ben wrote:

Thank you so much for your comprehensive answer.
I think I can manage that.

Another Question still, if I may:
When you state in your earlier post that the Sublime Player account provide me with a constantly update script, is something similar also applicable for Flowplayer ?, as in that case I should be able to use the webm in your HTML5 action in stead of the theodora/ogg ?. This as the latetst release of flowplayer handles webm as I understand.

mmm… complicated stuff…, but I am starting to undertsand.

Anyway thank you so much for staying with me and providing me your knowledge.

Ben


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

Thanks a lot Walter,

I’ll be “of the street” for a while (as we say in Holland) figuring this out and get it to work for me. (or even upgrade to Pro anyway -:wink:

Ben


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

Cheap at twice the price, as they say here in the USA. Ask yourself what you charge per hour, and think about how long it would take you to do some of these things long-hand…

Walter

On Dec 18, 2012, at 12:39 PM, Ben wrote:

(or even upgrade to Pro anyway -:wink:


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

You’r quite right of course.
But sometime’s I like to know how things work, so to invest in some knowledge. But certainly I don’t want to do those things all hand coded all the time, that’s not why I choose Freeway and love the actions -;).

Ben


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