사진과 동영상을 업로드하고 동영상 표시를 위한 포스터 프레임을 동적으로 설정하라는 요청을 받았을 때 제가 가장 중요하게 생각한 것은 동영상을 구문 분석하고 각 프레임의 사진을 가져와 저장하는 방법이었습니다. Baidu의 것들은 대부분 비슷합니다. 스크린샷을 찍거나, 요구사항에 맞지 않는 php ffmpeg 확장자를 사용하는데, 그런 다음 먼저 비디오 이미지의 미리보기 기능을 만들었습니다. , 그리고 영상 재생 시작 시간을 입력하여 자동 재생을 취소하고 사진 한 장만 볼 수 있도록 컨트롤 바를 설정하는 아이디어를 변경했습니다.
/*미리보기*/ $('.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, '위치': { '상단': '5px', '왼쪽': '50%' } }); return; } if (video.length > 0) { var ThumbHeight = setSize(video)[0]; = setSize(video)[1]; srcStr = video.attr('src') htmlStr = '<div class=qtuploader__view><div class=qtuploader__mask></div><div class=qtuploader__thumb style=width:' + ThumbWidth + 'px;height:' + ThumbHeight + 'px;margin:0 auto;><비디오 컨트롤 width=' + ThumbWidth + ' 높이 =' + ThumbHeight + ' src=' + srcStr + '>브라우저가 비디오를 지원하지 않습니다 태그</video></div></div>'; } 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('동영상') 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', '클릭'); $(document).delegate('.qtuploader__mask', '클릭', function() { $(this).closest('.qtuploader__view').fadeOut('normal', function() { $(this).closest('.qtuploader__view').remove(); }) }) /*미리보기 크기 설정* / function setSize(element) { var ThumbWidth = 0, ThumbHeight = 0, arr = []; $(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 = parsInt(winHeight - 200); ThumbWidth = parsInt((1080 * ThumbHeight) / 1920) } arr.push(thumbHeight, ThumbWidth) return } 요약위 내용은 편집자가 소개하는 내용입니다. HTML5 동영상 업로드 미리보기 이미지 동영상 설정 방법과 동영상의 특정 순간의 포스터 프레임을 미리 보는 방법이 궁금하신 경우 도움이 되셨으면 좋겠습니다. 나에게 메시지를 남겨주시면 편집자가 시간에 맞춰 답변을 드릴 것입니다. 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!