html - 加载和播放视频文件的新手问题

Question

试图建立一个网页，允许访问者从他们的硬盘（a-la YouTube）上传和播放视频。

该文件似乎已加载，但无法播放。使用 Dreamweaver。输出到铬。谢谢！

<video autoplay id="video" controls>
  <source id="source" type="video/mp4" />
</video>
<br /><br />
<input type="file" name="file" onchange="SelectedVideo(this);" />
<script>
  function selectedVideo(self) {
    var file = self.files[0];
    var reader = new FileReader();

    reader.onload = function (e) {
      var src = e.target.result;
      var video = document.getElementById("video");
      var source = document.getElementById("source");

      source.setAttribute("src", src);
      video.load();
      video.play();
    };

    reader.readAsDataURL(file);
  }
</script>

Answer 1

您正在调用SelectedVideo，但您的函数定义为selectedVideo

只需更改它，它应该可以工作。

<video autoplay id="video" controls>
  <source id="source" type="video/mp4" />
</video>
<br /><br />
<input type="file" name="file" onchange="selectedVideo(this);" /> 
                                         ^^^^ here is the problem
<script>
  function selectedVideo(self) {
    var file = self.files[0];
    var reader = new FileReader();

    reader.onload = function (e) {
      var src = e.target.result;
      var video = document.getElementById("video");
      var source = document.getElementById("source");

      source.setAttribute("src", src);
      video.load();
      video.play();
    };

    reader.readAsDataURL(file);
  }
</script>