本文摘自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 video视频字幕的使用和制作方法
基于 html5 canvas 实现的文字动画特效
html5中转义实体字符，元数据， 跳转以及全局属性的图文详解
用html5制作屏幕手势解锁功能
html5新增加的标签有哪些
分享h5 canvas圆圈进度条的实例代码
html5中必须知道的十件事
h5单页面手势滑屏切换原理
html5调用摄像头功能的实现代码
html5视频播放教程实例
更多相关阅读请进入《h5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » H5中video获取第一帧如何作为封面
