选择本地视频并在HTML5视频播放器(所有本地，同一文件夹）中播放

Choose local video and play it in HTML5 videoplayer (all local, same folder)

本文关键字：视频 文件夹 播放 HTML5 播放器 选择      更新时间：2023-09-26

对于学校，我需要使用带有额外控件的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（）-thing工作正常，因此函数被正确调用。

现在我的问题是：Javascript-Part有什么问题或缺失？该项目未按说明工作。

也许你可以帮我。谢谢;)

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

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

我不确定缺少编解码器是否会导致这里出现问题，您的视频源网址应如下所示：

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