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 相关文章推荐
jquery使用slideDown实现模块缓慢拉出效果的方法
Mar 27 Javascript
js实现将选中内容分享到新浪或腾讯微博
Dec 16 Javascript
基于JS2Image实现圣诞树代码
Dec 24 Javascript
js实现瀑布流的三种方式比较
Jun 28 Javascript
JavaScript常用数组算法小结
Feb 13 Javascript
基于javascript制作微信聊天面板
Aug 09 Javascript
JS中实现函数return多个返回值的实例
Feb 21 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
Apr 09 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
Apr 12 Javascript
vue遍历对象中的数组取值示例
Nov 07 Javascript
JS实现简单省市二级联动
Nov 27 Javascript
javascript条件式访问属性和箭头函数介绍
Nov 17 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
资料注册后发信小技巧
2006/10/09 PHP
解决GD中文乱码问题
2007/02/14 PHP
PHP5权威编程阅读学习笔记 附电子书下载
2012/07/05 PHP
php+croppic.js实现剪切上传图片功能
2018/08/14 PHP
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
2019/03/07 PHP
面向对象的Javascript之一(初识Javascript)
2012/01/20 Javascript
jquery插件制作 自增长输入框实现代码
2012/08/17 jQuery
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
2013/01/16 Javascript
查找iframe里元素的方法可传参
2013/09/11 Javascript
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
node.js中的socket.io的广播消息
2014/12/15 Javascript
JavaScript DOM事件(笔记)
2015/04/08 Javascript
javascript实现动态表头及表列的展现方法
2015/07/14 Javascript
第一篇初识bootstrap
2016/06/21 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
2016/06/22 Javascript
NodeJs——入门必看攻略
2016/06/27 NodeJs
ajax级联菜单实现方法实例分析
2016/11/28 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
2017/02/07 Javascript
javascript深拷贝的原理与实现方法分析
2017/04/10 Javascript
JS实现的随机排序功能算法示例
2017/06/09 Javascript
JavaScript函数中的this四种绑定形式
2017/08/15 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
2019/03/19 Javascript
vue-model实现简易计算器
2020/08/17 Javascript
linux系统使用python监测网络接口获取网络的输入输出
2014/01/15 Python
Python中__call__用法实例
2014/08/29 Python
Python pickle模块用法实例分析
2015/05/27 Python
python机器学习理论与实战(二)决策树
2018/01/19 Python
关于Django ForeignKey 反向查询中filter和_set的效率对比详解
2018/12/15 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
公司总经理助理岗位职责
2014/07/09 职场文书
优秀党支部申报材料
2014/12/24 职场文书
2015年乡镇流动人口工作总结
2015/05/12 职场文书
法制教育讲座心得体会
2016/01/14 职场文书
自定义函数实现单词排序并运用于PostgreSQL(实现代码)
2021/04/22 PostgreSQL
聊一聊python常用的编程模块
2021/05/14 Python
docker 制作mysql镜像并自动安装
2022/05/20 Servers