Cara mengatur video pratinjau unggahan video HTML5, pratinjau bingkai poster pada detik tertentu dari video

Ketika saya menerima permintaan untuk mengunggah gambar dan video dan secara dinamis mengatur bingkai poster untuk tampilan video, hal utama yang saya pikirkan adalah bagaimana mengurai video dan mendapatkan serta menyimpan gambar dari setiap bingkai ke yang di bawah ini yang mengharuskan memutar video dan mengkliknya. Ambil screenshot, atau gunakan ekstensi php ffmpeg yang tidak sesuai dengan kebutuhan, dan saya sedikit gila , dan kemudian mengubah ide pengaturan bingkai poster. Saya mengatur waktu mulai memutar video dengan memasukkan dan membatalkan. Pemutaran otomatis dan bilah kontrol sehingga pengguna hanya melihat satu gambar

 /*Pratinjau*/ $('.qtuploader__items').on('klik', '[nama=viewVideoPicBtn]', function() { var parent = $(this).closest('.qtab__page'); var video = $(ini).terdekat('.qtuploader__itemsbd').find('video'); var srcStr = '', htmlStr = ''; if($(ini).saudara('.qtuploader__picinputbox').hasClass('is-error')){ $.fn.toast({ 'parentDom': induk, 'kelas': 'isorange', ' top': '0', 'spacing': 0, 'toastContent': 'Harap atur kisaran bingkai poster yang benar', 'autoHide': 3000, 'posisi': { 'atas': '5px', 'kiri': '50%' } }); return; } if (panjang video > 0) { var thumbHeight = setSize(video)[0]; = setUkuran(video)[1]; srcStr = video.attr('src'); class=qtuploader__mask></div><div class=qtuploader__thumb style=width:' + thumbWidth + 'px;height:' + thumbHeight + 'px;margin:0 auto;><kontrol video lebar=' + thumbWidth + ' tinggi =' + thumbHeight + ' src=' + srcStr + '>Browser Anda tidak mendukung video tag</video></div></div>'; } parent.append(htmlStr); parent.find('.qtuploader__lihat video')[0].currentTime = $(this).siblings('.qtuploader__picinputbox' ).find('.qtuploader__picinput').val(); parent.find('.qtuploader__view').fadeIn(); /*Setel waktu pratinjau bingkai poster*/ $('.qtuploader__items').on('keyup', '.qtuploader__picinput', function() { var parent = $(this).closest('.qtuploader__picinputbox'); var video = $(ini).terdekat('.qtuploader__itemsbd').find('video'); var strVal = $.trim($(ini).val()); konsol.log(strVal) if (strVal == '') { parent.addClass('is-error'); text('Silakan setel bingkai poster'); } else if (!(/^[0-9]*$/.test(strVal))) { parent.addClass('is-error'); parent.find('.qverify__font').text('Silakan masukkan nomor'); else if (video.length > 0 && strVal > video[0].duration) { parent.addClass('is-error') ; parent.find('.qverify__font').text('Tidak lebih dari (' + video[0].durasi + ')'); } else { parent.removeClass('is-error'); parent.find('.qverify__font').text('Silakan setel bingkai poster' } }) /*Tutup pratinjau*/ $(document).undelegate(' .qtuploader__mask', 'klik'); $(document).delegate('.qtuploader__mask', 'klik', function() { $(this).closest('.qtuploader__view').fadeOut('normal', function() { $(this).closest('.qtuploader__view').remove(); }) }) /*Setel ukuran pratinjau* / fungsi setUkuran(elemen) { var thumbWidth = 0, thumbHeight = 0, arr = []; var winWidth = $(jendela).lebar(), winHeight = $(window).height(); var imgWidth = elemen.lebar(), imgHeight = elemen.height(); jika (imgWidth > imgHeight) { thumbHeight = parseInt(winHeight - 200); lebar ibu jari = parseInt((1920 * tinggi ibu jari) / 1080); else { thumbHeight = parseInt(winHeight - 200); thumbWidth = parseInt((1080 * thumbHeight) / 1920); arr.push(thumbHeight, thumbWidth) return arr;

Di atas adalah apa yang editor perkenalkan kepada Anda. Cara mengatur video gambar pratinjau unggahan video HTML5 dan pratinjau bingkai poster pada detik tertentu dari video tersebut tinggalkan pesan untuk saya dan editor akan membalas Anda tepat waktu. Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!