この記事では、プレビュー画像ビデオをアップロードし、ビデオの特定の秒のポスターフレームを設定してプレビューし、それをみんなで共有するための HTML5 ビデオを紹介します。詳細は次のとおりです。
写真やビデオをアップロードし、ビデオ表示用にポスター フレームを動的に設定するというリクエストを受けたとき、私が主に考えたのは、ビデオを解析して各フレームの写真を取得して保存する方法でした。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(サムハイト, サム幅) }以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。