解决ios中视频的最后一帧问题

问题描述

在ios系统下的safari、微信等浏览器中，播放m3u8的一部分时，最后一帧会被系统移出，也就是视频播放出来时视觉效果会是黑色的，并不是所有的视频都会这样。目前发现最后一段长度小于. 5的最后一帧会被系统移出，找不到相关文档描述。目前，已经为这一场景制作了polyfill。

程序

视频的最后一帧作为视频的背景图片，这样视频播放结束时会显示背景图片，有视频图片时会覆盖背景。

具体实现

1.获取视频的最后一帧

A.技术能力：在前端，可以通过画布绘制视频来捕捉视频的当前画面。b问题：但是截取任意一帧视频的功能无法实现，只能在视频播放的任何地方截取，相当于把视频截图。c .探索：监控视频的结束事件，但当结束发生时，画面已被系统移出。d .解决方法：监控视频的timeupdate事件，当currentTime与时长的距离小于1s时，开始截取当前视频帧，这样结束前的画面就是视频的最后一帧。

2.将获得的视频的最后一帧图片替换为视频的背景图片

视频捕获图片

函数video 2base64(video : HTMl video element){ let dataURl=' '，canvas=document . create element(' canvas ')；if (video.videoWidth！==0){ canvas . width=video . video width；canvas . height=video . video height；(CanvasDrawImage . getcontext(' 2d ')为canvasdrawing)。drawImage(视频，0，0，canvas.width，canvas . height)；//绘制画布数据URL=canvas . todaytaul(' image/JPEG ')；//转换为base64 //将拍摄的视频图片设置为背景视频。setAttribute ('style '，` background-image : URL($ { dataurl })；背景尺寸：容器；背景-位置：中心；背景-重复：不重复；`);}}摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。