Thread: Video embedding

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

    Join Date
    Nov 2005
    Posts
    122
    Rep Power
    10

    Video embedding


    I want to make a real simple webpage for information. I would like to show an iPad or tablet on the home page and have that picture be a link to open a pop out window with a video playing. I've been out of video embedding so long I'm not sure what standards need followed. I want the video to be able to play on tablets and iPhones as well so I'm sure the coding and video format are very specfic. Based on what I know so far, MP4 would be safe for apple devices. The question is do I have to use something like flowplayer or lightbox to have the video play in a pop out player? Any suggestions would be helpful, and prevent this!
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    14
    Rep Power
    0
    yes you need to use flow player like embedded video player to play your mp4 videos.
  4. #3
  5. No Profile Picture
    Lost in code
    Devshed Supreme Being (6500+ posts)

    Join Date
    Dec 2004
    Posts
    8,316
    Rep Power
    7171
    In order to do cross-device and cross-browser video embedding, you need to provide the video in both MP4 and WebM formats, because neither format is universally supported. Additionally, if you want to support IE 8 or lower then you also need to provide a flash version of the video.

    The embed coding is not actually very complicated. You could use something like flowplayer or jwplayer if you want and that may make it easier, but it is not necessary. Look up the HTML5 video tag for details.

    Use of a lightbox type of plugin is again optional, but may make your task easier.
    PHP FAQ

    Originally Posted by Spad
    Ah USB, the only rectangular connector where you have to make 3 attempts before you get it the right way around
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2005
    Posts
    122
    Rep Power
    10
    When I've tried to declare the document as HTML5 so I can use flowplayer it screws up the entire template layout. Tables and spacing are all over the place, yet supposedly HTML5 did not change anything relating to table formatting. I'm already not a fan of HTML5. That's why I was trying to avoid flowplayer.
  8. #5
  9. No Profile Picture
    Lost in code
    Devshed Supreme Being (6500+ posts)

    Join Date
    Dec 2004
    Posts
    8,316
    Rep Power
    7171
    HTML5 didn't change anything related to table formatting, however if your document was previously relying on quirks-mode to function correctly, changing to HTML5 would have forced it out of quirks-mode and into standards compliant mode, which could have changed the spacing and tables depending on how cleanly your existing code is written.

    Without HTML5, the only reliable way to embed videos in a web page is using Flash (which will not work on iOS or recent Android devices). There is no reliable way to embed video on mobile devices without HTML5.

    Comments on this post

    • Kravvitz agrees
    PHP FAQ

    Originally Posted by Spad
    Ah USB, the only rectangular connector where you have to make 3 attempts before you get it the right way around
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2005
    Posts
    122
    Rep Power
    10
    I don't want to be a total idiot, but what do you mean by "quirks mode"? I assume just an undeclared HTML file. When I created the template each cell's width and height is defined to match the image placed in it so there are really no loose ends. For example, let's say I have a TR row with 3 images I'm trying to seamlessly split into 3 blocks...

    <table>
    <tr>
    <td width="100"><img src="img1.jpg" width="100 height="50"></td>
    <td width="600"><img src="img2.jpg" width="600 height="50"></td>
    <td width="100"><img src="img3.jpg" width="100 height="50"></td>
    </tr>
    </table>
    Is that well defined enough, or incorrect? I have no doubt I am likely at fault. I have about a day or two to get this posted and reworking the entire template to play a video is going to be too much in my time frame.
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2006
    Posts
    40
    Rep Power
    9
    Your best option for multiple device video player for both mobile devices , tablets and computer is html5
  14. #8
  15. No Profile Picture
    Lost in code
    Devshed Supreme Being (6500+ posts)

    Join Date
    Dec 2004
    Posts
    8,316
    Rep Power
    7171
    Was out of town when you replied so you may have already resolved this.

    I don't want to be a total idiot, but what do you mean by "quirks mode"?
    http://en.wikipedia.org/wiki/Quirks_mode
    Quirks mode means that instead of rendering the page according to the HTML standards, it renders it according to the way browsers used to render it before they followed the standards. In the IE 4/5/6 days, Microsoft didn't give a **** about HTML standards and did a terrible job of following them. However, since they absolutely dominated the market share, all of the other browsers had to render according to Microsoft standards rather than HTML standards. Then Firefox came along with tabs, add-ons and actual standards compliance, and suddenly Microsoft started bleeding market share. So IE 7/8/9/10 have steadily started adhering to the actual standards more and more to the point where I rarely see compatibility issues in IE 10 anymore.

    In HTML 5, quirks mode has gone away and everything should theoretically render in exactly the same way (which it doesn't). The rules for whether or a not a file is rendered in quirks mode is complicated and varies from one browser to the next, but if the file is declared as HTML 5 then quirks mode is universally off.

    If you're getting gaps between elements it's probably because you have padding or a margin on them. If you use your browser's element inspect, you should be able to determine which elements have it.
    PHP FAQ

    Originally Posted by Spad
    Ah USB, the only rectangular connector where you have to make 3 attempts before you get it the right way around
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2005
    Posts
    122
    Rep Power
    10
    Thanks for detailed description, it's what I figured you meant. For this website I had a very fast deadline so it actually is being run in quirks mode right now because I had no choice.

    What's weird is I am normally very thorough in terms of setting table sizes, spacing and margins. Pretty much I do nothing with margins, it's all manually set to 0. I'm glad the interwebs are striving to make an HTML5 for cross platform continuity. In the end it should make most all browsers function about the same, and you're right that it has gotten much better even in the last year.

    My cell margin issues seem to happen when you start spanning columns. You could have code as simple as what I posted earlier and still you end up with a 1 to 2 px space at random places. I need to try building a couple templates and doing one step at a time and seeing what element is at fault.

IMN logo majestic logo threadwatch logo seochat tools logo