Javascript 在 HTML5 视频中动态使用第一帧作为海报？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7323053/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically using the first frame as poster in HTML5 video?
提问by Damon
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.
我想知道是否有任何直接的方法来实现这种效果，而无需后端代码来提取帧，将其保存为 jpg 并将其数据库存储在某处。
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 postertraditionally works, but that is not a concern.
当视频加载时，视频的第一帧仅显示为海报的效果会非常有用（只有在浏览器可以明显播放视频时才有效，这可能与poster传统的工作方式略有不同，但是这不是问题。
采纳答案by Rick
There is a Popcorn.jsplugin called Popcorn.capturewhich will allow you to create posters from any frame of your HTML5 video.
有一个名为Popcorn.capture的Popcorn.js插件，它允许您从 HTML5 视频的任何帧创建海报。
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.
浏览器存在一个限制，即禁止读取跨域请求的资源的像素数据（使用画布 API 记录帧的当前值）。源视频必须托管在与请求它的脚本和 html 页面相同的域上，以便此方法工作。
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 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();
});
回答by Juergen Fink
Did you try the following?
您是否尝试过以下操作？
just append time in seconds #t={seconds}to source URL:
只需将时间以秒为单位#t={seconds}附加到源 URL：
<video width="300" height="150">
<source src="testvideo.mp4#t=0.1" type="video/mp4" />
</video>
I have chosen a fraction of second (0.1) to keep number of frames small, because I have the suspect that if you put 1second, it would "preload" the first 1second of video (i.e. 24 frames or more ....). Just in case ...
我选择了几分之一秒（0.1）来保持较小的帧数，因为我怀疑如果你放1秒，它会“预加载”视频的前1秒（即 24 帧或更多...... ）。以防万一 ...
Works fine on Chrome and Firefox on desktop :)
Works not on Android mobile, though :(
I did not test on iOS, iPhone, IE yet ??
在台式机上的 Chrome 和 Firefox 上运行良好:)
不适用于 Android 移动设备：（
我还没有在 iOS、iPhone、IE 上进行测试？？
回答by coinhive
To make it simple you can just add preload="metadata"to your video tagand the second of the first frame #t=0.5to your video source:
为简单起见，你可以只添加 preload="metadata"到您的视频标签和第一帧的第二#t=0.5到您的视频来源：
<video width="400" controls="controls" preload="metadata">
<source src="https://www.w3schools.com/html/mov_bbb.mp4#t=0.5" type="video/mp4">
</video>Best of luck!
祝你好运！
回答by drumnbace
I recently did this for a recent project that works on desktop and mobile. The trick was getting it to work on iPhone.
我最近为最近的一个适用于桌面和移动设备的项目做了这个。诀窍是让它在 iPhone 上运行。
Setting preload=metadataworks on desktop and android devices but not iPhone.
设置preload=metadata适用于台式机和安卓设备，但不适用于 iPhone。
For iPhones I had to set it to autoplayso the poster image automatically appears on initial load. iPhones will prevent the video from auto playing, but the poster image appears as the result.
对于 iPhone，我必须将其设置autoplay为海报图像在初始加载时自动出现。iPhone 会阻止视频自动播放，但结果会显示海报图像。
I had to do a check for iPhone using Pavan's answer found here. Detect iPhone Browser. Then use the proper video tag with or without autoplaydepending on the device.
我不得不使用在这里找到的 Pavan 的答案来检查 iPhone。检测 iPhone 浏览器。然后autoplay根据设备使用或不使用正确的视频标签。
var agent = navigator.userAgent;
var isIphone = ((agent.indexOf('iPhone') != -1) || (agent.indexOf('iPod') != -1)) ;
$videoTag = "";
if(isIphone()) {
$videoTag = '<video controls autoplay preload="metadata">';
} else {
$videoTag = '<video controls preload="metadata">';
}
回答by James Westgate
You can set preload='auto'on the video element to load the first frame of the video automatically.
您可以preload='auto'在视频元素上设置自动加载视频的第一帧。
回答by Adilet Murzaliev
Solution for #2, #3 etc. frames. We need attach disposable handler .one() for resetting default frame.
#2、#3 等框架的解决方案。我们需要附加一次性处理程序 .one() 来重置默认框架。
<video width="300" height="150" id='my-video'>
<source src="testvideo.mp4#t=2" type="video/mp4" />
</video>
$(function () {
let videoJs = videojs('my-video');
videoJs.one('play', function () {
this.currentTime(0);
});
});
