ios中视频的最后一桢问题解决

问题描述

在ios系统下的safari、wechat、以及其他浏览器，在播放部分m3u8的时候，最后一桢的画面会被系统移出，也就是视觉效果在视频播放结束的时候会黑屏，并不是全部的视频都会这样，目前发现最后片段时时长小于.5的最后的画面会被系统移出，未找到相关的文档描述，目前针对该场景做了个polyfill

方案

将视频的最后一桢作为视频的背景图片，这样在视频播放结束画面被移走时就会展示背景图片，反之有视频画面的时候背景就会被覆盖。

具体实现

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;`);
  }
}

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • IOS实现视频动画效果的启动图

    IOS实现视频动画效果的启动图

    先上效果图 实现思路 主要思路就是用一个控制器来作为播放视频的载体,然后在让这个控制器作为根视图,视频播放完成之后那就该干嘛干嘛了. 话不多说了,下面就放代码好了 先新建一个控制器AnimationViewController在控制器中新建一个属性moviePlayer,记得要先引入系统库<MediaPlayer/MediaPlayer.h> @property (nonatomic, strong) MPMoviePlayerController *moviePlayer; 设置movieP

  • 详解iOS应用中播放本地视频以及选取本地音频的组件用法

    MPMoviePlayerControlle播放本地视频 MPMoviePlayerControlle与AVAudioPlayer有点类似,前者播放视频,后者播放音频,不过也有很大不同,MPMoviePlayerController 可以直接通过远程URL初始化,而AVAudioPlayer则不可以.不过大体上用起来感觉差不多.废话少说进入体验. 格式支持:MOV.MP4.M4V.与3GP等格式,还支持多种音频格式. 首先你得引入 MediaPlayer.framework.然后在使用到MPMo

  • 浅析iOS中视频播放的几种方案

    1.AVPlayer (1) 优缺点 优点:可以自定义 UI, 进行控制 缺点:单纯的播放,没有控制 UI(进度,暂停,播放等按钮),而且如果要显示播放界面, 需要借助AVPlayerLayer, 添加图层到需要展示的图层上 (2)实现远程视频播放 实现播放功能(只有声音) 1.导入框架 #import <AVFoundation/AVFoundation.h> 2.通过远程 URL 创建 AVPlayer 对象 NSURL *remoteURL = [NSURL URLWithString:

  • iOS中视频播放器的简单封装详解

    iOS中视频播放器的简单封装详解

    前言 如果仅仅是播放视频两者的使用都非常简单,但是相比MediaPlayer,AVPlayer对于视频播放的可控制性更强一些,可以通过自定义的一些控件来实现视频的播放暂停等等.因此这里使用AVPlayer的视频播放. 视频播放器布局 首先使用xib创建CLAVPlayerView继承UIView用来承载播放器,这样我们在外部使用的时候,直接在控制器View或者Cell上添加CLAVPlayerView即可,至于播放器播放或者暂停等操作交给CLAVPlayerView来管理.下面来看一下CLAVP

  • iOS实现视频和图片的上传思路

    关于iOS如何实现视频和图片的上传, 我们先理清下思路,然后小编根据思路一步一步给大家详解实现过程. 思路: #1. 如何获取图片? #2. 如何获取视频? #3. 如何把图片存到缓存路径中? #4. 如何把视频存到缓存路径中? #5. 如何上传? 接下来, 我们按照上面的思路一步一步实现 首先我们新建一个类, 用来储存每一个要上传的文件uploadModel.h #import <Foundation/Foundation.h> @interface uploadModel : NSObje

  • ios中视频的最后一桢问题解决

    ios中视频的最后一桢问题解决

    问题描述 在ios系统下的safari.wechat.以及其他浏览器,在播放部分m3u8的时候,最后一桢的画面会被系统移出,也就是视觉效果在视频播放结束的时候会黑屏,并不是全部的视频都会这样,目前发现最后片段时时长小于.5的最后的画面会被系统移出,未找到相关的文档描述,目前针对该场景做了个polyfill 方案 将视频的最后一桢作为视频的背景图片,这样在视频播放结束画面被移走时就会展示背景图片,反之有视频画面的时候背景就会被覆盖. 具体实现 1.获取视频的最后一桢图片 a.技术能力:在前端中可以

  • iOS中读取照片库及保存图片或视频到照片库的要点解析

    读取照片库PhotoLibrary iOS中如果我们只有一次读取一张图片或者一个视频(或拍一张照片/视频)的需求,那么我们用 UIImagePickerController 就可以搞定.但是很多时候我们需要一次性从PhotoLibrary读取多个照片或者视频,这时候我们就需要另辟蹊径了,好在apple为我们提供了相应的接口. 在开始coding之前我们想要认识几个类: ALAssetsLibrary:代表整个PhotoLibrary,我们可以生成一个它的实例对象,这个实例对象就相当于是照片库的句

  • 详解iOS中集成ijkplayer视频直播框架

    详解iOS中集成ijkplayer视频直播框架

    ijkplayer 是一款做视频直播的框架, 基于ffmpeg, 支持 Android 和 iOS, 网上也有很多集成说明, 但是个人觉得还是不够详细, 在这里详细的讲一下在 iOS 中如何集成ijkplayer, 即便以前从没有接触过, 按着下面做也可以集成成功! 一. 下载ijkplayer ijkplayer下载地址: http://xiazai.jb51.net/201612/yuanma/ijkplayer-master_jb51.rar 下载完成后解压, 解压后文件夹内部目录如下图:

  • 在iOS中给视频添加滤镜的方法示例

    「众所周知,视频可以 P」,今天我们来学习怎么给视频添加滤镜. 在 iOS 中,对视频进行图像处理一般有两种方式: GPUImage 和 AVFoundation . 一.GPUImage 在之前的文章中,我们对 GPUImage 已经有了一定的了解.之前一般使用它对摄像头采集的图像数据进行处理,然而,它对本地视频的处理也一样方便. 直接看代码: // movie NSString *path = [[NSBundle mainBundle] pathForResource:@"sample&q

  • iOS中获取系统相册中的图片实例

    本文介绍了iOS中获取系统相册中的图片,在很多应用中都能用到,可以获取单张图片,也可以同时获取多张图片,废话不多说了,看下面吧. 一.获取单张图片 思路: 1.利用UIImagePickerController可以从系统自带的App(照片\相机)中获得图片 2.设置代理,遵守代理协议 注意这个UIImagePickerController类比较特殊,需要遵守两个代理协议 @interface ViewController () <UIImagePickerControllerDelegate,

  • iOS中利用CoreAnimation实现一个时间的进度条效果

    iOS中利用CoreAnimation实现一个时间的进度条效果

    在iOS中实现进度条通常都是通过不停的设置progress来完成的,这样的进度条适用于网络加载(上传下载文件.图片等).但是对于录制视频这样的需求的话,如果是按照每秒来设置进度的话,显得有点麻烦,于是我就想直接用CoreAnimation来按时间做动画,只要设置最大时间,其他的就不用管了,然后在视频暂停与继续录制时,对动画进行暂停和恢复即可.录制视频的效果如下: 你可以在这里下载demo 那么接下来就是如何用CoreAnimation实现一个进度条控件了. 首先呢,让我们创建一个继承自CASha

  • JS解决IOS中拍照图片预览旋转90度BUG的问题

    JS解决IOS中拍照图片预览旋转90度BUG的问题

    上篇文章[Js利用Canvas实现图片压缩功能]中做了图片压缩上传,但是在IOS真机测试的时候,发现图片预览的时候自动逆时针旋转了90度.对于这个bug,我完全不知道问题出在哪里,接下来就是面向百度编程了.通过度娘找到了相关资料,解决方法记录在此.这个问题的具体因素其实我还是不清楚是为何导致的,只有IOS和部分三星手机会出现此bug. 绝大部分的安卓机并无此问题. 解决此问题需要引入一个第三方 JS 库: exif.js 下载地址:https://github.com/exif-js/exif-

  • iOS中设置清除缓存功能的实现方法

    iOS中设置清除缓存功能的实现方法

    绝大多数应用中都存在着清楚缓存的功能,形形色色,各有千秋,现为大家介绍一种最基础的清除缓存的方法.清除缓存基本上都是在设置界面的某一个Cell,于是我们可以把清除缓存封装在某一个自定义Cell中,如下图所示: 具体步骤 使用注意:过程中需要用到第三方库,请提前安装好:SDWebImage.SVProgressHUD. 1. 创建自定义Cell,命名为GYLClearCacheCell 重写initWithStyle:(UITableViewCellStyle)style reuseIdentif

随机推荐