我正在尝试浏览和上传视频使用代码在这个提琴。
(function localFileVideoPlayerInit(win) {
var URL = win.URL || win.webkitURL,
displayMessage = (function displayMessageInit() {
var node = document.querySelector('#message');
return function displayMessage(message, isError) {
node.innerHTML = message;
node.className = isError ? 'error' : 'info';
};
}()),
playSelectedFile = function playSelectedFileInit(event) {
var file = this.files[0];
var type = file.type;
var videoNode = document.querySelector('video');
var canPlay = videoNode.canPlayType(type);
canPlay = (canPlay === '' ? 'no' : canPlay);
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;
},
inputNode = document.querySelector('input');
if (!URL) {
displayMessage('Your browser is not ' +
'<a href="http://caniuse.com/bloburls">supported</a>!', true);
return;
} inputNode.addEventListener('change', playSelectedFile, false);
}(window));
文件类型.mp4
的预览按要求工作,但其他一些文件类型如.mov, .avi
等无法预览
不同的浏览器支持不同的视频容器(mp4, mov, WebM等)和编解码器(h.264, VP8等),不幸的是,这也会随着时间的推移而改变。Chrome甚至不一定支持mp4,但许多系统都安装了支持mp4的功能(https://en.wikipedia.org/wiki/HTML5_video#Browser_support)。
一般来说,如果你希望能够跨浏览器播放视频,你需要提供不同格式的视频——这里有一个跨浏览器方法的例子,它是最新的:
- http://v4e.thewikies.com
不幸的是,这对你的特定用例没有太大帮助-你需要上传视频并首先将其转换为不同的格式,这可能不是你想要的。
理论上也可以使用Javascript在客户端将视频转换为必要的格式(例如https://bgrins.github.io/videoconverter.js/),但我认为这将非常缓慢,可能无法满足您的预览需求。