Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
Welcome To Ask or Share your Answers For Others

Categories

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.

(我基于PC的Web应用程序使用HTML5,我想导入mpeg文件以在我的浏览器中播放,这些文件已由其他应用程序以这种方式保存。)

Is there a way to play these video files with HTML5?

(有没有办法用HTML5播放这些视频文件?)

EDIT:

(编辑:)

The application tries to play the mpeg files from the local hard drive rather than from the server.

(该应用程序尝试从本地硬盘驱动器而不是从服务器播放mpeg文件。)

So, user has an ability to choose the mpeg files to play the selected mpeg files.

(因此,用户可以选择mpeg文件来播放所选的mpeg文件。)

HTML:

(HTML:)

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

Javascript:

(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/

(修改自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.

(我尝试了一些操作,例如将插件添加到浏览器,使用Mediaelement.js ,使用object标签来查看是否可以播放所选的mpeg文件。)

But, the attempts were unsuccessful.

(但是,尝试没有成功。)

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

(以下是我在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.

(任何建议都将受到高度赞赏。)

  ask by sagar pant translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
502 views
Welcome To Ask or Share your Answers For Others

1 Answer

By "mpeg", if you are referring to H.264/MP4 :(如果您指的是H.264 / MP4 ,则使用“ mpeg”:)


UPDATE (2017, December):

(更新 (2017年12月):)

  • MP4 is now supported by all major browsers.

    (现在 ,所有主流浏览器都支持 MP4。)

    (IE9+, and all modern desktop and mobile browsers).

    ((IE9 +,以及所有现代台式机和移动浏览器)。)

  • Don't use flash as a fallback anymore, Flash is almost dead.

    (不要再将Flash用作后备了,Flash快要死了。)

Other Notes (from caniuse):

(其他说明(来自犬类):)

  • Firefox supports H.264 on Windows 7 and later since version 21.

    (从版本21开始,Firefox在Windows 7和更高版本上支持H.264。)

  • Firefox supports H.264 on Linux since version 26 if the appropriate gstreamer plug-ins are installed.

    (如果安装了适当的gstreamer插件,Firefox从版本26开始就在Linux上支持H.264。)

  • In Windows 7, the maximum supported resolution is 1920 × 1088 pixels for both software and DXVA decoding.

    (在Windows 7中,软件和DXVA解码的最大支持分辨率均为1920×1088像素。)

    MSDN).

    (MSDN)。)

  • Chrome has performance problems with long h.264 videos.

    (Chrome的h.264较长视频存在性能问题。)

  • 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.

    (浏览器在视频中有多个音频轨道时遇到麻烦(支持多语言):IE 11支持它,Firefox播放最后一个曲目,Chrome播放第一个曲目。)


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..

(Firefox和Opera在HTML5 <video>标签内不支持MP4。)

Also, Google has announced (in 2011) that they will be removing H.264 support from Chrome .

(此外, Google已宣布 (2011年) 从Chrome中删除对H.264的支持 。)

The reason seems to be Google's acquisition of On2 Technologies and the VP8 codec .

(原因似乎是Google 收购On2 TechnologiesVP8编解码器 。)

Which is an equally powerful codec and made royalty-free by Google after the acquisition.

(这是同等强大的编解码器,并在收购后由Google 免收专利使用费 。)

Chrome, Firefox and Opera supports this codec via WebM which consists of VP8 video and Vorbis audio.

(Chrome,Firefox和Opera通过WebM支持此编解码器,该WebM由VP8视频和Vorbis音频组成。)

So probably soon enough, Internet Explorer and Safari will be the only browsers supporting H.264;

(很快, Internet ExplorerSafari将成为唯一支持H.264的浏览器。)

which is not a royalty-free codec and Microsoft and Apple are patent holders!..

(这不是免版税的编解码器,并且MicrosoftApple是专利持有人!)

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

(因此,您可以做的(为跨浏览器支持)是:)

  1. Fall back to Adobe Flash (player) when H.264 is not supported.

    (不支持H.264时退回到Adobe Flash (播放器) 。)

  2. Create multiple encoded versions of your videos including MP4, WebM and Ogg (in order).

    (创建视频的多个编码版本,包括MP4,WebM和Ogg(按顺序)。)

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

(或更好的是,请参见此后备机制的示例(由Kroc Camen撰写 ),该示例将它们全部结合在一起:)

Note 1 : I slightly modified this to add WebM support.

(注1 :我对此进行了少许修改,以添加WebM支持。)


Note 2 : You should include MP4 at the top, because of an iPad bug that stops the video while searching for the source.

(注意2 :由于iPad错误会在搜索源时停止视频,因此您应该在顶部添加MP4。)

<!-- 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 :(如果您是指MPEG-1或MPEG-2 ,则使用“ mpeg”:)

Then No :(

(那就不要 :()


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
...