html - 使用 HTML5 视频标签播放本地(硬盘)视频文件？

Question

我想实现以下目标。

<video src="file:///Users/username/folder/video.webm">
</video>

这样做的目的是让用户能够从他/她的硬盘驱动器中选择一个文件。

而没有上传的原因当然是传输成本和存储配额。没有理由保存文件。

这可能吗？

Answer 1

可以播放本地视频文件。

<input type="file" accept="video/*"/>
<video controls autoplay></video>

当通过 input 元素选择文件时:

1. 'change' 事件被触发
2. 获得第一个File input.files 中的对象 FileList
3. 制作一个object URL指向文件对象
4. 将对象 URL 设置为 video.src 属性

5. 向后靠并观看 :)

http://jsfiddle.net/dsbonev/cCCZ2/embedded/result,js,html,css/

(function localFileVideoPlayer() {
  'use strict'
  var URL = window.URL || window.webkitURL
  var displayMessage = function(message, isError) {
    var element = document.querySelector('#message')
    element.innerHTML = message
    element.className = isError ? 'error' : 'info'
  }
  var playSelectedFile = function(event) {
    var file = this.files[0]
    var type = file.type
    var videoNode = document.querySelector('video')
    var canPlay = videoNode.canPlayType(type)
    if (canPlay === '') canPlay = 'no'
    var message = 'Can play type "' + type + '": ' + canPlay
    var isError = canPlay === 'no'
    displayMessage(message, isError)

    if (isError) {
      return
    }

    var fileURL = URL.createObjectURL(file)
    videoNode.src = fileURL
  }
  var inputNode = document.querySelector('input')
  inputNode.addEventListener('change', playSelectedFile, false)
})()

video,
input {
  display: block;
}

input {
  width: 100%;
}

.info {
  background-color: aqua;
}

.error {
  background-color: red;
  color: white;
}

<h1>HTML5 local video file player example</h1>
<div id="message"></div>
<input type="file" accept="video/*" />
<video controls autoplay></video>