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

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>

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>

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

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

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

.

3. Partie JS

let result$('#uploadBtn').on('change', 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)) {
            $('.upload-img').show()
            $('.upload-img video').attr('src', result)
            $('.upload-file').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";
     }}

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!