Javascript 有没有办法在 HTML5 中播放 mpeg 视频？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14929516/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a way to play mpeg videos in HTML5?
提问by sagar pant
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?
我的基于 pc 的 web 应用程序使用 HTML5，我想导入 mpeg 文件以在我的浏览器中播放，这些文件已被其他应用程序以这种方式保存。有没有办法用 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.
应用程序尝试从本地硬盘驱动器而不是从服务器播放 mpeg 文件。因此，用户可以选择 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 objecttag to see if those selected mpeg files can be played. But, the attempts were unsuccessful.
我尝试了一些事情，例如向浏览器添加插件、used Mediaelement.js、usedobject标签，以查看是否可以播放那些选定的 mpeg 文件。但是，这些尝试都没有成功。
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.
任何建议都受到高度赞赏。
回答by Onur Y?ld?r?m
By "mpeg", if you are referring to H.264/MP4:
通过“mpeg”，如果您指的是H.264/MP4：
UPDATE(2017, December):
更新（2017 年 12 月）：
- MP4 is now supportedby 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):
其他注意事项（来自 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.
- Firefox 支持 Windows 7 及自版本 21 以后的 H.264。
- 如果安装了适当的 gstreamer 插件，Firefox 从版本 26 开始就支持 Linux 上的 H.264。
- 在 Windows 7 中，软件和 DXVA 解码支持的最大分辨率为 1920 × 1088 像素。MSDN）。
- Chrome 在处理长 h.264 视频时存在性能问题。
- 浏览器在处理视频中的多个音轨时遇到问题（用于多语言支持）：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. The reason seems to be Google's acquisitionof On2 Technologiesand the VP8 codec. Which is an equally powerful codec and made royalty-freeby Google after the acquisition. Chrome, Firefox and Opera supports this codec via WebMwhich consists of VP8 video and Vorbis audio.
此外，Google 已宣布（在 2011 年）他们将从 Chrome 中删除 H.264 支持。原因似乎是谷歌收购了On2 Technologies和VP8 编解码器。这是一个同样强大的编解码器，在收购后被谷歌免版税。Chrome、Firefox 和 Opera 通过WebM支持此编解码器，WebM由 VP8 视频和 Vorbis 音频组成。
So probably soon enough, Internet Explorerand Safariwill be the only browsers supporting H.264; which is not a royalty-free codec and Microsoftand Appleare patent holders!..
所以可能很快，Internet Explorer和Safari将成为唯一支持 H.264 的浏览器；这不是免版税的编解码器，微软和苹果是专利持有人！...
So what you can do (for cross-browser support) is;
所以你可以做的（跨浏览器支持）是；
- Fall back to Adobe Flash(player)when H.264 is not supported.
- Create multiple encoded versions of your videos including MP4, WebM and Ogg (in order).
- 当不支持 H.264 时，回退到Adobe Flash（播放器）。
- 创建视频的多个编码版本，包括 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.
Note 2: You should include MP4 at the top, because of an iPad bug that stops the video while searching for the source.
注意 1：我稍微修改了它以添加 WebM 支持。
注意 2：您应该在顶部包含 MP4，因为 iPad 错误会在搜索源时停止视频。
<!-- 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&image=__POSTER__.JPG&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”，如果您指的是MPEG-1 或 MPEG-2：
Then No :(
那就不要 ：（
回答by Cris Rockwell
It's clear that you cannot play mpeg1 or mpeg2 using html5. I also was looking into something like that. You could embed a VLC web player that can handle these video formats pretty easily. Maybe consider... https://wiki.videolan.org/Documentation:WebPlugin/
很明显，您不能使用 html5 播放 mpeg1 或 mpeg2。我也在研究类似的东西。您可以嵌入一个可以轻松处理这些视频格式的 VLC 网络播放器。也许考虑...... https://wiki.videolan.org/Documentation:WebPlugin/
<html>
<title>VLC Mozilla plugin test page</title>
<body>
<embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org"
width="640" height="480" id="vlc">
</embed>
<script language="Javascript">
<!--
var vlc = document.getElementById("vlc");
vlc.audio.toggleMute();
//!-->
</script>
</body>
</html>
回答by foxiris
For MPEG1, you can try jsmpeg. JSMpeg is lower latency.
对于 MPEG1，您可以尝试jsmpeg。JSMpeg 延迟更低。
And you can check https://jsmpeg.com/for pros and cons
您可以查看https://jsmpeg.com/以了解优缺点
