如何在 safari 或 iOS 上不使用海报获取 HTML5 视频缩略图? [英] How to get HTML5 video thumbnail without using poster on safari or iOS?

问题描述

我嵌入了 mp4 格式的 HTML5 视频.如何在不使用海报"属性的情况下获取海报等缩略图.这个问题出现在 Safari 和 iOS 上.我添加了类似下面提到的代码的视频.

I have embedded HTML5 video with mp4 format. How to get thumbnail image like poster without using "poster" attribute. This problem coming on Safari and iOS. I have added video like below mentioned code.

<video height=350 id='TestVideo' webkit-playsinline><source src='test.mp4' type=video/mp4></video>

在 Chrome、IE、Firefox 上，视频的第一帧以缩略图形式出现，但在 Safari 和 iOS 上不出现.

On Chrome, IE, Firefox first frame of video coming as thumbnail image, but not coming on Safari and iOS.

推荐答案

只需在 video 标签中添加 preload="metadata" 并设置 #t=0.1 在 url src 处，它将获取视频的 0.1s 帧作为缩略图

simply add preload="metadata" in video tag and set #t=0.1 at url src, it will get the frame of 0.1s of your video as thumbnail

但是，这个方案的缺点是当你点击播放视频时，它总是从0.1s开始

however, the disadvantage of this solution is when you click to play the video, it always start at 0.1s

<video preload="metadata" controls>
    <source src="video.mp4#t=0.1" type="video/mp4">
</video>

这篇关于如何在 safari 或 iOS 上不使用海报获取 HTML5 视频缩略图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！