1. Attachments are working again! Check out this thread for more details and to report any other bugs.

HTML5 Embedded Video

Discussion in 'PriusChat Website Questions' started by TheForce, Mar 16, 2010.

  1. TheForce

    TheForce Stop War! Lets Rave! Make Love!

    Joined:
    May 30, 2005
    3,461
    537
    0
    Location:
    Wheelersburg, Ohio
    Vehicle:
    2006 Prius
    Model:
    N/A
    I know we can embed youtube videos with some bbcode but it it possible to embed HTML5 Video?

    I'm asking because I want to start using the Theora video format. I liked the google video service but they no longer allow new uploads. I have always hated youtube and I dont want to start using them. I prefer to host my own videos on my own web server. That way I'm sure they will never be taken down.

    I know the browsers have not decided on a standard yet but I have made up my mind on what I want to use. I really like H.264 for the high quality, small file size, and hardware acceleration but I'm an open source guy so I support Theora for web browsers.

    I know IE does not support HTML5 video but IE never did comply with HTML standards. Just as I'm sure there will be a H.264 plugin for FireFox I'm sure there will be a plugin to let IE use the HTML5 video tag.
     
  2. Danny

    Danny Admin/Founder
    Staff Member

    Joined:
    Nov 24, 2003
    7,094
    2,116
    1,174
    Location:
    Charlotte, NC
    Vehicle:
    2013 Prius Plug-in
    Model:
    Plug-in Base
    Force, I'll take a look into what it would take to allow the embedding. The tough part is that all of the embedding features on PC are from 3rd party plug-ins, so I didn't do any actual coding to get them to work. I'll have to dig through the code to see how it works and how we could get it to work specifically for your site.
     
  3. TheForce

    TheForce Stop War! Lets Rave! Make Love!

    Joined:
    May 30, 2005
    3,461
    537
    0
    Location:
    Wheelersburg, Ohio
    Vehicle:
    2006 Prius
    Model:
    N/A
    Well from my understanding the actual embedding would be in the browser end.

    All that really needs to happen is to have BBcode like [video]http://mysite.com/myvideo.ogv[/video]

    and have that converted to the <video>http://mysite.com/myvideo.ogv</video> tags. The rest is up to the browser from my understanding.

    Thanks for looking into it.
     
  4. Danny

    Danny Admin/Founder
    Staff Member

    Joined:
    Nov 24, 2003
    7,094
    2,116
    1,174
    Location:
    Charlotte, NC
    Vehicle:
    2013 Prius Plug-in
    Model:
    Plug-in Base
    Thanks for walking me through it. That was much easier than I thought it would be. Do you mind testing it with a video from your site?

    Just use the syntax you included above:

    HTML:
     [video]http://mysite.com/myvideo.ogv[/video]
    Edit, here's a test:

    [video]http://upload.wikimedia.org/wikipedia/commons/9/9d/Roomba_video.ogv[/video]
     
  5. TheForce

    TheForce Stop War! Lets Rave! Make Love!

    Joined:
    May 30, 2005
    3,461
    537
    0
    Location:
    Wheelersburg, Ohio
    Vehicle:
    2006 Prius
    Model:
    N/A
    Embeded video below
    [video]http://stuff.jaygroh.com/Fedex2.ogv[/video]
    Embeded video above
     
  6. Danny

    Danny Admin/Founder
    Staff Member

    Joined:
    Nov 24, 2003
    7,094
    2,116
    1,174
    Location:
    Charlotte, NC
    Vehicle:
    2013 Prius Plug-in
    Model:
    Plug-in Base
    Hmm... let me keep working on it.
     
  7. TheForce

    TheForce Stop War! Lets Rave! Make Love!

    Joined:
    May 30, 2005
    3,461
    537
    0
    Location:
    Wheelersburg, Ohio
    Vehicle:
    2006 Prius
    Model:
    N/A
    Maybe its not all just the <video> tag. I looked a little deeper and found this.

    <video src="movie.ogg" controls="controls">
    your browser does not support the video tag
    </video>

    Maybe its a little more complex than I thought.
     
  8. TheForce

    TheForce Stop War! Lets Rave! Make Love!

    Joined:
    May 30, 2005
    3,461
    537
    0
    Location:
    Wheelersburg, Ohio
    Vehicle:
    2006 Prius
    Model:
    N/A
    This may help.

    Basic Syntax

    <video src="http://mysite.com/video.ogv"></video>

    I dont think we would need to set any options for controls but if possible maybe have option for resolution and also put in that "your browser may be be supported"

    <video src="http://mysite.com/video.ogv" width="480" height="320">
    Your Browser does not support the video tag, upgrade to Firefox 3.5+</video>
     
  9. Danny

    Danny Admin/Founder
    Staff Member

    Joined:
    Nov 24, 2003
    7,094
    2,116
    1,174
    Location:
    Charlotte, NC
    Vehicle:
    2013 Prius Plug-in
    Model:
    Plug-in Base
    Booyah, that worked!
     
  10. TheForce

    TheForce Stop War! Lets Rave! Make Love!

    Joined:
    May 30, 2005
    3,461
    537
    0
    Location:
    Wheelersburg, Ohio
    Vehicle:
    2006 Prius
    Model:
    N/A
    AWESOME! Wonder why my video does not work but yours does?
     
  11. Danny

    Danny Admin/Founder
    Staff Member

    Joined:
    Nov 24, 2003
    7,094
    2,116
    1,174
    Location:
    Charlotte, NC
    Vehicle:
    2013 Prius Plug-in
    Model:
    Plug-in Base
    I don't know. Yours works for me in Chrome, but not in FF.
     
  12. TheForce

    TheForce Stop War! Lets Rave! Make Love!

    Joined:
    May 30, 2005
    3,461
    537
    0
    Location:
    Wheelersburg, Ohio
    Vehicle:
    2006 Prius
    Model:
    N/A
    I'll try to find a better converter. I converted it with a firefox plug in. I forget the name of it and I cant find it. I'll try something else when I get home.

    Thanks for getting this working.
     
  13. TheForce

    TheForce Stop War! Lets Rave! Make Love!

    Joined:
    May 30, 2005
    3,461
    537
    0
    Location:
    Wheelersburg, Ohio
    Vehicle:
    2006 Prius
    Model:
    N/A
    Finally figured it out! It was a problem my damn web host.

    I had to add a mime type for OGV to a .htaccess file in the root directory.

    This is what I added.

    AddType application/ogg .ogg
    AddType application/ogg .ogx
    AddType video/ogg .ogv
    AddType audio/ogg .oga


    and now you should see my converted video. :D

    [video]http://stuff.jaygroh.com/Fedex2.ogv[/video]


    Danny can I ask what you did so I can tell Wayne over at cleanmpg.com? I kind of want them to get it working too.
     
  14. Danny

    Danny Admin/Founder
    Staff Member

    Joined:
    Nov 24, 2003
    7,094
    2,116
    1,174
    Location:
    Charlotte, NC
    Vehicle:
    2013 Prius Plug-in
    Model:
    Plug-in Base
  15. TheForce

    TheForce Stop War! Lets Rave! Make Love!

    Joined:
    May 30, 2005
    3,461
    537
    0
    Location:
    Wheelersburg, Ohio
    Vehicle:
    2006 Prius
    Model:
    N/A
    Thanks for the link.

    And thanks again for getting this working. I hope people start using it.