The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> HTML5 Video Players
jimlongo
post Mar 28 2012, 05:51 PM
Post #1


This is My Life
*******

Group: Members
Posts: 1,015
Joined: 24-August 06
From: t-dot
Member No.: 16



I finally decided tomorrow was today and decided to abandon plug-ins (well start to anyway)

Listed here are a bunch of players that make for easy insertion of video in a webpage using the html5 video tags (or audio if it's sound only). Likewise almost all of them rely on a Flash fallback in the case of browsers that don't support the video tag.

What's that mean?

Well you write valid html5 pages that can deliver video to mobile devices and desktops simply and at the same time stop writing convoluted code with multitudes of plug-in or object parameters. Satay that!

The current state of the industry would imply that one should deliver H264 video. It will play in html5 on iOS devices and render in Flash on older browsers. If you want to cover yourself further you could also deliver a webm and a ogg video.

So on this page of mine I'm using the the JWPlayer to play a video that you can code like so with video tag for html5 and a flashplayer fallback.

CODE

<video width="682" height="384" poster="/poster.jpg">
    <source src="/movie.mp4" type="video/mp4">
    <source src="/movie.webm" type="video/webm">
    <source src="/movie.ogv" type="video/ogg">
</video>
<script type="text/javascript">
    jwplayer("container").setup({  
    width:  '682' ,
    height: '384' ,
    flashplayer: "/jwplayer/player.swf"
    });
</script>


PROS:
  • This will play on my phone, tablet, computers, etc., Please let me know if you have any difficulty.
  • This can all done with free tools. Handbrake, MPlayerX, MiroConvertor, Firefogg, JWPlayer
  • Additionally most of the players have paid options that allow for extended functionality like HD options, Ad insertion, Analytics, etc.,
CONS:
  • Well it does require javascript, but I figure the type who turns off javascript really isn't too interested in video anyway.
  • There isn't currently an easy way to deliver multiple bitrate video . . .well there wasn't an easy way before either.



--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Mar 29 2012, 02:49 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 4,125
Joined: 23-August 06
From: Europe
Member No.: 9



How about this: http://camendesign.com/code/video_for_everybody ?

On your page, I get two .swf files and a .mp4 (latest Safari in latest Mac OS X on a Mac Mini) (with or without ClicktoFlash extension enabled).


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jimlongo
post Mar 29 2012, 09:32 AM
Post #3


This is My Life
*******

Group: Members
Posts: 1,015
Joined: 24-August 06
From: t-dot
Member No.: 16



Thanks for pointing out your problem Frederiek.

As to why you get 2 flash objects.= - I'll look into that. I only see 1 in all my Macs, but I'm only on 10.6.8 or iOS5
Do you mean you see 2 or 3 movies or posters?

I fixed the javascript not playing issue in html5 capable browsers by putting controls in the video tag
CODE
<video width="682" height="384" poster="/poster.jpg" controls>


The page you pointed out is basically the same solution except they use object tags instead of the javascript to write them. They are also using html5 plus JWPlayer Flash. The LongTailVideo website has quite a few different embedding suggestions for using their player, maybe I will try some of the others.


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Mar 30 2012, 02:39 AM
Post #4


Programming Fanatic
********

Group: Members
Posts: 4,125
Joined: 23-August 06
From: Europe
Member No.: 9



I still get http://jimlongo.com/_jwplayerV/player.swf and http://plugins.longtailvideo.com/5/viral/viral-2d.swf or at least that's what's in the Activity window. But in the end, I think it's the .mp4 that plays. Fortunately, I only see one movie.

On the other hand, on the test page of the link I posted, I don't get any flash, just the movie.

I skipped Leopard and Snow Leopard, went from an old Mac Mini with Tiger to a new Mac Mini with Lion (having a hell of a time with Mail, grrr).


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jimlongo
post Mar 30 2012, 10:24 AM
Post #5


This is My Life
*******

Group: Members
Posts: 1,015
Joined: 24-August 06
From: t-dot
Member No.: 16



Well that's okay, I'm using the viral extension which if you saw the flash player and stopped or got to the end of the video enables a window which allows you to send the link to another email address.

I could instruct the embed code to prefer the html5 video in capable browsers, but the flash player does have it's advantages.

But as long as you're only seeing one video, that's the desired result.

Problems with Mail account outgoing setup? . . . try using port 465 SSL.


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Mar 30 2012, 12:20 PM
Post #6


Programming Fanatic
********

Group: Members
Posts: 4,125
Joined: 23-August 06
From: Europe
Member No.: 9



I just wanted to let you know what I got on your page and provide you an alternative. As long as there are no real errors and different browsers/OS get the file served, all is well.

QUOTE
Problems with Mail account outgoing setup? . . . try using port 465 SSL.

No. I migrated all my apps and files between the two machines. Most went rather well, though I changed from French to English. Anyway, Mail worked well for a while, but lately I don't receive mails, even though the Account info indicates the mail on the server and downloaded but it's not in my inbox.

It seems to be a problem with Mail itself with POP accounts. I already read a lot of discussions about it at Apple, but none brought a solution. My husband, who changed his Mac too using a different migration method, doesn't have that problem.

I can only hope for an update of Mail.


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 17th April 2014 - 10:00 PM