有没有办法在HTML5视频上设置缩略图?我想在比赛前看一些照片.我的代码看起来像这样:
<video width="470" height="255" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
<source src="video.webm" type="video/webm">
<object data="video.mp4" width="470" height="255">
<embed src="video.swf" width="470" height="255">
</object>
</video>
Run Code Online (Sandbox Code Playgroud)
谢谢!
我想知道是否有任何直接的方法来实现这种效果,无需后端代码来提取帧,将其保存为jpg和数据库.
当视频加载时,视频的第一帧显示为海报的效果非常有用(仅当浏览器可以播放视频时才有效,这可能与poster传统工作方式略有不同,但是这不是一个问题.
我用这个在浏览器上有一个视频播放器
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
</video>
Run Code Online (Sandbox Code Playgroud)
在点击播放之前,它会从视频的最开始显示图像,但在我的大部分视频中,前几秒都是黑屏.是否可以让它在视频的特定时间获取图像,如"0:00:15",而不创建视频缩略图?
在用户单击完整视频之前,我想将它们显示为缩略图。它们不是本地的,我只有URL,例如:https : //filev4.subiz.com/fiqbjssxydufxauruqxi-video_test.mp4。是否有RN组件或库可以做到这一点?因为我看到这是获得ios的视频缩略图的鳕鱼:从视频URL或iPhone SDK中的数据获取缩略图。
这是获取Android缩略图的代码:https : //medium.com/@mujtahidah/get-thumbnail-video-from-url-android-f71533168228。
和库:https : //github.com/react-native-community/react-native-video for react native可以获取android和ios的视频缩略图,但是如果加载大量视频,则会使应用程序崩溃并崩溃,因此我只想从url中获取视频缩略图,而不是加载所有视频,我发现有一天,我尝试使用此方法:https : //github.com/chadsmith/react-native-video-preview但无济于事。
这个https://github.com/lucasbento/react-native-thumbnail-video仅从youtube获得缩略图。
这:https : //github.com/phuochau/react-native-thumbnail仅从本地获取缩略图,而不从url获取。
我尝试了许多方法,但仍然...有人可以帮忙吗?
我有一个简单的 HTML5 视频嵌入,在 iOS 上加载时显示一个空白(白色)帧。在桌面浏览器(包括 Safari)和 Android 上,会显示视频的第一帧。
我知道您可以通过设置明确的海报图像来避免这种情况,但我希望我可以避免必须设置转码服务来提取视频的第一帧。我知道 Apple 可能选择了这条路线来限制移动用户的带宽使用,但在这种情况下,设置转码服务只是过度。
我打得周围的预紧力属性,但没有将其设置为
auto或metadata作品。有没有其他方法可以在没有用户交互的情况下显示视频的第一帧?
这是我正在说明问题的笔的链接。
https://s.codepen.io/webconsult/debug/oRmQva/vWMRwadNoNvr
这是代码如何分别在 iOS 模拟器(在真实硬件上相同)和 Chrome 中呈现的屏幕截图。
html5 ×3
video ×3
html ×2
html5-video ×2
ios ×1
javascript ×1
poster ×1
preloading ×1
react-native ×1
safari ×1