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 相关文章推荐
拖动布局之保存布局页面cookies篇
Oct 29 Javascript
jquery用offset()方法获得元素的xy坐标
Sep 06 Javascript
js学习笔记之事件处理模型
Oct 31 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
Mar 03 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
Apr 25 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
Sep 05 Javascript
JavaScript编程设计模式之构造器模式实例分析
Oct 25 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
Dec 06 Javascript
详解webpack babel的配置
Jan 09 Javascript
JS使用new操作符创建对象的方法分析
May 30 Javascript
layui实现三级导航菜单
Jul 26 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
Sep 05 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
Session服务器配置指南与使用经验的深入解析
2013/06/17 PHP
php实现的常见排序算法汇总
2014/09/08 PHP
详解Yii2高级版引入bootstrap.js的一个办法
2017/03/21 PHP
FLASH 广告之外的链接
2008/12/16 Javascript
ie6下png图片背景不透明的解决办法使用js实现
2013/01/11 Javascript
浅析jquery的作用与优势
2013/12/02 Javascript
JavaScript实现获取dom中class的方法
2015/02/09 Javascript
浅谈关于axios和session的一些事
2017/07/13 Javascript
ionic选择多张图片上传的示例代码
2017/10/10 Javascript
浅谈vuex 闲置状态重置方案
2018/01/04 Javascript
Node.js中的child_process模块详解
2018/06/08 Javascript
React-router4路由监听的实现
2018/08/07 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
2018/12/05 Javascript
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
[01:02]DOTA2上海特锦赛SHOWOPEN
2016/03/25 DOTA
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
Python中*args和**kwargs的区别详解
2019/09/17 Python
pytorch 自定义卷积核进行卷积操作方式
2019/12/30 Python
python 装饰器功能与用法案例详解
2020/03/06 Python
CSS3 选择器 伪类选择器介绍
2012/01/21 HTML / CSS
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
html5桌面通知(Web Notifications)实例解析
2014/07/07 HTML / CSS
英国领先的运动物理治疗供应公司:Vivomed
2018/07/14 全球购物
阿巴庭院:Abba Patio
2019/06/18 全球购物
俄罗斯香水在线商店:AromaCode
2019/12/04 全球购物
顶撞老师检讨书
2014/02/07 职场文书
《颐和园》教学反思
2014/02/26 职场文书
法律进企业活动方案
2014/03/04 职场文书
整改报告怎么写
2014/11/06 职场文书
2014年城管个人工作总结
2014/12/08 职场文书
三年级上册科学教学计划
2015/01/21 职场文书
税务会计岗位职责
2015/04/02 职场文书
python 中的jieba分词库
2021/11/23 Python
Android存储中最基本的文件存储方式
2022/04/30 Java/Android
Redis实现分布式锁的五种方法详解
2022/06/14 Redis
box-shadow单边阴影的实现
2023/05/21 HTML / CSS