阿里云播放器SDK的正确打开方式 | Aliplayer Web播放器介绍及功能实现(三)

简介: 阿里云播放器SDK(ApsaraVideo for Player SDK)是阿里视频云端到云到端服务的重要一环,除了支持点播和直播的基础播放功能外,还深度融合视频云业务,支持视频的加密播放、安全下载、首屏秒开、低延时等业务场景,为用户提供简单、快速、安全、稳定的视频播放服务。

阿里云播放器SDK(ApsaraVideo for Player SDK)是阿里视频云端到云到端服务的重要一环,除了支持点播和直播的基础播放功能外,还深度融合视频云业务,支持视频的加密播放、安全下载、首屏秒开、低延时等业务场景,为用户提供简单、快速、安全、稳定的视频播放服务。本文衔接上文,详细介绍web播放器的功能及实现。

_1

一、基本概况及功能

  • 播放器架构

Aliplayer Web播放器分为H5和Flash两个,Flash播放器随着技术的发展会逐渐被边缘化,所以我们以后只做维护,不会更新功能了,重点会放在H5播放器上。H5播放器架构主要分四层,底层H5 Video,播放能力和H5原生Video紧密相关。第二层是基础播放器,它不依赖于具体业务,通过URL的方式来播放。第三层是为各种业务场景准备的不同的播放器,可以很容易的扩展,相互隔离不依赖。最上面一层是适配的播放器,会根据终端类型、浏览器类型、播放格式和用户指定来进行智能适配。

  • 播放器功能

最近,我们在播放器端上也实现了截图、国际化、变速、UI自定义、微信同层播放、自适应播放、加密播放、H5播放flv、自定义插件等功能。后续,我们还会通过插件的形式实现弹幕、广告等功能,并会开源到github上,也会支持用户根据自己业务需求来自定义SDK包。

  • 播放器支持视频格式

_3_1

  • 适配播放

我们整个视频播放的基本原则是H5优先,能用H5播放的肯定不用Flash去播放。所以在移动端,我们肯定是用H5来播放的,PC端也依照这个原则尽量使用H5。同时,我们会判断浏览器类型支持哪种播放格式,比如m3u8在PC端IE11以上的浏览器才能播放,如果遇到IE11以下的浏览器,我们自动会选择Flash播放。在视频格式方面,假设视频是rtmp和flv,我们会自动选择Flash播放。另外,如果用户自主设置useH5Prism和useFlashPrism属性,那我们也会依照用户的选择。

  • 浏览器支持情况

FLASH支持IE8以上,在浏览器上启动允许FLASH运行即可;H5支持IE9以上,m3u8需要在IE11以上才可以运行;其他浏览器都也都是可以支持的。

  • 两种播放方式
  1. source,通过url 去播放
  2. 通过点播vid+playauth去播放,第二种方式和视频云结合比较紧密
  • 点播播放格式的选择

点播服务中转码生成的视频格式有很多,包括m3u8、flv、mp4等。播放器有自己的一套逻辑去选择播放格式。对于H5来说,默认播放低清版本来节省流量,如果用户使用了切换清晰度的功能,那我们会默认打开他选择的版本。格式方面,则默认播放mp4,用户也可以设置qualitySort来优先播放高清的的版本。对于Flash来说,默认格式顺序是m3u8、flv、mp4。

_2017_11_09_2_58_11

二、功能介绍及启用

  • 创建播放器
  1. 引用正确的JS和CSS文件
  2. 添加播放器容器
    需要设置容器的id属性,另外2.0.1之前的版本要添加prism-player类型。

_3_3

  • New Aliplayer创建播放

_3_4

  • 在线配置,用户可以预先体验下播放器的情况

_3_5

  • Aliplayer-Cli创建演示例子

用户需要演示例子的时候,不需要写很多代码,通过这个命令,就可以创建例子,直接体验AliPlayer。

_3_6

  • PC端支持m3u8

播放域名启用允许跨域访问

  • 订阅和取消事件

b_3_7

  • 清晰度切换

H5 1.9.9以后的版本和id+playauth播放方式才支持清晰度切换;支持记忆选择的清晰度,当选择的清晰度不能播放时,自动选择下一个清晰度播放。

_3_7

  • 手动切换视频-H5

这个功能播放器内比较常见。我们把它分成两种情况去处理,如果是地址播放,我们通过loadByUrl来播放;如果是vid+playauth播放,我们通过replayByVidAndPlayAuth的方法来播放。

  • 手动切换视频-flash

地址播放方法与H5的方法一样,vid+playauth播放则需要先销毁播放器,再重新创建播放。

_3_8

  • 不同地址格式的切换

