选择本地视频并在HTML5视频播放器中播放（所有本地，同一文件夹） [英] Choose local video and play it in HTML5 videoplayer (all local, same folder)

问题描述

对于学校我需要使用带有额外控件的HTML5视频播放器以及从本地驱动器中选择文件的选项。该页面也在本地运行。所以它没有上传。这些文件（HTML和视频）位于同一个本地文件夹中。

for school I need to use a HTML5 videoplayer with extra controls and the option to choose a file from local drive. The page runs local, too. So it is not uploaded. The files (HTML and video) are in the same local folder.

对于choose-thing，我使用的表单包含< form>< ; input type =fileid =selected/>< button type =submitonclick =open（）;>更改< / button>< / form> 。现在我的JavaScript应该操纵视频播放器的来源：

For the choose-thing I use a form with <form><input type="file" id="chosen" /><button type="submit" onclick="open();">Change</button></form>. Now here is my JavaScript that should manipulate the source of the videoplayer:

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与我的视频播放器相关联。 player.load（） - 事情正常，所以函数被正确调用。

and of course I have connected the variable "player" with my videoplayer. The player.load()-thing works properly, so the function gets called correctly.

现在我的问题：Javascript-Part中有什么问题或缺失？该项目无法解释。

Now my question: What's wrong or missing in the Javascript-Part? The project doesn't work as explained.

也许你可以帮助我。谢谢;）

Maybe you can help me. Thanks ;)

推荐答案

我不确定你在问什么，但你的脚本中有一些问题。

I'm not sure what you're asking, but there are some issues in your script.

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> <的更多信息/ code>： https://developer.mozilla.org/en/HTML/元素/视频

特别是对于脚本： https://developer.mozilla.org/en/DOM/HTMLMediaElement

这篇关于选择本地视频并在HTML5视频播放器中播放（所有本地，同一文件夹）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！