我要实现以下目标。
<video src="file:///Users/username/folder/video.webm"> </video>
目的是使用户能够从他/她的硬盘驱动器中选择文件。
不上传的原因当然是传输成本和存储配额。没有理由保存文件。
可能吗?
可以播放本地视频文件。
<input type="file" accept="video/*"/> <video controls autoplay></video>
通过input元素选择文件时:
input
FileList
input.files
video.src
(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>