在Safari或iOS上,如果不使用poster属性来获取HTML5视频的缩略图,可以通过以下方法实现:
示例代码如下:
var video = document.createElement('video');
video.src = 'video.mp4';
video.addEventListener('loadedmetadata', function() {
var canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
var context = canvas.getContext('2d');
context.drawImage(video, 0, 0, canvas.width, canvas.height);
var thumbnail = canvas.toDataURL('image/jpeg');
// 使用thumbnail作为缩略图
});
video.addEventListener('loadeddata', function() {
video.currentTime = 0; // 获取第一帧
});
注意:由于涉及到视频加载和绘制,以上代码需要在用户与页面进行交互后触发,否则可能会被浏览器阻止。
以上是在Safari或iOS上不使用poster属性获取HTML5视频缩略图的方法。请注意,这些方法并不依赖于特定的云计算品牌商,因此不需要提及腾讯云或其他云计算品牌商的相关产品。
领取专属 10元无门槛券
手把手带您无忧上云