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文件。)
(但是,尝试没有成功。)
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