电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術(shù)文章
文章詳情頁

JavaScript實(shí)現(xiàn)讀取上傳視頻文件的時(shí)長和第一幀畫面過程講解

瀏覽:221日期:2022-06-10 10:05:56
目錄
  • 前言
  • 獲取視頻時(shí)長
  • 獲取第一幀畫面
  • 結(jié)語

前言

當(dāng)我們做一個(gè)后臺(tái)系統(tǒng)的音頻管理模塊時(shí),通常需要將我們上傳的視頻做一個(gè)前端的提前處理。首先是我們對(duì)于文件的大小要限制,文件類型做限制,然后還會(huì)有些特定的要求,比如自動(dòng)去讀取文件的一些信息,傳遞給后端。當(dāng)然這些可以在后端進(jìn)行完成,但是相對(duì)而言,將資源的消耗放在前端這一塊是會(huì)相對(duì)減輕后端壓力的。這里主要介紹要如何獲取前端的第一幀畫面和視頻的時(shí)長,畫面可以輔助我們?cè)O(shè)置新建信息的視頻封面圖,時(shí)長能讓用戶更直觀地感覺到文件的準(zhǔn)確性和大小。

獲取視頻時(shí)長

獲取時(shí)長比第一幀畫面的獲取相對(duì)容易一些,但是兩者有一個(gè)共同的需要,那就是需要在我們的html代碼中添加video標(biāo)簽,并且將我們想要獲取信息的視頻地址放到標(biāo)簽的鏈接中。

獲取時(shí)長的話,只需要給視頻element添加一個(gè)監(jiān)聽事件,loadedmetadata。在這個(gè)監(jiān)聽事件中我們可以獲取到audioElement對(duì)象,在該對(duì)象中便有視頻時(shí)長的參數(shù)。

getVideoDuration(file) {
  var url = URL.createObjectURL(file);
  var audioElement = new Audio(url);
  var self = this;
  var result;
  audioElement.addEventListener("loadedmetadata", function() {
    // 視頻時(shí)長值的獲取要等到這個(gè)匿名函數(shù)執(zhí)行完畢才產(chǎn)生
    result = audioElement.duration; //得到時(shí)長為秒,小數(shù),182.36
    self.ruleForm.videoDuration = parseInt(result); //轉(zhuǎn)為int值
  });
}

獲取第一幀畫面

首先我們需要明白,視頻在我們的頁面是如何去運(yùn)作的。前端目前我所知道的想要跟視頻產(chǎn)生聯(lián)系的方式就是video標(biāo)簽,所以我們需要有一個(gè)video標(biāo)簽,然后將視頻地址添加進(jìn)去,才有辦法獲得該視頻的一些信息。

①第一步需要將用戶上傳的文件轉(zhuǎn)化為blob地址,當(dāng)然有一些情況我們是可以直接獲取到后端傳遞過來的地址的,但是當(dāng)我們需要將視頻和表單一起提交時(shí),就沒辦法做到這樣有一個(gè)先后的順序。所以我們要自食其力,把視頻轉(zhuǎn)為地址,加載到音頻標(biāo)簽中。

const file = "....."
const a = new FileReader();
a.readAsDataURL(file);
a.onload = (e) => {
	const blob = new Blob([e.target.result], { type: file.type }) // 如果發(fā)現(xiàn)亂碼檢查一下type賦值的對(duì)不對(duì)
}

②第二步,眾所周知,如果視頻加載成功了,那我們的video正確加載了,是會(huì)顯示視頻的第一幀畫面的,所以這個(gè)時(shí)候我們就可以用canvas去截圖,將第一幀的畫面截下來,再轉(zhuǎn)成base64,當(dāng)然最后如果需要把封面一同上傳,我們可以將base64轉(zhuǎn)file。

findvideocover() {
let size = 160
// 獲取video節(jié)點(diǎn)
const video = document.getElementById("videoPlay");
video.width = size
video.height = size
video.currentTime = 1 // 第一幀
//創(chuàng)建canvas對(duì)象
const canvas = document.createElement("canvas")
canvas.width = size
canvas.height = size
this.$nextTick(()=>{
  // 利用canvas對(duì)象方法繪圖
  canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
  // 轉(zhuǎn)換成base64形式
  const img = canvas.toDataURL("image/jpeg") // 這個(gè)就是圖片的base64
  this.coverUrl = img
})
      }

base64轉(zhuǎn)file

const arr = base64.split(",")
const type = arr[0].match(/:(.*?);/)[1]
const size = window.atob(arr[1])
let n = size.length
const u8arr = new Uint8Array(n)
while (n--) {
  u8arr[n] = size.charCodeAt(n)
}
const file = new File([u8arr], name, { type })

結(jié)語

這兩個(gè)功能并不復(fù)雜,只要理解其中的原理和流程就可以很簡(jiǎn)單的達(dá)到效果。主要是將視頻從file轉(zhuǎn)為blob是否能夠正常加載到video中,如若不能,則需要請(qǐng)求后端的幫助,先將視頻傳遞上去后獲取到文件的地址,再去執(zhí)行這一讀取第一幀畫面作為封面的功能。

