3

学校では、追加のコントロールと、ローカル ドライブからファイルを選択するオプションを備えた HTML5 ビデオ プレーヤーを使用する必要があります。ページもローカルで実行されます。なのでアップロードされていません。ファイル (HTML とビデオ) は同じローカル フォルダーにあります。

選択するものについては、 のフォームを使用し<form><input type="file" id="chosen" /><button type="submit" onclick="open();">Change</button></form>ます。ビデオプレーヤーのソースを操作する JavaScript は次のとおりです。

function open()
{
    var file=document.getElementById('chosen');
    var fileURL = window.URL.createObjectURL(file);
    player.src=fileURL;
    player.load();
}

ビデオプレーヤーは次のようになります。

<video id=player>
<source src="big-buck-bunny_trailer.webm" type="video/webm" />
<source src="trailer_480p.mov" type"video/mp4" />
</video>

もちろん、変数「プレーヤー」をビデオプレーヤーに接続しました。player.load() が適切に機能するため、関数が正しく呼び出されます。

今私の質問: Javascript-Part で何が間違っているか、または不足していますか? プロジェクトは説明どおりに機能しません。

多分あなたは私を助けることができます。ありがとう ;）

4

2 に答える 2

6

何を求めているのかわかりませんが、スクリプトにいくつかの問題があります。

function openPlayer(){ // open() is a native function, don't override
  var vplayer=document.getElementById('player'); // A reference to the video-element
  var file=document.getElementById('chosen').files[0]; // 1st member in files-collection
  var fileURL = window.URL.createObjectURL(file);
  vplayer.src=fileURL;
  vplayer.load();
  return; // A good manner to end up a function
}

で関数の名前を変更することを忘れないでくださいonclick()。

についての詳細情報<video>: https://developer.mozilla.org/en/HTML/Element/video

特にスクリプトの場合: https://developer.mozilla.org/en/DOM/HTMLMediaElement

于 2012-04-20T12:22:17.437 に答える
0

ここでコーデックの欠如が問題を引き起こしているかどうかはわかりません。ビデオ ソースの URL は次のようになります。

<source src="big-buck-bunny_trailer.webm" type='video/webm; codecs="vp8, vorbis"' />
于 2012-04-20T19:34:56.550 に答える