本文摘自PHP中文网，作者醉折花枝作酒筹，侵删。
本篇文章给大家详细介绍一下H5中video获取第一帧作为封面的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
1.引入库
代码如下（示例）：
1 | <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
|
2.HTML部分
1 2 3 4 5 6 7 | <p class="upload-title mg-b10 title-all">上传视频（必填）</p>
<p class="file-input-trigger" onclick="document.getElementById('uploadBtn').click()">
<p class="upload-icon">+</p>
<p class="upload-text">上传文件</p>
</p>
<input type="file" class="upload-video" id="uploadBtn">
</p>
|
展示效果如下图，样式的话，自己写哈，我比较懒，哈哈哈哈
1 2 3 | <video src="" onloadeddata='vSetImg(this)' autoplay>
</video>
<img src="" class="video-img" alt="">
|
上面这部分代码是展示图片，效果如下，图片显示正常
阅读剩余部分
相关阅读 >>
html5中转义实体字符，元数据， 跳转以及全局属性的图文详解
html中怎么放视频
妙味课堂html5视频资料分享
html5多图片预览上传及点击可拖拽控件的实例分享
如何利用html5实现等待加载动画的效果
html5 网络拓扑图应用实例讲解
了解什么是html5
html5的地理定位如何使用
html5手机端页面缩放问题的解决详解
h5自定义audio的解析
更多相关阅读请进入《h5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » H5中video获取第一帧如何作为封面
