Artikel ini memperkenalkan video Html5 untuk mengunggah video gambar pratinjau, mengatur dan mempratinjau bingkai poster pada detik tertentu dari video, dan membagikannya kepada semua orang. Detailnya adalah sebagai berikut:
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 keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.