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 相关文章推荐
js 加载时自动调整图片大小
May 28 Javascript
js压缩工具 yuicompressor 使用教程
Mar 31 Javascript
JavaScript 中的日期和时间及表示标准介绍
Aug 21 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
May 28 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
Sep 16 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
Apr 07 Javascript
使用three.js 画渐变的直线
Jun 05 Javascript
深入理解js generator数据类型
Aug 16 Javascript
AngularJS  $modal弹出框实例代码
Aug 24 Javascript
JavaScript实现格式化字符串函数String.format
Dec 16 Javascript
knockoutjs模板实现树形结构列表
Jul 31 Javascript
JS深入学习之数组对象排序操作示例
May 01 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
VOLVO车载收音机
2021/03/02 无线电
介绍php设计模式中的工厂模式
2008/06/12 PHP
探讨php中防止SQL注入最好的方法是什么
2013/06/10 PHP
PHP中16个高危函数整理
2019/09/19 PHP
javascript 学习之旅 (3)
2009/02/05 Javascript
有关DOM元素与事件的3个谜题
2010/11/11 Javascript
非html5实现js版弹球游戏示例代码
2013/09/22 Javascript
javascript获得当前的信息的一些常用命令
2015/02/25 Javascript
JQuery勾选指定name的复选框集合并显示的方法
2015/05/18 Javascript
深入浅析JS的数组遍历方法(推荐)
2016/06/15 Javascript
Ubuntu系统下Angularjs开发环境安装
2016/09/01 Javascript
ES6新特性之解构、参数、模块和记号用法示例
2017/04/01 Javascript
ES6中数组array新增方法实例总结
2017/11/07 Javascript
在vue中使用Autoprefixed的方法
2018/07/27 Javascript
JavaScript日期工具类DateUtils定义与用法示例
2018/09/03 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
2019/01/24 Javascript
基于vue通用表单解决方案的思考与分析
2019/03/16 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
2019/06/07 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
2019/09/06 Javascript
uploadify插件实现多个图片上传并预览
2019/09/30 Javascript
Vue分页效果与购物车功能
2019/12/13 Javascript
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
[20:57]Ti4主赛事第三天开幕式
2014/07/21 DOTA
简单的Python的curses库使用教程
2015/04/11 Python
Python实现进程同步和通信的方法
2018/01/02 Python
python 正确保留多位小数的实例
2018/07/16 Python
django框架防止XSS注入的方法分析
2019/06/21 Python
解析Python3中的Import
2019/10/13 Python
python单向链表的基本实现与使用方法【定义、遍历、添加、删除、查找等】
2019/10/24 Python
使用Python函数进行模块化的实现
2019/11/15 Python
Python Numpy,mask图像的生成详解
2020/02/19 Python
Python requests.post方法中data与json参数区别详解
2020/04/30 Python
浅谈keras中Dropout在预测过程中是否仍要起作用
2020/07/09 Python
python爬虫调度器用法及实例代码
2020/11/30 Python
2019年自助餐厅创业计划书模板
2019/08/22 职场文书
《金肉人》米特&《航海王》阿鹤声优松岛实因胰脏癌去世 享寿81岁
2022/04/13 日漫