資訊專欄INFORMATION COLUMN
摘要：?jiǎn)栴}描述某一天接了個(gè)需求，要求前端獲取視頻文件的大小時(shí)長(zhǎng)以及第一幀圖片傳給后端服務(wù)器存儲(chǔ)，這樣有兩種情況，一種是通過上傳本地視頻文件，一種是給出視頻的網(wǎng)絡(luò)地址，將其直接賦值給標(biāo)簽的屬性。
問題描述
某一天接了個(gè)需求，要求前端獲取視頻文件的大小、時(shí)長(zhǎng)以及第一幀圖片傳給后端服務(wù)器存儲(chǔ)，這樣有兩種情況，一種是通過input上傳本地視頻文件，一種是給出視頻的網(wǎng)絡(luò)地址，將其直接賦值給video標(biāo)簽的src屬性。
使用input標(biāo)簽上傳本地視頻使用上傳的視頻文件，這都好說，有了file文件對(duì)象，可以隨意操作，獲取其size，再通過FileReader對(duì)象來處理file。
這里附上一個(gè)demo(使用vue)
uploadVideo: function () {
var video_file = document.getElementById("upload-video").files[0];
// 這里可以打印出視頻文件的size大小
console.log(video_file.size);
if (!video_file) return;
var reader = new FileReader();
reader.onload = function () {
var videoDom = document.getElementById("video");
videoDom.onloadeddata = function () {
// 這里可以打印視頻時(shí)長(zhǎng)
console.log(this.duration);
// 這里取得視頻封面
var canvas = document.createElement("canvas");
canvas.width = 300;
canvas.height = 300 * this.videoHeight / this.videoWidth;
canvas.getContext("2d").drawImage(this, 0, 0, canvas.width, canvas.height);
document.getElementById("video-poster").src = canvas.toDataURL();
}
videoDom.src = reader.result;
}
reader.readAsDataURL(video_file);
}
使用網(wǎng)絡(luò)地址訪問視頻
現(xiàn)在需求變一下，視頻不是從本地引入的，而是后端服務(wù)器直接給前端返回視頻src，前端在對(duì)視頻播放之后需要給后端服務(wù)器上傳視頻的大小，時(shí)長(zhǎng)，第一幀圖片，我內(nèi)心：？？？？
時(shí)長(zhǎng)倒是好處理，可以借鑒第一種情況，通過監(jiān)聽onloadeddata的方法獲取，問題來了，大小怎么獲?。?？
上一面文章里面提供了一種canvas圖片跨域的方法https://segmentfault.com/a/11...，最后一種方法也可以用來解決這里的需求，通過發(fā)起一個(gè)ajax請(qǐng)求，將網(wǎng)絡(luò)地址的視頻下載為本地blob視頻文件，再將blob文件賦值給視頻的src
function getVideoBlob (url, cb) {
var xhr = new XMLHttpRequest();
xhr.open("get", url, true);
xhr.responseType = "blob";
xhr.onload = function () {
if (this.status == 200) {
// 獲取視頻文件大小
console.log(this.response.size / 1000000 + "MB");
spiderVideoResponse = this.response;
// 將response賦值為Video的src 或者也可以使用preView轉(zhuǎn)換為base64的格式
// 截取第一幀的圖片方法跟第一種情況一樣，而且還解決了獲取圖片時(shí)跨域的問題 一舉兩得
video.src = URL.createObjectURL(this.response);
}
};
xhr.send();
}
function preView (url) {
let reader = new FileReader();
getImageBlob(url, function (blob) {
reader.readAsDataURL(blob);
});
reader.onload = function (e) {
console.log(e.loaded)
}
}
這里面根據(jù)視頻的兩種情況分別提供了解決方法，可根據(jù)自身情況選取，自封為“最全解決方法”hhhh
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/94454.html
摘要：有好多小伙伴私聊我問我新特性和用法，下面我給大家具體介紹一下都新加了哪些新特性，下面我給大家總結(jié)一下。簡(jiǎn)單了解一下就可以。有好多小伙伴私聊我問我html5新特性 和用法，下面我給大家具體介紹一下html5都新加了哪些新特性，下面我給大家總結(jié)一下。 1)新的語義標(biāo)簽 footer header 等等2）增強(qiáng)型表單 表單2.03）音頻和視頻4）canvas 繪圖5） SVG繪圖6）地理定位7）...
摘要：但目前白名單申請(qǐng)途徑已經(jīng)關(guān)閉。目前在安卓有一種同層播放器的解決方案。可解決安卓機(jī)自動(dòng)全屏以及視頻播放完畢會(huì)跳出廣告的問題，并且可以實(shí)現(xiàn)交互。 本文在H5動(dòng)效的常見制作手法的基礎(chǔ)上，對(duì)相印的H5動(dòng)效制作手法進(jìn)行了擴(kuò)展和整理，并結(jié)合案例談?wù)勗趺磳⑵渥龅蒙鷦?dòng)。 視頻類 1、體驗(yàn)案例 視頻類h5可以帶給用戶動(dòng)效逼真，流暢的體驗(yàn)。雖然說制作視頻的難度較大，但是瑕不掩瑜，一支視頻可以盡可能地創(chuàng)造出...
摘要：如下圖所示一重繪與回流前端性能優(yōu)化最關(guān)鍵的就是減少頁面的重繪與回流。很明顯就是少了一步，這是因?yàn)榘褧?huì)觸發(fā)回流的屬性用替代，這樣就使渲染的過程減少了這一步，使渲染的時(shí)間減少從而提高性能。 我們今天來說說前端圖形渲染優(yōu)化，因?yàn)槲医酉聛淼臅r(shí)間可能要開始研究webgl方面的東西，所以就在這里把之前做過的H5做一個(gè)總結(jié)，現(xiàn)同步發(fā)布于GERRY_BLOG，TiMiGerry-知乎，轉(zhuǎn)載請(qǐng)保留鏈接。...
閱讀 1615·2021-09-10 11:27
閱讀 2627·2019-08-30 15:53
閱讀 1519·2019-08-30 13:10
閱讀 3091·2019-08-30 11:09
閱讀 1256·2019-08-29 17:23
閱讀 768·2019-08-29 17:05
閱讀 3052·2019-08-29 15:10
閱讀 2450·2019-08-29 13:22
