时间戳

首页 > 解决方案 > 如何在没有后端的网站上预览本地视频文件？

javascript - 如何在没有后端的网站上预览本地视频文件？

问题描述

是否可以使用URL.createObjectURL(fileName)并从那里创建一个托管本地图像文件的 URL，您可以将该 URL 放入img标签中。除了视频文件，您将如何做类似的事情，以便您可以在将视频文件发送到后端之前在网站上预览视频文件？

标签： javascripthtmlwebhtml5-videofrontend

解决方案

你可以这样做，

$(document).on("change", ".file_video", function(evt) {
  var $source = $('#video_here');
  $source[0].src = URL.createObjectURL(this.files[0]);
  $source.parent()[0].load();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<video width="500" controls>
  <source src="my_video.mp4" id="video_here">
</video>

<input type="file" name="file[]" class="file_video" accept="video/*">

您可以从这里获取更多详细信息

推荐阅读