从 blob 加载视频预览时的 Jquery 触发器函数
Jquery trigger function when video preview has loaded from blob
我有一个功能,允许用户从他们的计算机或设备选择和上传视频,当用户选择一个文件时,它会向用户预览自己(图像/视频)。该功能适用于图像,但无法捕获视频的负载。如果视频作为 blob 加载,并且使用 javascript 创建 html 元素,这是否仍然有效?
代码是这样的
function () {
//first run file check restrictions
//if no errors
var chatW = $('#chatView #chatWindow');
var parent = $('<li/>', { class : 'me', 'data-role' : 'none'});
var pp = $('<div/>', {class : 'pp'});
var msg = $('<div/>', { class : 'message file_' + type + '', 'data-date' : 'NEW DATE', id : 'chat_TEMPID' });
switch(type){
case 'image':
var FR= new FileReader();
FR.onload = function(e) {
msg.css('background-image', 'url(' + e.target.result + ')');
};
FR.readAsDataURL( this.files[0] );
///handle the the upload
var imageSize = readableSize(filesize);
var loader = $('<div/>', {class : 'not_saved', 'data-size' : imageSize});
loader.data('size', imageSize);
loader.appendTo(msg);
break;
case 'video':
var url = window.URL.createObjectURL(file);
var video = $('<video/>', { autoplay : false, src : url });
video.appendTo(msg);
function checkLoad() {
if (video.readyState === 4) {
video.currentTime = (10 / 29.97);
console.log('Video has loaded');
} else {
console.log('Not Loaded');
setTimeout(checkLoad, 100);
}
}
checkLoad();
var loader = $('<div/>', {class : 'not_saved', 'data-size' : readableSize(filesize)});
loader.data('size', readableSize(filesize));
loader.appendTo(msg);
break;
case 'file':
//and so on
break;
case 'other':
//and so on
break;
}
pp.appendTo(parent);
msg.appendTo(parent);
parent.appendTo(chatW);
}
我认为问题是函数的这一部分:
case 'video':
var url = window.URL.createObjectURL(file);
var video = $('<video/>', { autoplay : false, src : url });
video.appendTo(msg);
function checkLoad() {
if (video.readyState === 4) {
video.currentTime = (10 / 29.97);
console.log('Video has loaded');
} else {
console.log('Not Loaded');
setTimeout(checkLoad, 100);
}
}
checkLoad();
var loader = $('<div/>', {class : 'not_saved', 'data-size' : readableSize(filesize)});
loader.data('size', readableSize(filesize));
loader.appendTo(msg);
break;
视频确实加载了,如果我设置控件,我可以播放视频。检查负载功能接缝在恒定循环上运行。
完整代码
var validateFileUpload = function () {
var file = this.files[0];
var type = file.type.split('/'); type = type[0];
var filesize = file.size;
if(type != 'video' && type != 'image' && type != 'text'){ type = 'other'; }
var restrictions = {
video : {
size : 30000000, /* 30mb */
warning : 'Videos should be less than 30MB in size'
},
image : {
size : 15000000, /* 15mb */
warning : 'Images should be less than 15mb in size'
},
text : {
size : 5000000, /* 5mb */
warning : 'Text files should be less than 5mb in size'
},
other : {
size : 30000000, /* 30mb */
warning : 'All other files should be less than 10mb'
}
};
var readableSize = function (bytes){
if(bytes == 0) return '0 Byte';
var k = 1000;
var dm = 1 || 3;
var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
var i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
if(filesize < 1000){
return filesize + 'BTYES';
} else if(filesize >= 1000 && filesize < 10000){
return Math.round(filesize / 10000) + 'KB';
} else {
return Math.round(filesize / 100000) + 'MB';
}
}
if(filesize > restrictions[type].size){
makeToast(restrictions[type].warning);
} else {
var chatW = $('#chatView #chatWindow');
var parent = $('<li/>', { class : 'me', 'data-role' : 'none'});
var pp = $('<div/>', {class : 'pp'}); //add background image in here
var msg = $('<div/>', { class : 'message file_' + type + '', 'data-date' : 'NEW DATE', id : 'chat_TEMPID' }); //change the temp ID after send
switch(type){
case 'image':
//this will need changing to cordova function later
var FR= new FileReader();
FR.onload = function(e) {
//EL("img").src = e.target.result;
//EL("b64").innerHTML = e.target.result;
msg.css('background-image', 'url(' + e.target.result + ')');
};
FR.readAsDataURL( this.files[0] );
///handle the the upload
var imageSize = readableSize(filesize);
var loader = $('<div/>', {class : 'not_saved', 'data-size' : imageSize});
loader.data('size', imageSize);
loader.appendTo(msg);
break;
case 'video':
var url = window.URL.createObjectURL(file);
var video = $('<video/>', { autoplay : false, src : url });
video.appendTo(msg);
function checkLoad() {
if (video.readyState === 4) {
video.currentTime = (10 / 29.97);
console.log('Video has loaded');
} else {
console.log('Not Loaded');
setTimeout(checkLoad, 100);
}
}
checkLoad();
var loader = $('<div/>', {class : 'not_saved', 'data-size' : readableSize(filesize)});
loader.data('size', readableSize(filesize));
loader.appendTo(msg);
break;
case 'file':
//and so on
break;
case 'other':
//and so on
break;
}
pp.appendTo(parent);
msg.appendTo(parent);
parent.appendTo(chatW);
//prepare uploader and cancel button
var loading = $('<div/>',{ class : 'downloading'} );
loader.after().on('click', function () {
loading.remove();
parent.fadeOut(250, function () {
parent.remove();
});
});
loading.appendTo(loader);
loading.animate({'width' : '100%'}, 3000, function(){
msg.removeClass('not_saved');
});
}
};
如果你不启动视频,那么你需要加载一些东西。一种解决方案是对 loadedmetadata
事件使用 preload="metadata"
和绑定。
例:
var aspectratio=1;
var video = $('<video/>', { autoplay : false, src : url, preload:'metadata' });
video.on('loadedmetadata',function() {
var width = this.videoWidth;
var height = this.videoHeight;
aspectratio=width/height;
console.log(aspectratio);
});
相关文章:
- jQuery触发器点击未从AJAX成功工作
- jQuery触发器事件在一个循环中多次出现
- jquery触发器可以从点击开始工作,但没有准备好
- 从 blob 加载视频预览时的 Jquery 触发器函数
- 更改多个选择选项后的jQuery触发器事件
- jQuery触发器触发点击事件,但不发送事件数据
- 为什么这个jQuery触发器不起作用
- 如何检测jQuery触发器事件完成
- 浏览器兼容性jquery触发器
- jQuery触发器点击与点击()
- jQuery - 触发器不产生预期的结果
- JQuery 触发器单击事件不起作用
- jQuery触发器未按预期工作
- jQuery - 触发器功能使我的页面不停地重新加载
- 按键时 Jquery 触发器
- JQuery 触发器元素本身在绑定中
- jQuery:触发器不会在加载了 .load() 的元素上触发
- typed.js jQuery 触发器在键入过程中不起作用
- 为什么获胜'我的jQuery触发器工作
- 将jQuery触发器中的事件参数发送到iframe