ios中视频的最后一桢问题解决
更新时间：2019年05月14日 10:33:58 作者：rascalhao
这篇文章主要给大家介绍了关于ios中视频的最后一桢问题的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
问题描述
在ios系统下的safari、wechat、以及其他浏览器，在播放部分m3u8的时候，最后一桢的画面会被系统移出，也就是视觉效果在视频播放结束的时候会黑屏，并不是全部的视频都会这样，目前发现最后片段时时长小于.5的最后的画面会被系统移出，未找到相关的文档描述，目前针对该场景做了个polyfill
方案
将视频的最后一桢作为视频的背景图片，这样在视频播放结束画面被移走时就会展示背景图片，反之有视频画面的时候背景就会被覆盖。
具体实现
1、获取视频的最后一桢图片
a.技术能力：在前端中可以通过canvas对video进行绘图截取video的当前画面。
b.问题：但是无法做到截取video任一桢的功能，只能时视频播放哪里截取到哪里，相当于对视频进行截图。
c.探索：监听video的ended事件，但是当ended发生时，画面已经被系统移出了。
d.解决：监听video的timeupdate事件，当currentTime距duration小于1s的时候，开始截取当前的视频桢，这样在ended之前的画面就是视频的最后一桢。
2、将获取的视频最后一桢图片替换为video的背景图片
视频截取图片
function video2Base64 (video: HTMLVideoElement) {
let dataURL = '',
canvas = document.createElement("canvas");
if (video.videoWidth !== 0) {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
(canvas.getContext("2d") as CanvasDrawImage).drawImage(video, 0, 0, canvas.width, canvas.height); //绘制canvas
dataURL = canvas.toDataURL('image/jpeg'); //转换为base64
// 将截取的视频图片设置为视频的背景
video.setAttribute("style", `background-image: url(${dataURL}); background-size: contain; background-position: center;background-repeat: no-repeat;`);
}
}
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对脚本之家的支持。
相关文章
这篇文章主要为大家详细介绍了js实现删除li标签一行内容，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-04-04
这篇文章主要介绍了JS结合bootstrap实现基本的增删改查功能,需要的朋友可以参考下2016-07-07
这篇文章主要介绍了JavaScript返回网页中超链接数量的方法,使用javascript中的document.links实现这一功能,需要的朋友可以参考下2015-04-04
placeholder属性是HTML5 中为input添加的。在input上提供一个占位符，文字形式展示输入字段预期值的提示信息（hint），该字段会在输入为空时显示2016-01-01![JavaScript 反科里化 this [译]](//img.jbzj.com/images/xgimg/bcimg4.png)
本文主要讲了JavaScript中科里化和反科里化this的方法.话题来自于Brendan Eich(JavaScript之父)的一个tweet2012-09-09
JS Array创建及concat()split()slice()的使用方法
下面小编就为大家带来一篇JS Array创建及concat()split()slice()的使用方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
下面小编就为大家带来一篇JS输出空格的简单实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
前端时间刚好使用了百度地图的js api定位获取用户当前经纬度并获取当前详细位置的功能,为了方便下次找起来方便一些自己在这里记录一下,这篇文章主要给大家介绍了关于JS获取经纬度并根据经纬度得到城市信息的相关资料,需要的朋友可以参考下2023-11-11
在Javascript里，函数被调用的时候，除了接受声明是定义的形式参数，每一个函数还接受两个附加的参数：this和arguments。2011-09-09
这篇文章主要为大家详细介绍了js实现简单轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
![JavaScript 反科里化 this [译]](http://img.jbzj.com/images/xgimg/bcimg4.png)
最新评论