只能先销毁播放器,再重新选择正确的播放器播放。Github地址看simple demo:https://github.com/alilmq/aliplayer-simple-demo
![b_3_7]

  • UI自定义

很多用户有这个需求,所以我们的UI是可以隐藏掉的。提供了一个skinLayout的属性,当这个属性没有指定值的时候,UI组件是全部显示。如果是空数组的时候,UI组件全部不显示。并且可以自定义组件的显示和位置,在默认UI基础上去裁剪,2.3.0版本以后,用户也可以通过自定义插件的方式自定义自己的UI。

  • 截屏

H5启用:
_3_10

FLASH启用:snapshot:true
H5播放器,播放域名需添加允许跨域访问的header
支持订阅snapshoted事件,获取截屏的时间点和数据:
_3_12

支持设置截图的大小和质量:
_3_13

支持添加文字水印:
_3_14

  • 边转变播功能

边转边播是MTS的功能,播放器可以支持这种场景的播放。第一次观看的时候调用MTS API启动转码,边转码边播放,而且可以设置延迟播放。转码中使用直播播放器,转码完成后使用点播方式播放。

  • H5 android微信同层播放

因为H5在android端微信打开时,会自动全屏播放,覆盖Dom元素。
同层播放一般有两种业务场景,一种是点播的,视频在某个地方播放,下面的评论、播放列表等,demo地址:https://github.com/alilmq/h5demo

还要一种场景是直播场景,视频需要全屏。可以通过设置x5_type:h5启用同层播放。Demo 地址:https://github.com/alilmq/h5livedemo

另外H5微信同层播放,有两篇文章可以参考:
http://player.alicdn.com/aliplayer/docs/blogs/how-to-handle-h5-same-layer.html
http://player.alicdn.com/aliplayer/docs/blogs/how-to-handle-h5-same-layer.html

  • 国际化

提供language属性,用于启用各种语言,默认为zh-cn,可选值为zh-cn or en-us。

  • 倍速播放

提供UI的版本,只提供了0.5、1、1.5、2四种倍速播放;而setspeed方法,可以随意设置倍速播放。这个可能会有一些限制,移动端有的浏览器会不支持,比如android微信。

  • 对于直播播放失败的处理

在播放失败时候,会尝试重新播放,触发onM3u8Retry事件,事件里可以做一些提示,比如主播离开请稍等;如果几次尝试后还是失败,会出发livestreamstop事件,事件里做一些直播失败或结束的提示。

_3_15


三、其他辅助功能及工具

我们也做了一些辅助工具,方便用户去接入和排查问题。

  • 诊断工具

通过错误码描述的映射关系,大概能知道用户的错误所在;
通过vid知道用户播放的是哪个视频;
通过uuid这个唯一标识,可以在日志系统中查到用户的播放状态;
通过requestid和播放时间,可以定位到用户的错误是哪次播放的错误和具体的播放时间。
这里还有一个诊断的功能,可以知道用户环境的具体信息,省去手工获取视频的繁琐,可以快速诊断问题。
地址:http://player.alicdn.com/detection.html
_3_16

  • 检测工具

关于视频播放失败,我们提供了三种方式,原生H5、阿里云H5、阿里云Flash。我们把播放的日志调出来,通过日志来情况来判断播放失败的原因。举个例子,如果用户刚开始请求数据时就失败的话,那我们会猜测存在鉴权失败的情况;如果加载数据出错,那可能是用户的网络的原因;如果是开始播放后出错,可能就问题就出在解析或播放器不支持等方面。

  • ffmpeg查看视频信息

有的用户只有画面,没有声音。我们可以通过ffmpeg可以看下视频的格式、流的情况、码率、帧率等。

最后,阿里云播放器的所有情况都聚合在以下的网站上:
http://player.alicdn.com/detection.html,其中包括帮助文档、在线配置、诊断工具、产品demo等,大家可以登录了解详情。

为了扶持更多创业者,降低入行门槛,视频点播已在原有的视频点播服务五个套餐包基础上,推出了超值体验套餐包。
只需9.9元即可获得10GB流量、50GB存储、100分钟转码,可供个人、小微企业门户网站体验使用。

image

点击进入活动页面,立即购买,完成支付

image

