search
HomeWeb Front-endH5 TutorialHtml5 video upload preview image video, set and preview the poster frame of a certain second of the video

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

 /*预览*/
              
$('.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;
  }

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!

Statement
This article is reproduced at:脚本之家. If there is any infringement, please contact admin@php.cn delete
H5 and HTML5: Commonly Used Terms in Web DevelopmentH5 and HTML5: Commonly Used Terms in Web DevelopmentApr 13, 2025 am 12:01 AM

H5 and HTML5 refer to the same thing, namely HTML5. HTML5 is the fifth version of HTML, bringing new features such as semantic tags, multimedia support, canvas and graphics, offline storage and local storage, improving the expressiveness and interactivity of web pages.

What Does H5 Refer To? Exploring the ContextWhat Does H5 Refer To? Exploring the ContextApr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5: Tools, Frameworks, and Best PracticesH5: Tools, Frameworks, and Best PracticesApr 11, 2025 am 12:11 AM

The tools and frameworks that need to be mastered in H5 development include Vue.js, React and Webpack. 1.Vue.js is suitable for building user interfaces and supports component development. 2.React optimizes page rendering through virtual DOM, suitable for complex applications. 3.Webpack is used for module packaging and optimize resource loading.

The Legacy of HTML5: Understanding H5 in the PresentThe Legacy of HTML5: Understanding H5 in the PresentApr 10, 2025 am 09:28 AM

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee

H5 Code: Accessibility and Semantic HTMLH5 Code: Accessibility and Semantic HTMLApr 09, 2025 am 12:05 AM

H5 improves web page accessibility and SEO effects through semantic elements and ARIA attributes. 1. Use, etc. to organize the content structure and improve SEO. 2. ARIA attributes such as aria-label enhance accessibility, and assistive technology users can use web pages smoothly.

Is h5 same as HTML5?Is h5 same as HTML5?Apr 08, 2025 am 12:16 AM

"h5" and "HTML5" are the same in most cases, but they may have different meanings in certain specific scenarios. 1. "HTML5" is a W3C-defined standard that contains new tags and APIs. 2. "h5" is usually the abbreviation of HTML5, but in mobile development, it may refer to a framework based on HTML5. Understanding these differences helps to use these terms accurately in your project.

What is the function of H5?What is the function of H5?Apr 07, 2025 am 12:10 AM

H5, or HTML5, is the fifth version of HTML. It provides developers with a stronger tool set, making it easier to create complex web applications. The core functions of H5 include: 1) elements that allow drawing graphics and animations on web pages; 2) semantic tags such as, etc. to make the web page structure clear and conducive to SEO optimization; 3) new APIs such as GeolocationAPI support location-based services; 4) Cross-browser compatibility needs to be ensured through compatibility testing and Polyfill library.

How to do h5 linkHow to do h5 linkApr 06, 2025 pm 12:39 PM

How to create an H5 link? Determine the link target: Get the URL of the H5 page or application. Create HTML anchors: Use the <a> tag to create an anchor and specify the link target URL. Set link properties (optional): Set target, title, and onclick properties as needed. Add to webpage: Add HTML anchor code to the webpage where you want the link to appear.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools