Comment obtenir la première image de la vidéo en H5 comme couverture-Questions et réponses frontales-php.cn

Comment obtenir la première image de la vidéo en H5 comme couverture

醉折花枝作酒筹

Libérer： 2021-04-14 11:01:29

avant

3860 Les gens l'ont consulté

Cet article vous donnera une introduction détaillée à la méthode d'obtention de la première image vidéo en H5 comme couverture. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

1. Importez la bibliothèque

Le code est le suivant (exemple) :

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

Copier après la connexion

Partie 2.HTML

<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>

Copier après la connexion

L'effet d'affichage est comme indiqué ci-dessous Si vous voulez le styliser, écrivez-le vous-même, hahahaha<🎜. >

Comment obtenir la première image de la vidéo en H5 comme couverture

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

Copier après la connexion

La partie ci-dessus du code sert à afficher les images. L'effet est le suivant. Les images s'affichent normalement

. Comment obtenir la première image de la vidéo en H5 comme couverture

3. Partie JS

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="Comment obtenir la première image de la vidéo en H5 comme couverture" >")[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";
     }}

Copier après la connexion

L'attribut autoplay sur la balise vidéo est nécessaire, sinon l'image risque de ne pas s'afficher. C'est ce que j'ai découvert après plusieurs expérimentations. J'ai utilisé jquery pour la commodité des éléments de commande. Bien sûr, vous pouvez également utiliser des éléments natifs.

Apprentissage recommandé :

Tutoriel vidéo HTML

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!