html5游戏上传视频,HTML5 video上传预览图片视频的设置

本文扣丁学堂HTML5培训小编给读者们介绍一下HTML5 video上传预览图片视频，设置、预览视频某秒的海报帧，现在分享给大家，我们一起来看一下吧。

HTML5 video上传预览图片视频的设置

扣丁学堂HTML5培训

当一收到上传图片视频并可以动态设置视频显示的海报帧的需求时，主要想的是怎么样解析视频并获取保存每帧的图片，百度出来的大多是类似下面这种需要播放video并点击截图的，或者是用php ffmpeg扩展，跟需求不一致，有点抓狂了，然后就先做了视频图片的预览功能，进而对设置海报帧换了种思路，通过输入设置video开始播放的时间，取消自动播放和控制条，这样用户看到的就是一张图片。/*预览*/

$(".qtuploader__items").on("click", "[name="viewVideoPicBtn"]", function() {

var parent = $(this).closest(".qtab__page");

var video = $(this).closest(".qtuploader__itemsbd").find("video");

var srcStr = "", htmlStr = "";

if($(this).siblings(".qtuploader__picinputbox").hasClass("is-error")){

$.fn.toast({

"parentDom": parent,

"classes": "isorange",

"top": "0",

"spacing": 0,

"toastContent": "请设置正确范围的海报帧",

"autoHide": 3000,

"position": {

"top": "5px",

"left": "50%"

}

});

return;

}

if (video.length > 0) {

var thumbHeight = setSize(video)[0];

var thumbWidth = setSize(video)[1];

srcStr = video.attr("src");

htmlStr = "您的浏览器不支持 video 标签";

}

parent.append(htmlStr);

parent.find(".qtuploader__view video")[0].currentTime = $(this).siblings(".qtuploader__picinputbox").find(".qtuploader__picinput").val();

parent.find(".qtuploader__view").fadeIn();

});

/*设置海报帧预览时间*/

$(".qtuploader__items").on("keyup", ".qtuploader__picinput", function() {

var parent = $(this).closest(".qtuploader__picinputbox");

var video = $(this).closest(".qtuploader__itemsbd").find("video");

var strVal = $.trim($(this).val());

console.log(strVal)

if (strVal == "") {

parent.addClass("is-error");

parent.find(".qverify__font").text("请设置海报帧");

} else if (!(/^[0-9]*$/.test(strVal))) {

parent.addClass("is-error");

parent.find(".qverify__font").text("请输入数字");

} else if (video.length > 0 && strVal > video[0].duration) {

parent.addClass("is-error");

parent.find(".qverify__font").text("不超过(" + video[0].duration + ")");

console.log("111---" + video[0].duration)

} else {

parent.removeClass("is-error");

parent.find(".qverify__font").text("请设置海报帧");

}

})

/*关闭预览*/

$(document).undelegate(".qtuploader__mask", "click");

$(document).delegate(".qtuploader__mask", "click", function() {

$(this).closest(".qtuploader__view").fadeOut("normal", function() {

$(this).closest(".qtuploader__view").remove();

})

})

/*设置预览大小*/

function setSize(element) {

var thumbWidth = 0, thumbHeight = 0, arr = [];

var winWidth = $(window).width(), winHeight = $(window).height();

var imgWidth = element.width(), imgHeight = element.height();

if (imgWidth > imgHeight) {

thumbHeight = parseInt(winHeight - 200);

thumbWidth = parseInt((1920 * thumbHeight) / 1080);

} else {

thumbHeight = parseInt(winHeight - 200);

thumbWidth = parseInt((1080 * thumbHeight) / 1920);

}

arr.push(thumbHeight, thumbWidth)

return arr;

}

以上就是扣丁学堂HTML5在线学习小编给大家分享的HTML5 video上传预览图片视频的设置，希望对小伙伴们有所帮助，想要了解更多内容的小伙伴可以登录扣丁学堂官网咨询。

想要学好HTML5开发小编给大家推荐口碑良好的扣丁学堂，扣丁学堂有专业老师制定的HTML5学习路线图辅助学员学习，此外还有与时俱进的HTML5课程体系和HTML5视频教程供大家学习，想要学好HTML5开发技术的小伙伴快快行动吧。

H5基础课程：https://ke.***.com/course/320523?flowToken=1008606【扫码进入HTML5前端开发VIP免费公开课】

注：点击(了解更多)进入课程直播间

内容由用户发布，不代表本站观点。如发现有害或侵权内容。请点击这里