Thread: HTML 5 Video

    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2011
    Posts
    31
    Rep Power
    0

    HTML 5 Video


    The W3c Schools suggests that the HTML5 <Video> tag is suitable to be used in conjunction with the embed tag to allow cross browser compatibility.

    The point is you have to have 3 or 4 copies of you videos each under formats ie. .Mp4, .flv, .ogg ,.webm.

    The link is here and it says that this is the best way to go about adding video to a page.

    http://www.w3schools.com/html/html_videos.asp

    Is this a suitable method?

    What do you think about the reliability and accessibility of this method?

    I have a video converter and some disk space, though would still like some opinions on this as it is a ''bulky'' procedure.

    Dan
  2. #2
  3. No Profile Picture
    Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,008
    Rep Power
    2790
    I would first read this then read this.
    [PHP] | [Perl] | [Python] | [Java] != [JavaScript] | [XML] | [ANSI C] | [C++] | [LUA] | [MySQL] | [FirebirdSQL] | [PostgreSQL] | [HTML] | [XHTML] | [CSS]

    W3Fools - A W3Schools Intervention.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2011
    Posts
    31
    Rep Power
    0
    Thanks

    I did have a look at w3c schools and after some further research I found they have given me a bum steer.

    All browsers (updated ones anyway) use the HTML 5 tag and will display either .ogg, mp4, .webm.

    Internet explorer will not (without the use of <embed> or for that I am not even sure).

    So IMO IE is at present the odd one out and is most probably holding out with a deal with Adobe to keep Flash alive till they can upgrade it or phase in HTML5 completely.

    It has nothing to do with Browsers as ALL browsers can display the above files with <embed>, IE just will not do it within a <video> tag, which makes it bloody hard to work with.

    Simply I am going to have two pages, one for html5 and one for Flash (IE or any Flash enabled Browser).

    W3C Schools gives a bum steer when they have the HTML5 code
    for .mp4 and some others then, you click try it yourself!

    After opening the page in IE the code worked and I was left wondering why this same HTML5 code would not work on my test server in IE.

    I would say that it is questionable that the code rendered in text on the site is actually the code that renders the .mp4 movie on the right.

    Thus giving a bum steer.

    Terrible stuff, I mean some folk just have too much time on their hands and some just don't have enough.

    Either way HTML5 could be good, but IE needs to support it fully, and of course we know what would happen to Flash if that occurred.

    My 2c.

    Dan
  6. #4
  7. No Profile Picture
    Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,008
    Rep Power
    2790
    There is documentation on the page I linked with directions for a graceful degrade for outmoded browsers.
    [PHP] | [Perl] | [Python] | [Java] != [JavaScript] | [XML] | [ANSI C] | [C++] | [LUA] | [MySQL] | [FirebirdSQL] | [PostgreSQL] | [HTML] | [XHTML] | [CSS]

    W3Fools - A W3Schools Intervention.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2011
    Posts
    31
    Rep Power
    0
    Thanks.

    Also having a few probs with the <video> tag but just fixed on small issue.

    Pretty sure Firefox and IE want nothing to do with this.
    So I installed Flowplayer and provided an alternate link.

    This page is for Safari, Opera and Chrome mostly, though they all utilised Flowplayer on my local browsers.

    Thing is, when I put .webm before .ogg Chrome could not handle it and froze and broke up when playing.

    So I put .ogg last.

    Safari uses .mp4, Chrome uses .webm and Opera uses .ogg.

    They all seem to cooperate now.


    Code:
    <video width="478" height="430" controls="controls">
    
     <source src="Video/kseal.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> 
    
     <source src="Video/kseal.webm" type='video/webm;codecs="vorbis,vp8"'> 
    
     <source src="Video/kseal.ogg" type='video/ogg; codecs="theora, vorbis"'>  
    
    </video>
    Dan
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2011
    Posts
    31
    Rep Power
    0
    BTW Winters

    Thanks for the link, I am still reading through it bit by bit.

    Also it is a Mozilla link , but Firefox does not support any of those Formats within the <video> tag (except flash that requires another tag not HTML5).

    I will have to quietly add it to the IE category.

    Not on my local anyway.

    I think Flash still has a decent amount of usability since many browsers prompt for the plugin (FF, Chrome, Opera, IE).

    And has been around for such a long time that even my mum knows to install flash (has strong adoption).

    Seems that HTML5 is great, but for me it only looks after apple as all other browsers can view Flash.

    Maybe Adobe should just improve Flash.

    Dan
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    1
    Rep Power
    0
    Both Firefox and Opera play ogg, while Chrome, Safari, and IE play mp4, so you can get away with only
    2 video formats: ogg and mp4.

    Also list mp4 before ogg for ios.

    Code:
    <video width="478" height="430" controls="controls">
    
     <source src="Video/kseal.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> 
    
     <source src="Video/kseal.ogg" type='video/ogg; codecs="theora, vorbis"'>  
    
    </video>
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2011
    Posts
    31
    Rep Power
    0
    Thanks for that mate, some good info there.

    What do you think about Flowplayer?

    That is the way I have gone for the initial deployment.

    Though I have the HTML5 formats at hand if It proves unsuitable.

    Are the .ogg or .mp4 any better?


    I mean they are none the lighter in size.


    Here is a site that is under construction.


    http://www.webplatform.org/


    And they say it is some kind of HTML5 amalgamation between vendors.


    http://www.sitepoint.com/webplatform...ation-project/


    Dan

IMN logo majestic logo threadwatch logo seochat tools logo