عندما تلقيت طلبًا لتحميل الصور ومقاطع الفيديو وتعيين إطارات الملصقات لعرض الفيديو ديناميكيًا، كان الشيء الرئيسي الذي فكرت فيه هو كيفية تحليل الفيديو والحصول على صور كل إطار وحفظها. معظم الصور من Baidu متشابهة إلى ما هو موضح أدناه والذي يتطلب تشغيل الفيديو والنقر عليه. التقط لقطة شاشة، أو استخدم امتداد php ffmpeg، وهو أمر لا يتوافق مع الاحتياجات، وأنا مجنون بعض الشيء، ثم قمت أولاً بعمل وظيفة معاينة لصورة الفيديو ، وبعد ذلك قمت بتغيير فكرة تحديد إطار الملصق، حيث قمت بتحديد الوقت لبدء تشغيل الفيديو عن طريق الإدخال والإلغاء التلقائي وشريط التحكم بحيث يرى المستخدم صورة واحدة فقط
/*Preview*/ $('.qtuploader__items').on('click', '[name=viewVideoPicBtn]', function() { varparent = $(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'، 'تباعد': 0، 'toastContent': 'يرجى ضبط النطاق الصحيح لإطارات الملصقات'، 'autoHide': 3000، 'position': { 'top': '5px', 'left': '50%' } }); return; = setSize(video)[1]; srcStr = video.attr('src'); 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() { varparent = $(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))) {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('الرجاء تعيين إطار الملصق'); .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 ThumbWidth = 0, ThumbHeight = 0, arr = []; var winWidth = $(window).width(), winHeight = $(window).height(); var imgWidth = element.width(), imgHeight = element.height(); 200); else { ThumbHeight = parseInt(winHeight - 200); تلخيصما ورد أعلاه هو ما يقدمه لك المحرر حول كيفية إعداد تحميل فيديو HTML5 ومعاينة صورة الفيديو ومعاينة إطار الملصق لثانية معينة من الفيديو، آمل أن يكون ذلك مفيدًا لك إذا كانت لديك أي أسئلة اترك لي رسالة وسيقوم المحرر بالرد عليك في الوقت المناسب. أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!