이 글에서는 미리보기 이미지 동영상을 업로드하고, 동영상의 특정 순간의 포스터 프레임을 설정 및 미리보기하여 모두와 공유할 수 있는 HTML5 동영상을 소개합니다.
사진과 동영상을 업로드하고 동영상 표시를 위한 포스터 프레임을 동적으로 설정하라는 요청을 받았을 때 제가 가장 중요하게 생각한 것은 동영상을 구문 분석하고 각 프레임의 사진을 가져와 저장하는 방법이었습니다. 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 + '>브라우저가 비디오를 지원하지 않습니다 tag</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 = parsInt((1920 * ThumbHeight) / 1080); else { ThumbHeight = parsInt(winHeight - 200); ThumbWidth = parsInt((1080 * ThumbHeight) / 1920) } arr.push(thumbHeight, ThumbWidth) return }위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.