目录
相关文章
|
2月前
|
API 开发工具 开发者
百宝箱开放平台 ✖️ Web SDK
本服务支持开发者将智能体以网页悬浮窗形式集成至Web页面,通过引入SDK并配置agentId等参数实现交互,需先完成应用发布。
180 0
|
9月前
|
云安全 数据采集 安全
阿里云热门云安全产品简介:Web应用防火墙与云防火墙产品各自作用介绍
在阿里云的安全类云产品中,Web应用防火墙与云防火墙是用户比较关注的两款安全产品,二者在作用上各有侧重,共同构成了阿里云强大的安全防护体系。本文将对Web应用防火墙与云防火墙产品各自的主要作用进行详细介绍。
|
9月前
|
安全 大数据 数据挖掘
课时9:阿里云Web应用防火墙:全面保障网站的安全与可用性
阿里云Web应用防火墙(WAF)基于阿里巴巴十年攻防经验,提供全面的网站安全防护。它通过Web应用防护、CC攻击防护和业务风控,有效应对各类网络威胁,确保网站的安全与可用性。智能双引擎技术降低误报率,实时数据分析和虚拟补丁更新保障系统安全。WAF已成功护航多个重大活动,为企业提供高效、简便的安全解决方案。
260 0
|
12月前
|
缓存 安全 搜索推荐
阿里云先知安全沙龙(北京站) ——浅谈Web快速打点
信息收集是网络安全中的重要环节,常用工具如Hunter、Fofa和扫描工具可帮助全面了解目标系统的网络结构与潜在漏洞。遇到默认Nginx或Tomcat 404页面时,可通过扫路径、域名模糊测试、搜索引擎缓存等手段获取更多信息。AllIN工具(GitHub: P1-Team/AllIN)能高效扫描网站路径,发现敏感信息。漏洞利用则需充分准备,以应对突发情况,确保快速拿下目标站点。 简介:信息收集与漏洞利用是网络安全的两大关键步骤。通过多种工具和技术手段,安全人员可以全面了解目标系统,发现潜在漏洞,并制定有效的防御和攻击策略。
|
缓存 Kubernetes Java
阿里云 SAE Web:百毫秒高弹性的实时事件中心的架构和挑战
SAE 事件中心通过智能诊断显示通知与用户连接起来,SAE WEB 百毫秒弹性实例给事件中心带来了新的实时性、海量数据和高吞吐的挑战,本篇将带您了解 SAE 整体事件中心的架构和挑战。
451 10
|
弹性计算 数据库 数据安全/隐私保护
阿里云服务器真香宝典之Calibre-Web个人图书馆云端部署
在阿里云ECS(2核2G,SSD40G,3M带宽)上,安装Ubuntu 22.04,然后配置Docker和FTP。创建 `/config` 和 `/books` 目录,设置权限,开放端口,拉取 `johngong/calibre-web` Docker镜像,以`calibre-web`命名容器,映射端口,配置环境变量,挂载卷,确保重启策略。本地安装Calibre客户端,上传metadata.db到服务器。在Calibre-web服务端配置数据库,启用上传权限,修改管理员账户信息。完成配置后,开始上传电子书并进行阅读。
1846 2
阿里云服务器真香宝典之Calibre-Web个人图书馆云端部署
|
编解码 缓存 开发工具
Pico Neo 3教程☀️ 三、SDK 的进阶功能
Pico Neo 3教程☀️ 三、SDK 的进阶功能
|
编解码 Linux 开发工具
大牛直播SDK跨平台RTMP直播推送模块技术设计和功能列表
大牛直播SDK是一款跨平台RTMP直播推送模块,支持Windows、Linux(x64_64与aarch64架构)、Android及iOS平台。该SDK功能全面,包括摄像头、屏幕、麦克风等数据采集与推送,并支持编码前后数据对接。其架构设计优秀,确保低延迟与高效率,结合SmartPlayer播放器实现毫秒级延迟体验。具备全自研框架,易于扩展且支持多种数据源接入,如外部YUV/RGB/H.264等格式。此外,各平台支持特性丰富,如Windows平台支持多摄像头合成,Android与iOS平台支持前后摄像头实时切换等。大牛直播SDK还提供了多个示例项目以帮助开发者快速上手。
462 0
|
编解码 开发工具 C#
[大牛直播SDK]Windows平台RTMP直播推送模块功能设计
大牛直播SDK采用全自研框架,具备高度可扩展性与自适应算法,显著降低延迟并提高采集编码效率。SDK以模块化设计,支持RTMP推流及多种音视频编码格式(如AAC、SPEEX、H.264、H.265),并能与播放器SDK组合实现丰富功能,包括流媒体转发、内置RTSP服务等。提供了详尽的参数配置选项,支持多摄像头、屏幕采集与水印叠加,并兼容Windows 7及以上操作系统。该SDK以C++/C#双接口形式提供,集成简便,同时包含调试与发布版本库,便于开发者快速上手。此外,支持断网重连、实时预览及多种编码前后的数据对接需求。
375 0