2012-04-20 202 views
3

學校我需要使用帶有額外控件的HTML5視頻播放器以及從本地驅動器中選擇文件的選項。該頁面也在本地運行。所以它沒有上傳。文件(HTML和視頻)位於相同的本地文件夾中。選擇本地視頻並在HTML5視頻播放器(所有本地,相同的文件夾)中播放

對於選擇-東西我用一個形式<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中出現了什麼問題?該項目不像解釋的那樣工作。

也許你可以幫我。謝謝;)

+1

你的問題是什麼? – JJJ 2012-04-20 11:13:06

+0

你在FF或其他瀏覽器中檢查? – 2012-04-20 11:38:34

+0

對不起,我很匆忙。所以問題是JavaScript如何操作視頻的源標籤。 Video和HTML-File在本地位於同一個文件夾中。我正在檢查IE9和FF – Schneeschipp 2012-04-20 11:43:21

回答

3

我不確定你在問什麼,但是你的腳本中有一些問題。

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

0

我不知道,如果沒有編解碼器在這裏產生一個問題,你的視頻源網址應該是這個樣子:

<source src="big-buck-bunny_trailer.webm" type='video/webm; codecs="vp8, vorbis"' />