写真やビデオをアップロードし、ビデオ表示用にポスター フレームを動的に設定するというリクエストを受けたとき、私が主に考えたのは、ビデオを解析して各フレームの写真を取得して保存する方法でした。Baidu からのもののほとんどは似ています。ビデオを再生してクリックする必要があるものへ、または php ffmpeg 拡張子を使用する必要がありますが、これはニーズと矛盾しています。そして、私は最初にビデオ画像のプレビュー機能を作成しました。 、そして、ポスターフレームを設定するという考えを変更し、自動再生とキャンセルを入力してビデオの再生を開始する時間をユーザーに表示するようにしました。
/*プレビュー*/ $('.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'、'spacing': 0、'toastContent': 'ポスター フレームの正しい範囲を設定してください'、'autoHide': 3000、 'position': { 'top': '5px' } }); return; } if (video.length > 0) { var tinyHeight = setSize(video)[0]; = 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=' +サム幅 + '高さ=' + sumHeight + ' 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.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('ポスターフレームを設定してください') } }) /*プレビューを閉じる*/ $(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) { varthumbWidth = 0、thumbHeight = 0、arr = []; $(window).width(), winHeight = $(window).height(); var imgWidth = element.width(), imgHeight = element.height(); if (imgWidth > imgHeight) {thumbHeight = parseInt(winHeight -) 200); サム幅 = parseInt((1920 * サム高さ) / 1080); else { サムハイト = parseInt(winHeight - 200); サム幅 = parseInt((1080 * サムハイト) / 1920) } arr.push(サムハイト, サム幅) }要約する以上、HTML5動画アップロードプレビュー画像動画の設定方法と、動画の特定秒のポスターフレームをプレビューする方法を紹介しました。ご不明な点がございましたら、お役に立てれば幸いです。メッセージを残していただければ、編集者が時間内に返信させていただきます。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！