播放带有 HTML5 视频标签的本地(硬盘)视频文件? [英] Play local (hard-drive) video file with HTML5 video tag?

问题描述

我想实现以下目标.

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

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

The intent is that the user will be able to select a file from his/her hard drive.

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

And the reason for not uploading is of course transmission costs and storage quota. There will be no reason to save the file.

有可能吗?

推荐答案

可以播放本地视频文件.

It is possible to play a local video file.

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

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

When a file is selected via the input element:

1. 'change' 事件被触发
2. 从 input.filesFile 对象> 文件列表
3. 创建一个指向文件的对象 URL对象
4. 将对象 URL 设置为 video.src 属性

5. 靠后看:)

1. 'change' event is fired
2. Get the first File object from the input.files FileList
3. Make an object URL that points to the File object
4. Set the object URL to the video.src property

5. Lean back and watch :)

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>

这篇关于播放带有 HTML5 视频标签的本地(硬盘)视频文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！