HTML5-Video-Upload eines Vorschaubildvideos, Festlegen und Vorschau des Posterbilds einer bestimmten Sekunde des Videos

In diesem Artikel werden hauptsächlich die relevanten Informationen zum Hochladen von HTML5-Videos, zum Festlegen und zur Vorschau des Posterbilds einer bestimmten Sekunde des Videos vorgestellt. Ich hoffe, dass dies der Fall ist Dir hilfreich sein.

Dieser Artikel stellt HTML5-Videos vor, um ein Vorschaubildvideo hochzuladen, den Posterrahmen einer bestimmten Sekunde des Videos festzulegen und in der Vorschau anzuzeigen und es mit allen zu teilen:

Als ich die Anfrage erhielt, Bilder und Videos hochzuladen und Posterrahmen für die Videoanzeige dynamisch festzulegen, dachte ich hauptsächlich darüber nach, wie ich das Video analysieren und die Bilder jedes Rahmens erhalten und speichern sollte. Die meisten von Baidu erstellten ähneln denen unten, bei denen das Abspielen des Videos und das Klicken auf den Screenshot erforderlich ist, oder die PHP-Erweiterung ffmpeg wird verwendet, was nicht mit den Anforderungen übereinstimmt, und ich bin ein bisschen verrückt Ich habe eine Vorschaufunktion für das Videobild hinzugefügt und dann die Idee geändert, den Zeitpunkt des Abspielens des Videos durch Eingabe festzulegen und die automatische Wiedergabe und die Steuerleiste zu deaktivieren, damit der Benutzer sieht ist ein Bild

 /*预览*/
              
$('.qtuploader__items').on('click', '[name="viewVideoPicBtn"]', function() {
    var parent = $(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',
          'left': '50%'
        }
      });
      return;
    }
    if (video.length > 0) {
      var thumbHeight = setSize(video)[0];
      var thumbWidth = setSize(video)[1];
      srcStr = video.attr('src');
      htmlStr = &#39;<p class="qtuploader__view"><p class="qtuploader__mask"></p><p class="qtuploader__thumb" style="width:&#39; + thumbWidth + &#39;px;height:&#39; + thumbHeight + &#39;px;margin:0 auto;"><video controls width="&#39; + thumbWidth + &#39;" height="&#39; + thumbHeight + &#39;" src="&#39; + srcStr + &#39;">您的浏览器不支持 video 标签</video></p></p>&#39;;
    }
    parent.append(htmlStr);
    parent.find(&#39;.qtuploader__view video&#39;)[0].currentTime = $(this).siblings(&#39;.qtuploader__picinputbox&#39;).find(&#39;.qtuploader__picinput&#39;).val();
    parent.find(&#39;.qtuploader__view&#39;).fadeIn();
  });
  
  /*设置海报帧预览时间*/
  $(&#39;.qtuploader__items&#39;).on(&#39;keyup&#39;, &#39;.qtuploader__picinput&#39;, function() {
    var parent = $(this).closest(&#39;.qtuploader__picinputbox&#39;);
    var video = $(this).closest(&#39;.qtuploader__itemsbd&#39;).find(&#39;video&#39;);
    var strVal = $.trim($(this).val());
    console.log(strVal)
    if (strVal == &#39;&#39;) {
      parent.addClass(&#39;is-error&#39;);
      parent.find(&#39;.qverify__font&#39;).text(&#39;请设置海报帧&#39;);
    } else if (!(/^[0-9]*$/.test(strVal))) {
      parent.addClass(&#39;is-error&#39;);
      parent.find(&#39;.qverify__font&#39;).text(&#39;请输入数字&#39;);
    } else if (video.length > 0 && strVal > video[0].duration) {
      parent.addClass(&#39;is-error&#39;);
      parent.find(&#39;.qverify__font&#39;).text(&#39;不超过(&#39; + video[0].duration + &#39;)&#39;);
      console.log(&#39;111---&#39; + video[0].duration)
    } else {
      parent.removeClass(&#39;is-error&#39;);
      parent.find(&#39;.qverify__font&#39;).text(&#39;请设置海报帧&#39;);
    }
  })
  /*关闭预览*/
  $(document).undelegate(&#39;.qtuploader__mask&#39;, &#39;click&#39;);
  $(document).delegate(&#39;.qtuploader__mask&#39;, &#39;click&#39;, function() {
    $(this).closest(&#39;.qtuploader__view&#39;).fadeOut(&#39;normal&#39;, function() {
      $(this).closest(&#39;.qtuploader__view&#39;).remove();
    })
  })
  /*设置预览大小*/
  function setSize(element) {
    var thumbWidth = 0, thumbHeight = 0, arr = [];
    var winWidth = $(window).width(), winHeight = $(window).height();
    var imgWidth = element.width(), imgHeight = element.height();
    if (imgWidth > imgHeight) {
      thumbHeight = parseInt(winHeight - 200);
      thumbWidth = parseInt((1920 * thumbHeight) / 1080);
    } else {
      thumbHeight = parseInt(winHeight - 200);
      thumbWidth = parseInt((1080 * thumbHeight) / 1920);
    }
    arr.push(thumbHeight, thumbWidth)
    return arr;
  }

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Lernen aller hilfreich sein wird. Weitere verwandte Tutorials finden Sie unter Html5-Video-Tutorial!

Verwandte Empfehlungen:

PHP-Video-Tutorial zum Gemeinwohltraining

HTML5-Grafik-Tutorial

HTML5 Online-Handbuch

Das obige ist der detaillierte Inhalt vonHTML5-Video-Upload eines Vorschaubildvideos, Festlegen und Vorschau des Posterbilds einer bestimmten Sekunde des Videos. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!