产品百科 |使用阿里云播放器实现全屏秒播

简介: 阿里云播放器快速实现全屏秒播主要通过三个手段实现该需求:首帧图和播放的首帧画面一致 + 播放器预加载 + 边播边缓存。本方案在 WiFi 环境下可以做到平均 300 毫秒左右的起播速度。

概述

阿里云播放器快速实现全屏秒播主要通过三个手段实现该需求:首帧图和播放的首帧画面一致 + 播放器预加载 + 边播边缓存。本方案在 WiFi 环境下可以做到平均 300 毫秒左右的起播速度。

封面策略

  • 示视频的时候先显示封面,然后再播放视频,如果保证封面图和第一帧画面一致,则用户感觉不到是封面的存在。这样就造成了视频秒开极快的假象。
  • 在快速滑动的时候仅仅只请求封面图。
  • 同时在用户滑动到一半的时候,展现预先下载的一个封面图。

预加载视频策略

  • 创建多个播放器由于播放器不支持边播放边准备的功能,所以实现预加载的功能需要创建多个播放器。
  • 预加载资源
  • 用闲置的播放器对象提前准备接下来需要播放的视频。
  • Android 对应的方法为 AliyunVodPlayer.prepareAsync ()。
  • iOS 对应的播放器类为 AliyunVodPlayer 方法名为:```Objective-C/ 功能:临时 AccessKeyId、AccessKeySecret 和 SecurityToken:开启 RAM 授权,并通过 STS 授权系统提供的 OpenAPI 或 SDK 获取的 AccessKeyId、AccessKeySecret 和 SecurityToken,用于播放和下载请求备注:请参见参数明细
  • (void)prepareWithVid:(NSString *)vid
accessKeyId:(NSString *)accessKeyId
 accessKeySecret:(NSString *)accessKeySecret
   securityToken:(NSString *)securityToken;

启用边播边缓存功能

边播边下缓存功能是在视频被成功播放后,文件会缓存到本地,再次播放视频时会直接使用本地缓存文件,不再走网络请求。

可设置下载路径、最大下载数据(单位:MB)、单一视频最大允许下载的时长(单位:秒)。

//Android代码示例
 //设置缓存目录路径。在创建播放器类,并在调用prepare方法之前设置。
  String sdDir = Environment.getExternalStorageDirectory().getAbsolutePath() + "/test_save_cache";   aliyunVodPlayer.setPlayingCache(true, sdDir, 60 * 60 /*单个文件的最大时长, s */, 300 /*缓存目录文件的总大小,MB*/);
//比如:maxSize设置500M时缓存文件超过500M后会优先覆盖最早缓存的文件。maxDuration设置为300秒时表示超过300秒的视频不会启用缓存功能。
//iOS代码示例
//设置缓存目录路径
NSArray *pathArray = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
NSString *docDir = [pathArray objectAtIndex:0];
//在创建播放器类,并在调用prepare方法之前设置。比如:maxSize设置500M时缓存文件超过500M后会优先覆盖最早缓存的文件。maxDuration设置为300秒时表示超过300秒的视频不会启用缓存功能。
[self.aliPlayer setPlayingCache:YES saveDir:docDir maxSize:500 maxDuration:300];

说明

  • 缓存功能仅针对被完整播放的视频(seek 后无效),主要用于短视频循环播放场景。
  • 需要在播放器 prepare 之前调用。

启动 CDN 预热

进入控制台,在视频点播中找到刷新预热选项。在操作类型中选择预热,填写需要预热的视频 URL。image.png

说明 预热策略由于 CDN 预热有一定成本,可根据视频热度进行预热,将视频主动预热在阿里云各个节点上。


「视频云技术」你最值得关注的音视频技术公众号,每周推送来自阿里云一线的实践技术文章,在这里与音视频领域一流工程师交流切磋。

image.png

相关文章
|
开发工具 C# C++
Windows平台RTMP|RTSP播放器实现画面全屏功能
我们在Windows平台实现RTSP或者RTMP播放的时候,有个功能是绕不开的,那就是播放窗口全屏。本文就以大牛直播SDK(官方)的Windows播放器为例,大概讲下大概实现:
235 0
|
移动开发 前端开发 JavaScript
整合阿里云播放器播放(1) | 学习笔记
快速学习 整合阿里云播放器播放(1)
277 0
整合阿里云播放器播放(1) | 学习笔记
|
编解码 网络协议 Android开发
6款真正好用的播放器推荐
GOM player 是一款本身装有视频播放所需的解码,及占用系统资源少,并且能以最优秀的画质来观看多种格式影片的播放程序。
368 0
|
存储 iOS开发
开发播放器框架之全屏处理
开发播放器框架之全屏处理
开发播放器框架之全屏处理
|
移动开发 JavaScript Android开发
iOS12网页视频播放点击全屏按钮会导致闪退
iOS12网页视频播放点击全屏按钮会导致闪退
317 0
让网页视频倍速播放
让网页视频倍速播放
351 0
让网页视频倍速播放
|
移动开发 JavaScript 前端开发
整合阿里云播放器播放(2) | 学习笔记
快速学习 整合阿里云播放器播放(2)
186 0
整合阿里云播放器播放(2) | 学习笔记
|
iOS开发
IOS手势操作:点击+滑动
IOS手势操作:点击+滑动
190 0
|
Web App开发 Android开发 iOS开发
视频播放的那些事
视频作为淘宝教育业务的基础服务,本文根据自身在手淘中视频播放的实践,谈谈在手淘中视频播放遇到的问题及其解决方案。 播放器 在手淘过去一年多的历史长河中存在五种类型的播放器。 原生 HTML5 video 标签 Android 5.3.2 版本之后的 UC 内核增强 SAC 播放器
4275 0