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


Posted in Javascript onMay 14, 2019

问题描述

在ios系统下的safari、wechat、以及其他浏览器,在播放部分m3u8的时候,最后一桢的画面会被系统移出,也就是视觉效果在视频播放结束的时候会黑屏,并不是全部的视频都会这样,目前发现最后片段时时长小于.5的最后的画面会被系统移出,未找到相关的文档描述,目前针对该场景做了个polyfill

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

方案

将视频的最后一桢作为视频的背景图片,这样在视频播放结束画面被移走时就会展示背景图片,反之有视频画面的时候背景就会被覆盖。

具体实现

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;`);
  }
}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript调用堆栈及setTimeout使用方法深入剖析
Feb 16 Javascript
JavaScript设计模式之装饰者模式介绍
Dec 28 Javascript
JavaScript实现时间倒计时跳转(推荐)
Jun 28 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
Dec 26 Javascript
正则中的回溯定义与用法分析【JS与java实现】
Dec 27 Javascript
bootstrap实现的自适应页面简单应用示例
Mar 09 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
Mar 25 Javascript
详解用node-images 打造简易图片服务器
May 08 Javascript
JavaScript实现快速排序的方法分析
Jan 10 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
Aug 20 Javascript
vue移动端实现手机左右滑动入场动画
Jun 17 Javascript
layui 中select下拉change事件失效的解决方法
Sep 20 Javascript
详解可以用在VS Code中的正则表达式小技巧
May 14 #Javascript
vue项目中引入vue-datepicker插件的详解
May 14 #Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 #jQuery
JavaScript中this的全面解析及常见实例
May 14 #Javascript
jquery 验证用户名是否重复代码实例
May 14 #jQuery
记录vue项目中遇到的一点小问题
May 14 #Javascript
javascript中如何判断类型汇总
May 14 #Javascript
You might like
15个小时----从修改程序到自己些程序
2006/10/09 PHP
php下图片文字混合水印与缩略图实现代码
2009/12/11 PHP
php preg_filter执行一个正则表达式搜索和替换
2012/02/27 PHP
两个php日期控制类实例
2014/12/09 PHP
ThinkPHP中使用ajax接收json数据的方法
2014/12/18 PHP
Javascript MD4
2006/12/20 Javascript
纯JS实现动态时间显示代码
2014/02/08 Javascript
教你用jquery实现iframe自适应高度
2014/06/11 Javascript
jquery中attr和prop的区别分析
2015/03/16 Javascript
JavaScript实现打字效果的方法
2015/07/10 Javascript
XML文件转化成NSData对象的方法
2015/08/12 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
2016/06/03 Javascript
Vue中封装input组件的实例详解
2017/10/17 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
2018/09/18 Javascript
详解三种方式解决vue中v-html元素中标签样式
2018/11/22 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
Python操作串口的方法
2015/06/17 Python
Python超越函数积分运算以及绘图实现代码
2019/11/20 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
python实现mean-shift聚类算法
2020/06/10 Python
Python实现迪杰斯特拉算法过程解析
2020/09/18 Python
用Python实现职工信息管理系统
2020/12/30 Python
pytorch Dataset,DataLoader产生自定义的训练数据案例
2021/03/03 Python
北美女性服装零售连锁店:maurices
2019/06/12 全球购物
英国亚马逊官方网站:Amazon.co.uk
2019/08/09 全球购物
局域网定义和特性
2016/01/23 面试题
Java基础类库面试题
2013/09/04 面试题
啤酒节策划方案
2014/05/28 职场文书
小学生安全责任书
2014/07/25 职场文书
员工加薪申请报告
2015/05/15 职场文书
2015年教研员工作总结
2015/05/26 职场文书
小学运动会宣传稿
2015/07/23 职场文书
2016应届毕业生实习评语
2015/12/01 职场文书
Python中的matplotlib绘制百分比堆叠柱状图,并为每一个类别设置不同的填充图案
2022/04/20 Python
flex布局中使用flex-wrap实现换行的项目实践
2022/06/21 HTML / CSS
Spring Boot实现文件上传下载
2022/08/14 Java/Android