我想实现以下目标。
<video src="file:///Users/username/folder/video.webm">
</video>
这样做的目的是让用户能够从他/她的硬盘驱动器中选择一个文件。
而没有上传的原因当然是传输成本和存储配额。没有理由保存文件。
这可能吗?
最佳答案
可以播放本地视频文件。
<input type="file" accept="video/*"/>
<video controls autoplay></video>
当通过 input
元素选择文件时:
- 'change' 事件被触发
- 获得第一个File
input.files
中的对象 FileList - 制作一个object URL指向文件对象
- 将对象 URL 设置为
video.src
属性 向后靠并观看 :)
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>
关于html - 使用 HTML5 视频标签播放本地(硬盘)视频文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20632023/