這篇文章給大家分享的是有關(guān)HTML5中video上傳預(yù)覽圖片視頻怎么設(shè)置、預(yù)覽視頻某秒的海報幀的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
創(chuàng)新互聯(lián)是一家專業(yè)的成都網(wǎng)站建設(shè)公司，我們專注做網(wǎng)站、成都網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷、企業(yè)網(wǎng)站建設(shè)，買友情鏈接，廣告投放為企業(yè)客戶提供一站式建站解決方案，能帶給客戶新的互聯(lián)網(wǎng)理念。從網(wǎng)站結(jié)構(gòu)的規(guī)劃UI設(shè)計到用戶體驗提高，創(chuàng)新互聯(lián)力求做到盡善盡美。
當(dāng)一收到上傳圖片視頻并可以動態(tài)設(shè)置視頻顯示的海報幀的需求時，主要想的是怎么樣解析視頻并獲取保存每幀的圖片，百度出來的大多是類似下面這種需要播放video并點擊截圖的，或者是用php ffmpeg擴展，跟需求不一致，有點抓狂了，然后就先做了視頻圖片的預(yù)覽功能，進而對設(shè)置海報幀換了種思路，通過輸入設(shè)置video開始播放的時間，取消自動播放和控制條，這樣用戶看到的就是一張圖片
重慶分公司
重慶分公司
/*預(yù)覽*/
$('.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': '請設(shè)置正確范圍的海報幀',
'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 = '感謝各位的閱讀！關(guān)于“HTML5中video上傳預(yù)覽圖片視頻怎么設(shè)置、預(yù)覽視頻某秒的海報幀”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
