So erhalten Sie das erste Videobild in H5 als Cover

Dieser Artikel gibt Ihnen eine detaillierte Einführung in die Methode, das erste Bild eines Videos in H5 als Cover zu erhalten. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

1. Importieren Sie die Bibliothek

Der Code lautet wie folgt (Beispiel):

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

2.HTML-Teil

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

Der Anzeigeeffekt ist wie folgt: Ich kann es selbst schreiben. Hahahaha. Der obige Teil des Codes dient dazu, Bilder wie folgt anzuzeigen Teil

<video src="" onloadeddata=&#39;vSetImg(this)&#39; autoplay>
</video>
<img class="video-img lazy"  src="/static/imghw/default1.png"  data-src="" class="    alt="">

Das Attribut Autoplay am Video-Tag ist notwendig, sonst wird das Bild möglicherweise nicht angezeigt, das habe ich nach mehreren Experimenten herausgefunden. Der Einfachheit halber habe ich JQuery verwendet. Natürlich können Sie auch native Elemente verwenden.

Empfohlenes Lernen:

HTML-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo erhalten Sie das erste Videobild in H5 als Cover. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!