js獲取上傳音視訊的時長
阿新 • • 發佈:2020-09-16
獲取上傳視訊路徑,將該路徑放入video標籤,獲取視訊時長
方式一:隱藏一個音訊標籤,播放獲取。
<video style="display:none;" controls="controls" id="videoData" oncanplaythrough="geTime(this)"></video>
<input type="file" onchange="changeFile(this)" />
<script type="text/JavaScript">
function geTime(ele) {
var hour = parseInt((ele.duration)/3600);
var minute = parseInt((ele.duration%3600)/60);
var second = Math.ceil(ele.duration%60);
console.log("這段視訊的時長為:"+hour+"小時,"+minute+"分,"+second+"秒");
}
function changeFile(ele){
var video = ele.files[0];
var url = URL.createObjectURL(video);
console.log(url);
document.getElementById("videoData").src = url;
}
</script>
廣州vi設計公司http://www.maiqicn.com 辦公資源網站大全 https://www.wode007.com
方式二;通過new Audio的方式獲取:
<input type="file" onchange="changeFile(this)" >
<script>
function changeFile(ele) {
var content = ele.files[0]
var url = URL.createObjectURL(content);//獲取錄音時長
var audioElement = new Audio(url);//audio也可獲取視訊的時長
var duration;
audioElement.addEventListener("loadedmetadata", function (_event) {
duration = audioElement.duration;
console.log(duration/60);
});
}
</script>
說明:
1.URL.createObjectURL()方法會建立一個 DOMString,其中包含一個表示引數中給出的物件的URL。這個 URL 的生命週期和建立它的視窗中的 document 繫結。這個新的URL 物件表示指定的 File 物件或 Blob 物件。(個人感覺可以把物件轉換成url使用,十分靈活方便,特別是對於檔案物件)。
2.loadedmetadata 當指定的音訊/視訊的元資料已載入時,會發生 loadedmetadata 事件。音訊/視訊的元資料包括:時長、尺寸(僅視訊)以及文字軌道。
上傳之前限制一下視訊的時長
由於用阿里雲解析視訊的時候,是按照視訊時長收費的,為了節省測試費用,老闆要我在上傳之前限制一下視訊的時長!這裡通過video 的視訊預覽來實現的。(參考:https://www.jianshu.com/p/dc60d8dc07de)
const gettime = (video, size) => {
const promise = new Promise(resolve => {
video.addEventListener('canplaythrough', e => {
console.log(58, e, e.target.duration, size)
if (e.target.duration <= size) {
resolve(true)
} else {
resolve(false)
}
})
})
return promise
}
export const checkSize = async (files, size) => {
// console.log(56, Number.isNaN(Number(size)), size)
if (!files || !files[0]) return false
// 這一條是正式伺服器不需要這段所以當size 為undefined 時預設 返回 true
if (Number.isNaN(Number(size))) return true
const checktimevideo = document.getElementById('checktimevideo')
if (checktimevideo) {
document.body.removeChild(checktimevideo)
}
const video = document.createElement('video')
const url = URL.createObjectURL(files[0])
video.src = url
video.id = 'checktimevideo'
video.style.display = 'none'
document.body.appendChild(video)
return await gettime(video, size)
}
// 這個函式呼叫的時候也非常簡單
<input
type='file'
onChange = { async e => {
e.persist() // 這個是用來處理 SyntheticEvent 問題的
const isok = await checkSize(e.target.files[0], 200) // 200 表示200秒
} }
/>