本文介绍了播放带有 HTML5 视频标签的本地(硬盘)视频文件?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想实现以下目标.
<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:
- 'change' event is fired
- Get the first File object from the
input.files
FileList - Make an object URL that points to the File object
- Set the object URL to the
video.src
property 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 视频标签的本地(硬盘)视频文件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!