本文摘自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="">
|
上面这部分代码是展示图片，效果如下，图片显示正常
阅读剩余部分
相关阅读 >>
解决h5网页中用video标签无法播放mp4视频的方法
h5同层video播放器接入实例分享
html5中新特性之语义化标签的实例分析
html5 虚拟键盘出现挡住输入框怎么办
h5中history api 对web应用的影响
h5中文件上传下载实例
html5无插件多媒体media-音频audio与视频video的详细介绍
web sql数据库的使用教程
微信端html5页面如何调用分享接口
html5的发展
更多相关阅读请进入《h5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » H5中video获取第一帧如何作为封面
