Question

我喜欢在设计新界面时使用JSFiddle，因为我发现它可以方便地使用各种工具。我正在我想要使用视频的网站的前端工作，与图像不同，我不能把它放在imgur上并链接到它，以便免费即时托管，同时我摆弄界面设计。

所以我想知道我是否能以某种方式在我的电脑上使用本地文件作为在现场网站上托管的HTML视频元素的来源。显然，这对于在我的桌面上处理的Web项目来说是微不足道的，但我不确定它是否可以在实时测试中完成。

例如，这可以在我从桌面打开的页面上工作，生活在我的PC上：

<video id="Video-Player">
    <source src="../movie.mp4" type="video/mp4"/>
</video>

但我不知道我是否可以通过网页上的页面来完成相同的操作。

Answer 1

以下是如何允许用户从本地计算机中选择图像。这应该让你开始朝着正确的方向前进。

在HTML

中添加文件输入按钮

<input type="file" id="file-btn"/>

和相应的处理程序

document.getElementById('file-btn').addEventListener('change', function(e){
  readFiles(e.target.files);
})

然后是读取文件的代码

function readFiles(files){
  files = [].slice.call(files); //turning files into a normal array

  for (var file of files){
    var reader = new FileReader();

    reader.onload = createOnLoadHandler(file);
    //there are also reader.onerror reader.onloadstart, reader.onprogress, and reader.onloadend handlers

    reader.readAsDataURL(file);
  }
}

现在，我只用图像做了这个，但这就是我读取图像数据的方式。

function createOnLoadHandler(file){
  console.log('reading ' + file.name + ' of type ' + file.type)

  function onLoad(e){
    var data = e.target.result
    display(data);
  }

  return onLoad
}

function display(data){

    var img = document.createElement('img');
    img.src = data;

    var context = canvas.getContext('2d')
    context.clearRect(0, 0, WIDTH, HEIGHT);
    context.drawImage(img, 0, 0, WIDTH, HEIGHT);
  }

Here is a demo上述代码。

作为旁注，如果您尝试从其他域中读取图片，则会遇到cross origin policy个问题。我认为视频也存在同样的问题。

我可以在实际页面中使用本地文件作为源吗？

1 个答案: