问题描述ios系统下safari、微信等浏览器，播放部分m3u8时，画面最后一帧会被系统去掉，这就是视觉效果视频播放结束时，屏幕会黑屏。并不是所有的视频都会这样。目前发现最后一个时长小于0.5的画面会被系统移除。未找到相关文件说明。目前，已经为这个场景做了polyfill。该方案使用视频的最后一帧作为视频的背景图，这样在视频结束移除图像时会显示背景图，否则有视频图像时背景会被覆盖。具体实现视频最后一帧的获取a。技术能力：在前端，可以通过canvas进行视频的绘制截取，抓取视频的当前画面。b.问题：但是无法实现截取视频任意一帧的功能。只能在视频播放的地方截取，相当于对视频进行截图。C。探索：监听视频的ended事件，但是当ended事件发生时，屏幕已经被系统移除了。d.解决方法：监听视频的timeupdate事件。当currentTime距离duration小于1s时，开始截取当前视频帧，使得结束前的图片为视频的最后一帧。将获取视频的最后一帧替换为视频的背景图Videocaptureimagefunctionvideo2Base64(video:HTMLVideoElement){letdataURL='',canvas=document.createElement("canvas");if(video.videoWidth!==0){canvas.width=video.videoWidth;canvas.height=video.videoHeight;(canvas.getContext("2d")asCanvasDrawImage).drawImage(video,0,0,canvas.width,canvas.height);//绘制画布dataURL=canvas.toDataURL('image/jpeg');//转换成base64//将截取的视频图片设置为视频的背景video.setAttribute("style",`background-image:url(${dataURL});background-size:contain;background-position:center;背景重复：不重复;`);}}
