Is there a way to play mpeg videos in HTML5?

Question

My pc based web application uses HTML5, and I want to import mpeg files to play in my browser which have been saved that way by other application. Is there a way to play these video files with HTML5?

EDIT:

The application tries to play the mpeg files from the local hard drive rather than from the server. So, user has an ability to choose the mpeg files to play the selected mpeg files.

HTML:

<input id="t20provideoinput" type="file" multiple accept="video/*"/>
<video id="t20provideo" controls controls>

Javascript:

(function localFileVideoPlayerInit(win) {
    var URL = win.URL || win.webkitURL;
    var sources = [];
    var j = 1;
    var videoNode = document.querySelector('video');
    var videoNode1 = document.querySelector('object');
    var groupElement = document.getElementsByClassName('metric')[0];
    console.log('this is group element ' + groupElement);

    var playSelectedFile = function playSelectedFileInit(event) {
            for(var i=0; i<this.files.length; i++){
                var file = this.files[i];

                var type = file.type;


                var fileURL = URL.createObjectURL(file);

                sources.push(fileURL);
            }

            groupElement.addEventListener('click', function(){
                videoNode.src = sources[0];
            });
        };

    var inputNode = document.getElementById('t20provideoinput');

    videoNode.addEventListener('ended', function(){
       videoNode.src = sources[j++];
       videoNode.load();
       videoNode.play();
    }, false);

    if (!URL) {
        displayMessage('Your browser is not ' + 
           '<a href="http://caniuse.com/bloburls">supported</a>!', true);

        return;
    }                

    console.log(inputNode);
    if (inputNode != null) { 
        inputNode.addEventListener('change', playSelectedFile, false);
    }

}(window)); 

modified from http://jsfiddle.net/dsbonev/cCCZ2/embedded/result,js,html,css/presentation/

I tried few things like adding plugins to the browser, used Mediaelement.js, used object tag to see if those selected mpeg files can be played. But, the attempts were unsuccessful.

Below is the code snippet where I used the object tag in html5

<object type="video/mpeg" data="test.mpeg" width="200" height="40">
  <param name="src" value="test.mpeg" />
  <param name="autoplay" value="false" />
  <param name="autoStart" value="0" />
</object>

Any suggestion is highly appreciated.

Answer 1

By "mpeg", if you are referring to H.264/MP4:

---

UPDATE (2017, December):

• MP4 is now supported by all major browsers. (IE9+, and all modern desktop and mobile browsers).
• Don't use flash as a fallback anymore, Flash is almost dead.

Other Notes (from caniuse):

• Firefox supports H.264 on Windows 7 and later since version 21.
• Firefox supports H.264 on Linux since version 26 if the appropriate gstreamer plug-ins are installed.
• In Windows 7, the maximum supported resolution is 1920 × 1088 pixels for both software and DXVA decoding. MSDN).
• Chrome has performance problems with long h.264 videos.
• Browsers have trouble with more than one audio track in a video (for multi-language support): IE 11 supports it, Firefox plays the last track, Chrome plays the first track.

---

Old Answer (kept for historical purposes):

The answer is "not on every browser". Firefox and Opera does not support MP4 within the HTML5 <video> tag..

Also, Google has announced (in 2011) that they will be removing H.264 support from Chrome. The reason seems to be Google's acquisition of On2 Technologies and the VP8 codec. Which is an equally powerful codec and made royalty-free by Google after the acquisition. Chrome, Firefox and Opera supports this codec via WebM which consists of VP8 video and Vorbis audio.

So probably soon enough, Internet Explorer and Safari will be the only browsers supporting H.264; which is not a royalty-free codec and Microsoft and Apple are patent holders!..

So what you can do (for cross-browser support) is;

1. Fall back to Adobe Flash (player) when H.264 is not supported.
2. Create multiple encoded versions of your videos including MP4, WebM and Ogg (in order).

Or better, see this example of a fallback mechanism (by Kroc Camen) which combines them all:

Note 1: I slightly modified this to add WebM support.
Note 2: You should include MP4 at the top, because of an iPad bug that stops the video while searching for the source.

<!-- first try HTML5 playback: if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise -->
<!-- warning: playback does not work on iOS3 if you include the poster attribute! fixed in iOS4.0 -->
<video width="640" height="360" controls>
    <!-- MP4 must be first for iPad! -->
    <source src="__VIDEO__.MP4" type="video/mp4" /><!-- IE / Safari / iOS video    -->
    <source src="__VIDEO__.WEBM" type="video/webm" /><!-- Firefox / Chrome / Opera / Android  -->
    <source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera / Chrome10 -->
    <!-- fallback to Flash: -->
    <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
        <!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
        <param name="movie" value="__FLASH__.SWF" />
        <param name="flashvars" value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
        <!-- fallback image. note the title field below, put the title of the video there -->
        <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
             title="No video playback capabilities, please download the video below" />
    </object>
</video>
<!-- you *must* offer a download link as they may be able to play the file locally. customise this bit all you want -->
<p> <strong>Download Video:</strong>
    Closed Format:  <a href="__VIDEO__.MP4">"MP4"</a>
    Open Formats:   <a href="__VIDEO__.WEBM">"WebM"</a>, <a href="__VIDEO__.OGV">"Ogg"</a>
</p>

By "mpeg", if you are referring to MPEG-1 or MPEG-2:

Then No :(