How to get the first frame of video in H5 as cover

醉折花枝作酒筹
Release: 2021-04-14 11:01:29
forward
3811 people have browsed it

This article will give you a detailed introduction to the method of obtaining the first frame of video in H5 as the cover. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

How to get the first frame of video in H5 as cover

1. Import the library

The code is as follows (example):

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
Copy after login

2.HTML part

<p class="upload-title mg-b10 title-all">上传视频(必填)</p>
  <p class="file-input-trigger" onclick="document.getElementById(&#39;uploadBtn&#39;).click()">
     <p class="upload-icon">+</p>
     <p class="upload-text">上传文件</p>
   </p>
   <input type="file" class="upload-video" id="uploadBtn">
 </p>
Copy after login

The display effect is as shown below. As for the style, I can write it myself. I am lazy, hahahaha

How to get the first frame of video in H5 as cover

<video src="" onloadeddata=&#39;vSetImg(this)&#39; autoplay>
</video>
<img src="" class="video-img" alt="">
Copy after login

The above part of the code is to display pictures, the effect is as follows, the pictures are displayed normally

How to get the first frame of video in H5 as cover

3.JS part

let result$(&#39;#uploadBtn&#39;).on(&#39;change&#39;, function (e) {
    const file = e.target.files    // console.log(file)
    let fr = new FileReader()
    fr.readAsDataURL(file[0]) //将文件读取为tata Url
    fr.onload = function (e) {
        result = e.target.result        // 视屏上传
        if (/video/g.test(file[0].type)) {
            $(&#39;.upload-img&#39;).show()
            $(&#39;.upload-img video&#39;).attr(&#39;src&#39;, result)
            $(&#39;.upload-file&#39;).hide()
         }
     }})function vSetImg(obj) {
     $(obj).removeAttr("poster");
     var vimg = $("<img / alt="How to get the first frame of video in H5 as cover" >")[0];
     captureImage(obj, vimg);
     $(obj).attr("poster", $(vimg).attr("src"));
     //展示获取的第一帧图片
     $(".upload-img img").attr("src", $(vimg).attr("src"));
     $(&#39;.upload-img video&#39;).hide()
     $(&#39;.upload-img img&#39;).show()}function captureImage(video, output) {
     const scale = 0.8
     try {
         var videocanvas = $("<canvas/>")[0];
         videocanvas.width = video.videoWidth * scale;
         videocanvas.height = video.videoHeight * scale;
         videocanvas.getContext(&#39;2d&#39;).drawImage(video, 0, 0, videocanvas.width, videocanvas.height);
         output.src = videocanvas.toDataURL("image/png");
         delete videocanvas;
     } catch (e) {
         output.src = "加载动画.gif";
     }}
Copy after login

The attribute autoplay on the video tag is necessary, otherwise the image may not be displayed. This is what I discovered after several experiments. I used jquery for the convenience of operating elements. Of course, you can also use native ones.

Recommended learning: html video tutorial

The above is the detailed content of How to get the first frame of video in H5 as cover. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:csdn.net
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template