到此這篇關(guān)于JavaScript實(shí)現(xiàn)讀取上傳視頻文件的時(shí)長和第一幀畫面過程講解的文章就介紹到這了,更多相關(guān)JS讀取視頻文件時(shí)長內(nèi)容請(qǐng)搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持!

標(biāo)簽: JavaScript
主站蜘蛛池模板: 印刷人才网 印刷、包装、造纸,中国80%的印刷企业人才招聘选印刷人才网! | 北京网络营销推广_百度SEO搜索引擎优化公司_网站排名优化_谷歌SEO - 北京卓立海创信息技术有限公司 | 数控走心机-走心机价格-双主轴走心机-宝宇百科 | 震动筛选机|震动分筛机|筛粉机|振筛机|振荡筛-振动筛分设备专业生产厂家高服机械 | ISO9001认证咨询_iso9001企业认证代理机构_14001|18001|16949|50430认证-艾世欧认证网 | 鄂泉泵业官网|(杭州、上海、全国畅销)大流量防汛排涝泵-LW立式排污泵 | 济南冷库安装-山东冷库设计|建造|冷库维修-山东齐雪制冷设备有限公司 | WF2户外三防照明配电箱-BXD8050防爆防腐配电箱-浙江沃川防爆电气有限公司 | 垃圾清运公司_环卫保洁公司_市政道路保洁公司-华富环境 | 东莞螺杆空压机_永磁变频空压机_节能空压机_空压机工厂批发_深圳螺杆空压机_广州螺杆空压机_东莞空压机_空压机批发_东莞空压机工厂批发_东莞市文颖设备科技有限公司 | 钢格板|镀锌钢格板|热镀锌钢格板|格栅板|钢格板|钢格栅板|热浸锌钢格板|平台钢格板|镀锌钢格栅板|热镀锌钢格栅板|平台钢格栅板|不锈钢钢格栅板 - 专业钢格板厂家 | 非标压力容器_碳钢储罐_不锈钢_搪玻璃反应釜厂家-山东首丰智能环保装备有限公司 | 深圳市东信高科自动化设备有限公司 | 包装机传感器-搅拌站传感器-山东称重传感器厂家-济南泰钦电气 | 活性炭-蜂窝-椰壳-柱状-粉状活性炭-河南唐达净水材料有限公司 | 除湿机|工业除湿机|抽湿器|大型地下室车间仓库吊顶防爆除湿机|抽湿烘干房|新风除湿机|调温/降温除湿机|恒温恒湿机|加湿机-杭州川田电器有限公司 | 厂厂乐-汇聚海量采购信息的B2B微营销平台-厂厂乐官网 | 挤奶设备过滤纸,牛奶过滤纸,挤奶机过滤袋-济南蓝贝尔工贸有限公司 | 减速机三参数组合探头|TSM803|壁挂式氧化锆分析仪探头-安徽鹏宸电气有限公司 | 耐破强度测试仪-纸箱破裂强度试验机-济南三泉中石单品站 | 室内室外厚型|超薄型|非膨胀型钢结构防火涂料_隧道专用防火涂料厂家|电话|价格|批发|施工 | 锂电叉车,电动叉车_厂家-山东博峻智能科技有限公司 | 电缆接头-防爆电缆接头-格兰头-金属电缆接头-防爆填料函 | 铝板冲孔网,不锈钢冲孔网,圆孔冲孔网板,鳄鱼嘴-鱼眼防滑板,盾构走道板-江拓数控冲孔网厂-河北江拓丝网有限公司 | 电机保护器-电动机综合保护器-浙江开民 | 气力输送设备_料封泵_仓泵_散装机_气化板_压力释放阀-河南锐驰机械设备有限公司 | 次氯酸钠厂家,涉水级次氯酸钠,三氯化铁生产厂家-淄博吉灿化工 | 浙江富广阀门有限公司| 卫生纸复卷机|抽纸机|卫生纸加工设备|做卫生纸机器|小型卫生纸加工需要什么设备|卫生纸机器设备多少钱一台|许昌恒源纸品机械有限公司 | 纯化水设备-纯水设备-超纯水设备-[大鹏水处理]纯水设备一站式服务商-东莞市大鹏水处理科技有限公司 | 一航网络-软件测评官网| 找果网 | 苹果手机找回方法,苹果iPhone手机丢了找回,认准找果网! | 玻纤土工格栅_钢塑格栅_PP焊接_单双向塑料土工格栅_复合防裂布厂家_山东大庚工程材料科技有限公司 | 【电子厂招聘_普工招工网_工厂招聘信息平台】-工立方打工网 | EPK超声波测厚仪,德国EPK测厚仪维修-上海树信仪器仪表有限公司 | 暖气片十大品牌厂家_铜铝复合暖气片厂家_暖气片什么牌子好_欣鑫达散热器 | 对辊式破碎机-对辊制砂机-双辊-双齿辊破碎机-巩义市裕顺机械制造有限公司 | 数显恒温油浴-电砂浴-高温油浴振荡器-常州迈科诺仪器有限公司 | ★店家乐|服装销售管理软件|服装店收银系统|内衣店鞋店进销存软件|连锁店管理软件|收银软件手机版|会员管理系统-手机版,云版,App | 电地暖-电采暖-发热膜-石墨烯电热膜品牌加盟-暖季地暖厂家 | 数控走心机-走心机价格-双主轴走心机-宝宇百科 |