如何在 safari 或 iOS 上不使用海报获取 HTML5 视频缩略图？
[英]How to get HTML5 video thumbnail without using poster on safari or iOS?
问题描述
I have embedded HTML5 video with mp4 format.
我已经嵌入了 mp4 格式的 HTML5 视频。 How to get thumbnail image like poster without using "poster" attribute.如何在不使用“海报”属性的情况下获取海报等缩略图。 This problem coming on Safari and iOS.这个问题出现在 Safari 和 iOS 上。 I have added video like below mentioned code.我添加了像下面提到的代码一样的视频。
<video height=350 id='TestVideo' webkit-playsinline><source src='test.mp4' type=video/mp4></video>
On Chrome, IE, Firefox first frame of video coming as thumbnail image, but not coming on Safari and iOS.在 Chrome、IE、Firefox 上，视频的第一帧以缩略图形式出现，但在 Safari 和 iOS 上则不然。
5 个解决方案
解决方案1
21 2020-04-01 10:21:25
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只需在video标签中添加preload="metadata"并在 url src 处设置#t=0.1 ，它将获得视频的 0.1s 帧作为缩略图
however, the disadvantage of this solution is when you click to play the video, it always start at 0.1s然而，这个方案的缺点是当你点击播放视频时，它总是从0.1s开始
<video preload="metadata" controls>
<source src="video.mp4#t=0.1" type="video/mp4">
</video>
解决方案2
8 2017-04-05 21:45:29
If you want to do this without storing server side images it is possible, though a bit clunky... uses a canvas to record the first frame of the video and then overlay that over the video element.如果您想在不存储服务器端图像的情况下执行此操作，虽然有点笨重...使用画布记录视频的第一帧，然后将其覆盖在视频元素上。 It may be possible to use the URL for the Canvas as a source for the Poster (eg video.poster = c.toDataURL(); ) but that requires correct CORS setup (not sure if the video was on your own server, and if you have control over that, so took the safest option).可以使用画布的 URL 作为海报的来源（例如video.poster = c.toDataURL(); ），但这需要正确的 CORS 设置（不确定视频是否在您自己的服务器上，以及你可以控制它，所以采取了最安全的选择）。 This will work best if video is correctly encoded for streaming (so MOOV atom is at the front of the video, otherwise it will be slow to draw the overlay - see this answer for more detail)如果视频正确编码以进行流式传输，这将效果最佳（因此 MOOV 原子位于视频的前面，否则绘制叠加层会很慢 - 请参阅此答案以获取更多详细信息）
The HEAD contains styling for the video and the overlay (you will need to adjust sizing and position to suit your application) HEAD包含视频和覆盖的样式（您需要调整大小和位置以适合您的应用程序）
<head>
<style>
video_box{
float:left;
}
#video_overlays {
position:absolute;
float:left;
width:640px;
min-height:264px;
background-color: #000000;
z-index:300000;
}
</style>
</head>
In the BODY you will need the div for the overlay and the video.在BODY您将需要用于覆盖和视频的div 。 The overlay div has an onclick handler to hide the overlay and start the video playing覆盖层 div 有一个onclick处理程序来隐藏覆盖层并开始播放视频
<div id="video_box">
<div id="video_overlays" onclick="this.style.display='none';document.getElementById('video').play()"></div>
<video id="video" controls width="640" height="264">
<source src="BigBuck.mp4" type='video/mp4'>
</video>
</div>
</div>
Finally you will need code that will load the video, seek to the first frame and load the visual into a canvas that you then insert into the overlay最后，您将需要用于加载视频、查找第一帧并将视觉效果加载到画布中的代码，然后您将其插入到叠加层中
<script>
function generateOverlay() {
video.removeEventListener('seeked',generateOverlay); / tidy up the event handler so it doesn't redraw the overlay every time the user manually seeks the video
var c = document.createElement("canvas");
var ctx = c.getContext("2d");
c.width = 640;
c.height = 264;
ctx.drawImage(video, 0, 0, 640, 264); // take the content of the video frame and place in canvas
overlay.appendChild(c); // insert canvas into the overlay div
}
// identify the video and the overlay
var video = document.getElementById("video");
var overlay = document.getElementById("video_overlays");
// add a handler that when the metadata for the video is loaded it then seeks to the first frame
video.addEventListener('loadeddata', function() {
this.currentTime = 0;
}, false);
// add a handler that when correctly seeked, it generated the overlay
video.addEventListener('seeked', function() {
// now video has seeked and current frames will show
// at the time as we expect
generateOverlay();
}, false);
// load the video, which will trigger the event handlers in turn
video.load();
</script>
解决方案3
0 2016-12-21 05:45:29
Source: How to set the thumbnail image on HTML5 video?来源： 如何在 HTML5 视频上设置缩略图？
This worked for me:这对我有用：
<img src="thumbnail.png" alt="thumbnail" />
/* code for the video goes here */
Now using jQuery play the video and hide the image as现在使用 jQuery 播放视频并将图像隐藏为
$("img").on("click", function() {
$(this).hide();
// play the video now..
})
解决方案4
0 2020-01-21 05:21:52
this is a bit late but we had the same scenario.这有点晚了，但我们有相同的场景。 I can't use the attribute 'muted' because my videos are podcasts.我无法使用“静音”属性，因为我的视频是播客。 This is what I came up with and I hope to share it with future visitors.这就是我想出来的，我希望与未来的访客分享。 What I did is load the video in the body tag, drew a canvas, retrieved as base64 and applied to the video as the background image.我所做的是在 body 标签中加载视频，绘制一个画布，作为 base64 检索并作为背景图像应用于视频。
Since my video should be fixed 150px in height, I computed the aspect ratio so that whatever height and width of the actual video, it will be resized into 150px height and dynamic width.由于我的视频高度应固定为 150 像素，因此我计算了纵横比，以便无论实际视频的高度和宽度如何，都将调整为 150 像素的高度和动态宽度。
$('body').append('<video class="checkmeload" style="position:absolute;top:-10000px" controls preload="auto" playsinline src="//src-here"><source src="//src-here" type="//videotype-here"></video>');
$('body').find('.checkmeload').on('loadeddata', function(){
var video = $('.checkmeload');
var canvas = document.createElement('canvas');
aspectratio = (video[0].videoWidth / video[0].videoHeight);
newwidth = (150 * aspectratio);
canvas.width = newwidth;
canvas.height = 150;
var context = canvas.getContext('2d');
context.drawImage(video[0], 0, 0, canvas.width, canvas.height);
var dataURI = canvas.toDataURL('image/jpeg');
$('body').find('.checkmeload').remove();
$('#myvideo').css('background-image','url("'+dataURI +'")');
});
解决方案5
0 2021-12-06 13:37:11
add #t=0.001 at the end of the video url在视频网址末尾添加#t=0.001
https://muffinman.io/blog/hack-for-ios-safari-to-display-html-video-thumbnail/ https://muffinman.io/blog/hack-for-ios-safari-to-display-html-video-thumbnail/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.