对于学校,我需要使用带有额外控件的 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 部分有什么问题或缺失?该项目没有按照解释进行。
也许你可以帮助我。谢谢 ;)
我不确定你在问什么,但你的脚本中有一些问题。
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/HTML/Element/video
特别是对于脚本编写:https://developer.mozilla.org/en/DOM/HTMLMediaElement https://developer.mozilla.org/en/DOM/HTMLMediaElement
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)