В этой статье рассказывается о видео Html5, позволяющем загружать видео для предварительного просмотра, устанавливать и просматривать кадр постера определенной секунды видео, а также делиться им со всеми. Подробности следующие:
Когда я получил запрос на загрузку картинок и видео и динамическую настройку кадров постера для показа видео, главное, о чем я думал, это как разобрать видео и получить и сохранить картинки каждого кадра. Большинство из Baidu похожи. к приведенному ниже, который требует воспроизведения видео и нажатия на него. Сделайте снимок экрана или используйте расширение php ffmpeg, что не соответствует потребностям, и я немного сумасшедший. Затем я сначала сделал функцию предварительного просмотра видеоизображения. , а затем изменил идею установки кадра постера, я установил время начала воспроизведения видео, введя и отменив автоматическое воспроизведение и панель управления, чтобы пользователь видел только одну картинку.
/*Предварительный просмотр*/ $('.qtuploader__items').on('click', '[name=viewVideoPicBtn]', function() { var родительский = $(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': родительский, 'classes': 'isorange', ' top': '0', 'spacing': 0, 'toastContent': 'Пожалуйста, установите правильный диапазон рамок постера', 'autoHide': 3000, 'position': { 'top': '5px', 'left': '50%' } } return; = setSize(video)[1]; srcStr = video.attr('src'); '<div class=qtuploader__view><div class=qtuploader__mask></div><div class=qtuploader__thumb style=width:' + ThumbWidth + 'px;height:' + thumHeight + 'px;margin:0 auto;><контроллеры видео width=' + ThumbWidth + ' высота =' + thumHeight + ' src=' + srcStr + '>Ваш браузер не поддерживает видео tag</video></div></div>'; } Parent.append(htmlStr); Parent.find('.qtuploader__view video')[0].currentTime = $(this).siblings('.qtuploader__picinputbox' ).find('.qtuploader__picinput').val(); родитель.find('.qtuploader__view').fadeIn() }); /*Устанавливаем время предварительного просмотра кадра постера*/ $('.qtuploader__items').on('keyup', '.qtuploader__picinput', function() { var родительский = $(this).closest('.qtuploader__picinputbox'); var video = $(this).closest('.qtuploader__itemsbd').find('video'); $.trim($(this).val()); console.log(strVal) if (strVal == '') {parent.addClass('is-error');parent.find('.qverify__font'). text('Пожалуйста, установите рамку постера'); } else if (!(/^[0-9]*$/.test(strVal))) { родитель.addClass('is-error'); Parent.find('.qverify__font').text('Пожалуйста, введите число'); } else if (video.length > 0 && strVal > video[0].duration) { родитель.addClass('is-error') ; родитель.найти('.qverify__font').text('Не более (' + видео[0].duration + ')'); console.log('111---' + видео[0].duration) } else { родитель.removeClass('is-error'); родитель.find('.qverify__font').text('Пожалуйста, установите рамку постера'); } }) /*Закрыть предварительный просмотр*/ $(document).undelegate(' .qtuploader__mask', 'click'); $(document).delegate('.qtuploader__mask', 'click', function() { $(this).closest('.qtuploader__view').fadeOut('normal', function() { $(this).closest('.qtuploader__view').remove(); }) }) /*Установить размер предварительного просмотра* / function setSize(element) { var bigWidth = 0, bigHeight = 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 = parseInt (winHeight - 200); ThumbWidth = parseInt ((1080 * ThumbHeight) / 1920 } arr.push(thumbHeight, ThumbWidth) return arr;Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.