admin 管理员组文章数量: 887021
html动态做成视频,javascript
javascript-动态地将第一帧用作HTML5视频中的海报？
我想知道是否有任何简单的方法可以实现此效果，而无需后端代码提取框架，将其另存为jpg并将其存储在某个地方。
当视频加载时，视频的第一帧只是显示为海报的效果会非常有用(只有在浏览器可以明显播放视频的情况下才起作用，这可能与传统上的poster有点不同， 但这不是问题。
6个解决方案
30 votes
您尝试了以下吗？
只需将以秒为单位的时间＃t = {seconds}附加到源URL：
我选择了几分之一秒(0.1)来保持较小的帧数，因为我怀疑如果您放1秒，它将“预加载”视频的前1秒(即24帧或更多)。 )。 以防万一 ...
在台式机上的Chrome和Firefox上运行良好：)
虽然不能在Android手机上使用：(
我没有在iOS，iPhone，IE上进行测试？
Juergen Fink answered 2020-08-10T15:32:38Z
19 votes
有一个名为Popcorn.capture的Popcorn.js插件，它将允许您从HTML5视频的任何帧创建海报。
浏览器强加了一个限制，该限制禁止读取跨域请求的资源的像素数据(使用画布API记录帧的当前值)。 源视频必须与请求它的脚本和html页面托管在同一域中，以使此方法起作用。
使用此插件创建海报的代码非常简单：
// This block of code must be run _after_ the DOM is ready
// This will capture the frame at the 10th second and create a poster
var video = Popcorn( "#video-id" );
// Once the video has loaded into memory, we can capture the poster
video.listen( "canplayall", function() {
this.currentTime( 10 ).capture();
});
Rick answered 2020-08-10T15:31:56Z
13 votes
我最近是针对最近在台式机和移动设备上运行的项目进行的操作。 诀窍是使其能够在iPhone上运行。
设置autoplay适用于台式机和Android设备，但不适用于iPhone。
对于iPhone，我必须将其设置为autoplay，以便在初始加载时自动显示海报图像。 iPhone将阻止视频自动播放，但结果将显示海报图像。
我必须使用此处找到的Pavan的答案对iPhone进行检查。 检测iPhone浏览器。 然后根据设备使用带或不带autoplay的正确视频标签。
var agent = navigator.userAgent;
var isIphone = ((agent.indexOf('iPhone') != -1) || (agent.indexOf('iPod') != -1)) ;
$videoTag = "";
if(isIphone()) {
$videoTag = '';
} else {
$videoTag = '';
}
drumnbace answered 2020-08-10T15:33:11Z
13 votes
为简单起见，您只需将
添加到视频标签中，并将第一帧的第二个#t=0.5添加到视频源中：
祝你好运！
coin hive answered 2020-08-10T15:33:36Z
7 votes
您可以在video元素上设置preload='auto'以自动加载视频的第一帧。
James Westgate answered 2020-08-10T15:33:55Z
1 votes
＃2，＃3等框架的解决方案。 我们需要附加一次性处理程序.one()来重置默认框架。
$(function () {
let videoJs = videojs('my-video');
videoJs.one('play', function () {
this.currentTime(0);
});
});
Adilet Murzaliev answered 2020-08-10T15:34:16Z
本文标签： html动态做成视频 javascript
版权声明：本文标题：html动态做成视频,javascript 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1731059602h1433348.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论