在HTML5视频中动态使用第一帧作为海报？

本文介绍了在HTML5视频中动态使用第一帧作为海报？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我想知道是否有任何直接的方法来实现这种效果，无需后端代码来提取帧，将其保存为jpg和数据库。I'm wondering if there's any straightforward way to achieve this effect, without needing backend code to extract a frame, save it as a jpg and database it somewhere.当视频加载时，视频的第一帧只会显示为海报，这会非常有用（它只有在浏览器能够明显回放视频时才起作用，这可能与海报传统上有效，但这不是问题。An effect whereby the first frame of the video just shows up as the poster when the video loads would be so helpful (it would only work if the browser can play back the video obviously, which might be a little different from how poster traditionally works, but that is not a concern.推荐答案有一个 Popcorn.js 插件名为 Popcorn.capture ，它可以让你从你的HTML5视频的任何一帧中创建海报。There is a Popcorn.js plugin called Popcorn.capture which will allow you to create posters from any frame of your HTML5 video.浏览器有一个限制禁止读取跨域请求的资源的像素数据（使用画布API记录帧的当前值）他的源视频必须与脚本和html页面托管在同一个域中，并请求它使用此方法。There is a limitation that is imposed by the browser that prohibits reading pixel data of resources requested across domains (using the canvas API to record the current value of a frame). The source video must be hosted on the same domain as the script and html page that is requesting it for this approach to work.使用此插件创建海报的代码是很简单：The code to create poster using this plugin is quite simple:// This block of code must be run _after_ the DOM is ready// This will capture the frame at the 10th second and create a postervar video = Popcorn( "#video-id" );// Once the video has loaded into memory, we can capture the postervideo.listen( "canplayall", function() { this.currentTime( 10 ).capture();}); 这篇关于在HTML5视频中动态使用第一帧作为海报？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！