تقدم هذه المقالة فيديو Html5 لتحميل معاينة صورة الفيديو، وتعيين ومعاينة إطار الملصق لثانية معينة من الفيديو، ومشاركته مع الجميع، والتفاصيل هي كما يلي:
عندما تلقيت طلبًا لتحميل الصور ومقاطع الفيديو وتعيين إطارات الملصقات لعرض الفيديو ديناميكيًا، كان الشيء الرئيسي الذي فكرت فيه هو كيفية تحليل الفيديو والحصول على صور كل إطار وحفظها. معظم الصور من 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);ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.