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 相关文章推荐
取键盘键位ASCII码的网页
Jul 30 Javascript
jquery 简单的进度条实现代码
Mar 11 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
Sep 14 Javascript
基于Javascript实现返回顶部按钮
Feb 29 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
Apr 13 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
Aug 06 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
Feb 09 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
Mar 06 Javascript
Angularjs之ngModel中的值验证绑定方法
Sep 13 Javascript
Three.js实现简单3D房间布局
Dec 30 Javascript
Angular8路由守卫原理和使用方法
Aug 29 Javascript
vue-cli脚手架的.babelrc文件用法说明
Sep 11 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 字符截取 解决中文的截取问题,不用mb系列
2009/09/29 PHP
国外比较好的几个的Php开源建站平台小结
2010/04/22 PHP
PHP中file_get_contents函数抓取https地址出错的解决方法(两种方法)
2015/09/22 PHP
JavaScript 对话框和状态栏使用说明
2009/10/25 Javascript
浏览器解析js生成的html出现样式问题的解决方法
2012/04/16 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
2013/10/24 Javascript
IE6-8中Date不支持toISOString的修复方法
2014/05/04 Javascript
javascript实现判断鼠标的状态
2015/07/10 Javascript
解决给dom元素绑定click等事件无效问题的方法
2017/02/17 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
jQuery实现表单动态加减、ajax表单提交功能
2018/06/08 jQuery
用vue-cli开发vue时的代理设置方法
2018/09/20 Javascript
20个必会的JavaScript面试题(小结)
2019/07/02 Javascript
vue实现导航菜单和编辑文本的示例代码
2020/07/04 Javascript
[59:07]海涛为你详解DOTA2新版本“贤哲秘契”
2014/11/22 DOTA
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
Python最基本的数据类型以及对元组的介绍
2015/04/14 Python
python列表的常用操作方法小结
2016/05/21 Python
pygame实现弹力球及其变速效果
2017/07/03 Python
Python3多线程基础知识点
2019/02/19 Python
python turtle库画一个方格和圆实例
2019/06/27 Python
Python3实现汉语转换为汉语拼音
2019/07/08 Python
不到20行实现Python代码即可制作精美证件照
2020/04/24 Python
django model 条件过滤 queryset.filter(**condtions)用法详解
2020/05/20 Python
opencv 图像滤波(均值,方框,高斯,中值)
2020/07/08 Python
Python通过zookeeper实现分布式服务代码解析
2020/07/22 Python
python 实现有道翻译功能
2021/02/26 Python
.NET程序员的数据库面试题
2012/10/10 面试题
毕业生求职简历的自我评价
2013/10/07 职场文书
思想专业自荐信范文
2013/12/25 职场文书
大学自我评价
2014/02/12 职场文书
财务部副经理岗位职责
2014/03/14 职场文书
英语求职信范文
2014/05/23 职场文书
成绩报告单家长评语
2014/12/30 职场文书
机动车交通事故协议书
2015/01/29 职场文书
在python中实现导入一个需要传参的模块
2021/05/12 Python