How to set video to play on all major browsers on windows and mac and andoid and iOS devices?

Question

We have a requirement to create video demo of certain products. What is the best way to make sure that video plays on maximum possible browsers on all popular platforms?

Current implementation we just have flash videos that load in a flash player.

Answer 1

Flash would not be playable on any iOS devices.

Edit: I misread the question. If you use youtube to host the video and embed a youtube video, you can then play the video on an iOS device through the youtube app. That would be one way to do it.

Answer 2

Use embeddable video players that have fallback to HTML5 versions on your website page (eg, JWPlayer). That way you'll get predictable/stable playback using Flash on all browsers, and HTML5 playback on devices that support it (Android, iOS, others).

Answer 3

If a hosted service is a viable option for you, paid accounts at sites like Vimeo and Wistia will serve Flash video to desktop browsers and HTML5 video for smartphones and other mobile devices like the iPad and upcoming tablets from Samsung, Blackberry, etc.

If you'll be doing all of the hosting yourself, I recommend using the HTML5 video tag with a simple fallback to Flash. The excellent VideoJS script handles most of the hard stuff for you and even allows you to build custom embed codes.

Basically, the HTML would look like this:

<video width="640" height="360" poster="poster.png" controls preload>
    <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> <!-- This video file is for Safari, Chrome and smartphones running iOS and Android, it will also be referenced later in the Flash fallback for Internet Explorer -->
    <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"' /> <!-- This video file is for Firefox, Opera, and is also supported by Chrome -->

    <object id="flash_fallback" width="640" height="360" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf"&gt; <!-- This calls on FlowPlayer, an excellent third party Flash video player -->
        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
        <param name="allowfullscreen" value="true" />
        <param name="flashvars" value='config={"playlist":["poster.png", {"url": "video.mp4","autoPlay":false,"autoBuffering":true}]}' /> <!-- Notice here you're calling the same .mp4 file as above -->
        <img src="poster.png" width="640" height="360" alt="Poster Image" title="No video playback capabilities." /> <!-- If the browser can't handle any of the HTML5 video files and doesn't have Flash installed, they'll just get the poster frame as shown here -->
    </object>
</video>

Hope this helps!