私の 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/から変更
ブラウザにプラグインを追加したり、 を使用しMediaelement.jsたり、objectタグを使用して、選択した 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>
どんな提案でも大歓迎です。