Html5 video upload preview image video, set and preview the poster frame of a certain second of the video-H5 Tutorial-php.cn

Html5 video upload preview image video, set and preview the poster frame of a certain second of the video

青灯夜游

Release： 2018-10-09 15:47:04

forward

3062 people have browsed it

This article mainly introduces the relevant information of Html5 video uploading preview image video, setting and previewing the poster frame of a certain second of the video. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

This article introduces Html5 video to upload preview image video, set and preview the poster frame of a certain second of the video, and share it with everyone. The details are as follows:

Html5 video upload preview image video, set and preview the poster frame of a certain second of the video

## When a When receiving the request to upload pictures and videos and dynamically set poster frames for video display, the main thing I thought about was how to parse the video and obtain and save the pictures of each frame. Most of the ones produced by Baidu are similar to the one below that requires playing the video and clicking on the screenshot. , or use the php ffmpeg extension, which is inconsistent with the requirements, and I am a little crazy. Then I first made a preview function of the video picture, and then changed the idea of setting the poster frame. I set the time when the video starts playing by inputting it, and canceled the automatic playback. and control bar, so that what the user sees is a picture

 /*预览*/
              
$(&#39;.qtuploader__items&#39;).on(&#39;click&#39;, &#39;[name="viewVideoPicBtn"]&#39;, function() {
    var parent = $(this).closest(&#39;.qtab__page&#39;);
    var video = $(this).closest(&#39;.qtuploader__itemsbd&#39;).find(&#39;video&#39;);
    var srcStr = &#39;&#39;, htmlStr = &#39;&#39;;
    if($(this).siblings(&#39;.qtuploader__picinputbox&#39;).hasClass(&#39;is-error&#39;)){
      $.fn.toast({
        &#39;parentDom&#39;: parent,
        &#39;classes&#39;: &#39;isorange&#39;,
        &#39;top&#39;: &#39;0&#39;,
        &#39;spacing&#39;: 0,
        &#39;toastContent&#39;: &#39;请设置正确范围的海报帧&#39;,
        &#39;autoHide&#39;: 3000,
        &#39;position&#39;: {
          &#39;top&#39;: &#39;5px&#39;,
          &#39;left&#39;: &#39;50%&#39;
        }
      });
      return;
    }
    if (video.length > 0) {
      var thumbHeight = setSize(video)[0];
      var thumbWidth = setSize(video)[1];
      srcStr = video.attr(&#39;src&#39;);
      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;
  }

Copy after login

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's learning. For more related tutorials, please visit

Html5 Video Tutorial!

Related recommendations:

php public welfare training video tutorial

HTML5 graphic tutorial

HTML5Online Manual

The above is the detailed content of Html5 video upload preview image video, set and preview the poster frame of a certain second of the video. For more information, please follow other related articles on the PHP Chinese website!