我基于 PC 的 Web 应用程序使用 HTML5,我想导入 mpeg 文件以在我的浏览器中播放,这些文件已被其他应用程序以这种方式保存。有没有办法用 HTML5 播放这些视频文件?
编辑:
该应用程序尝试从本地硬盘驱动器而不是从服务器播放 mpeg 文件。因此,用户可以选择 mpeg 文件来播放选定的 mpeg 文件。
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));
修改自http://jsfiddle.net/dsbonev/cCCZ2/embedded/result,js,html,css/presentation/
我尝试了一些东西,比如在浏览器中添加插件,used Mediaelement.js
, usedobject
标签来查看是否可以播放这些选定的 mpeg 文件。但是,这些尝试都没有成功。
下面是我在 html5 中使用 object 标签的代码片段
<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>
任何建议都受到高度赞赏。