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 异步调用框架 (Part 3 - 代码实现)
Aug 04 Javascript
js操作时间(年-月-日 时-分-秒 星期几)
Jun 20 Javascript
jquery自定义类似$.ajax()的方法实现代码
Aug 13 Javascript
js实现鼠标悬浮给图片加边框的方法
Jan 30 Javascript
javascript中传统事件与现代事件
Jun 23 Javascript
js和jquery实现监听键盘事件示例代码
Jun 24 Javascript
JavaScript实现DOM对象选择器
Sep 24 Javascript
使用Angular.js开发的注意事项
Oct 19 Javascript
详解angularjs利用ui-route异步加载组件
May 21 Javascript
JS原型prototype和__proto__用法实例分析
Mar 14 Javascript
Vue父子之间值传递的实例教程
Jul 02 Javascript
JS异步堆栈追踪之为什么await胜过Promise
Apr 28 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
自动生成文章摘要的代码[PHP 版本]
2007/03/20 PHP
Yii实现多数据库主从读写分离的方法
2014/12/29 PHP
php session 写入数据库
2016/02/13 PHP
实现复选框全选/全不选切换
2006/12/23 Javascript
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
2007/10/01 Javascript
javascript 从if else 到 switch case 再到抽象
2010/07/17 Javascript
HTML Dom与Css控制方法
2010/10/25 Javascript
jquery改变tr背景色的示例代码
2013/12/28 Javascript
Node.js中HTTP模块与事件模块详解
2014/11/14 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
2015/05/19 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
2016/04/29 Javascript
express文件上传中间件Multer详解
2016/10/24 Javascript
angularjs使用directive实现分页组件的示例
2017/02/07 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
2017/04/22 Javascript
Node.js中 __dirname 的使用介绍
2017/06/19 Javascript
详解nodejs通过代理(proxy)发送http请求(request)
2017/09/22 NodeJs
EasyUI实现下拉框多选功能
2017/11/07 Javascript
解析Vue 2.5的Diff算法
2017/11/28 Javascript
vue-router配合ElementUI实现导航的实例
2018/02/11 Javascript
JS中的函数与对象的创建方式
2019/05/12 Javascript
基于vue如何发布一个npm包的方法步骤
2019/05/15 Javascript
JavaScript实现留言板案例
2020/03/17 Javascript
Nodejs文件上传、监听上传进度的代码
2020/03/27 NodeJs
Python实现的数据结构与算法之链表详解
2015/04/22 Python
Python的re模块正则表达式操作
2016/05/25 Python
Python实现的FTP通信客户端与服务器端功能示例
2018/03/28 Python
pyspark.sql.DataFrame与pandas.DataFrame之间的相互转换实例
2018/08/02 Python
详解python pandas 分组统计的方法
2019/07/30 Python
解决Python3.8运行tornado项目报NotImplementedError错误
2020/09/02 Python
pandas针对excel处理的实现
2021/01/15 Python
沃尔玛加拿大:Walmart.ca
2020/03/02 全球购物
放飞蜻蜓反思
2014/02/05 职场文书
物流专员岗位职责
2014/02/17 职场文书
2014年宣传工作总结
2014/11/18 职场文书
经济纠纷起诉状
2015/05/20 职场文书
Nginx 502 bad gateway错误解决的九种方案及原因
2022/08/14 Servers