window.URL.createObjectURL 的使用预览本地视频及图片

window.URL.createObjectURL    

可以用于在浏览器上预览本地图片或者视频

在预览视频时,我一直将以为将window.URL.createObjectURL生成的URL,赋给video中的source标签是可以的,结果是不行的,得不到视频,如下图

需要将其赋给video标签才行,如下图

像腾讯,优酷都是这么做的,没有使用source标签,如下图(只不过不是本地视频)

预览视频代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<div>
  <video width="400" height="500" controls="controls">
  </video>
</div>

<input type="file" accept="video/*" />
<script type="text/javascript">

$("input").change(function(){

  var files = this.files;

  if(!files.length) {

    return;

  }

  $("video").attr("src", window.URL.createObjectURL(files[0]));

  $("video").get(0).play();

});

</script>


</body>

</html>

发布了48 篇原创文章 · 获赞 12 · 访问量 5万+

猜你喜欢

转载自blog.csdn.net/qq_40999917/article/details/103893085