温馨提示:这篇文章已超过853天没有更新,请注意相关的内容是否还可用!
本文介绍如何快速接入Web播放器并完成最基础的视频播放。
接入前须知
阿里云Web播放器SDK支持HTML5和Flash两种播放模式,请您提前明确所需集成的播放器模式,并了解相关功能支持和浏览器适配情况。关于功能支持和浏览器的适配说明,详细内容请参见Web播放器简介。
快速接入
引入js文件
Web播放器不依赖于任何的前端js库,只需要在页面中引用js文件,就可以进行初始化。
引入自适应模式的js文件
该js文件同时包含了Flash和H5跨终端自适应的逻辑。引入该js文件后,播放器SDK会自行适配播放模式。
<head> <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.23/skins/default/aliplayer-min.css" /> //(可选)如果您的使用场景需要用到H5模式的播放器,则需引用此css文件。 <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.23/aliplayer-min.js"></script> //(必须)引入js文件。 </head>
引入单模式的js文件
如果您只是想使用其中一种播放技术,也可以只引用对应技术的js文件,从而获得更小的文件体积。
H5模式,示例如下:
<head> <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.23/skins/default/aliplayer-min.css" /> //(必须)H5模式播放器,需引用此css文件。 <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.23/aliplayer-h5-min.js"></script> //(必须)引入H5模式的js文件。 </head>
Flash模式,示例如下:
<head> <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.23/aliplayer-flash-min.js"></script> //(必须)引入Flash模式的js文件。 </head>
在IE 8浏览器使用Flash模式的播放器时,需要在页面添加json.min.js的引用。
示例如下:
https://g.alicdn.com/de/prismplayer/2.9.23/json/json.min.js
提供挂载元素
<body> <div id="J_prismPlayer"></div> </body>
实例化播放器
Web播放器SDK支持5种点播播放方式,包括:URL播放、Vid+PlayAuth播放(推荐)、STS播放、MPS播放、加密播放。各播放方式的代码示例请参见点播视频播放。
Web播放器SDK支持2种直播播放方式,URL播放和加密播放。各播放方式的代码示例请参见直播视频播放。
点播视频播放
使用URL播放方式播放点播视频,需要将播放器的source属性设置为播放地址。播放地址可以是第三方点播地址或阿里云点播服务中的播放地址。阿里云播放地址可以调用获取音视频播放地址接口获取。建议您集成点播服务端SDK来获取音视频播放地址,免去自签名的麻烦。调用接口获取音视频播放地址的示例请参见开发者门户 。
点播URL播放示例
var player = new Aliplayer({ id: 'J_prismPlayer', source: '<your play URL>',//播放地址,可以是第三方点播地址,或阿里云点播服务中的播放地址。 },function(player){ console.log('The player is created.') });
使用VID+PlayAuth播放方式播放点播视频,需要将播放器的vid属性设置为音视频ID,将playauth属性设置为音视频播放凭证。音视频ID可以在音视频上传完成后通过控制台(路径:媒资库 > 音/视频。)或服务端接口(SearchMedia )获取。音视频播放凭证可以调用获取音视频播放凭证接口获取。建议您集成点播服务端SDK来获取音视频播放凭证,免去自签名的麻烦。调用接口获取音视频播放凭证的示例请参见开发者门户 。
推荐视频点播用户采用此播放方式。相比STS播放方式,PlayAuth播放方式在易用性和安全性上更有优势,对比详情请参见凭证方式与STS方式对比。
VID+PlayAuth播放示例
var player = new Aliplayer({ id: 'J_prismPlayer', width: '100%', vid : '<your video ID>',//必选参数。音视频ID。示例:1e067a2831b641db90d570b6480f****。 playauth : '<your PlayAuth>',//必选参数。音视频播放凭证。 },function(player){ console.log('The player is created.') });
使用STS播放方式播放点播视频是指用STS临时凭证而非点播音视频播放凭证播放。STS临时Token需要提前获取,获取方式请参见获取STS临时Token 。播放时需要将播放器的securityToken属性设置为STS临时Token,同时设置为STS临时Token生成的临时AK对(accessKeyId和accessKeySecret)。
STS播放示例
var player = new Aliplayer({ id: 'J_prismPlayer', width: '100%', vid : '<your video ID>',//必选参数。音视频ID可以在音视频上传完成后通过控制台(路径:媒资库 > 音/视频。)或服务端接口(SearchMedia )获取。示例:1e067a2831b641db90d570b6480f****。 accessKeyId: '<your AccessKey ID>',//必选参数。生成STS临时Token时返回。 securityToken: '<your STS token>',//必选参数。视频播放的临时凭证。凭证需要提前生成。生成方式请参考创建角色并进行STS临时授权。 accessKeySecret: '<your AccessKey Secret>',//必选参数。生成STS临时Token时返回。 region: '<region of your video>', // 必选参数。媒体资源所在的地域标识。如cn-shanghai、eu-central-1, ap-southeast-1等。 },function(player){ console.log('The player is created.') });
MPS播放方式是播放器为媒体处理用户(MPS用户)提供的播放方式。MPS播放既需要提前获取以下信息:
vid:媒体处理系统中的媒资ID。
AcessKeyId和AccessKeySecret:随STS临时Token下发的临时AK对。
SecurityToken:STS临时Token。
domainRegion:媒体资源所在的地域。
authInfo:授权信息。
获取MPS媒体相关信息请参见媒体处理视频播放 。
MPS播放示例
var player = new Aliplayer({ id: 'J_prismPlayer', width: '100%', vid : '<your media ID in MPS>',//必选参数。可以通过媒体处理控制台(媒体管理>媒体列表路径)查询。示例:1e067a2831b641db90d570b6480f****。 accId: '<your AccessKey ID>',//必选参数。生成STS临时Token时返回。 accSecret: '<your AccessKey Secret>',//必选参数。生成STS临时Token时返回。 stsToken: '<your STS token>',//必选参数。视频播放的临时凭证。凭证需要提前生成。 domainRegion: '<your domain region>',//必选参数。媒体资源所在的区域(cn-shanghai,cn-hangzhou等)。 authInfo: '<your auth info>',//必选参数。authInfo需要提前生成。 },function(player){ console.log('The player is created.') });
阿里云视频加密(私有加密)
视频加密简介
阿里云视频点播已经拥有一套完善的内容安全保护机制,可用于保障视频内容不被盗链、非法下载和传播。安全机制包括访问限制、播放中心鉴权、业务方二次鉴权、视频加密和安全下载等。
有关访问限制、播放中心鉴权及业务方二次鉴权等安全机制的详细内容请参见视频安全概述,本文主要介绍三种视频加密方式的视频播放。
三种视频加密的简介如下:
安全机制 | 安全手段 | 特点 | 安全等级 | 使用门槛 |
---|---|---|---|---|
视频加密 | 阿里云视频加密(私有加密) | 云端一体的视频加密解决方案,采用私有加密算法,并确保链路的安全传输。 | 高 | 较低,简单配置并集成阿里云播放器即可。 |
HLS标准加密 | HLS通用加密方案,使用AES_128对内容加密,适配所有HLS播放器,但密钥容易被窃取。 | 较高 | 高,需自建密钥管理和令牌颁发服务,并确保链路传输安全。 | |
商业DRM | 苹果Fairplay、谷歌Widevine的原生支持,安全级别很高,满足大的版权内容提供商的要求。 | 高 | 高,按调用License次数收费,只需集成阿里云播放器SDK。 |
直播视频播放
使用URL播放方式播放直播视频,需要将播放器的source属性设置为直播拉流地址,同时将isLive属性设置为true。播放地址可以是第三方直播地址或阿里云直播服务中的拉流地址。阿里云直播拉流地址可以通过直播控制台的地址生成器生成。详情请参见阿里云直播地址生成器 。
直播URL播放示例
<script> var player = new Aliplayer({ id: 'J_prismPlayer', source: '<your play URL>',//播放地址,可以是第三方直播地址,或阿里云直播服务中的拉流地址。 isLive: true,//是否为直播播放。 },function(player){ console.log('The player is created.') }); </script>
经过阿里云视频加密(私有加密)的视频通过直播UrlSource方式播放时,与播放普通视频一致,无需额外设置参数。
直播UrlSource播放示例
UrlSource urlSource = new UrlSource(); urlSource.setUri("播放地址");//必选参数,播放地址为经过私有加密的直播流地址。 aliPlayer.setDataSource(urlSource);
超低延时直播(RTS)视频播放
RTS URL播放
超低延时直播(RTS)使用URL方式播放,无需额外参数设置。RTS拉流地址可以通过直播控制台的地址生成器生成,详情请参见阿里云直播地址生成器 。阿里云播放器通过集成RTS SDK实现RTS播放,默认集成的是最新版本的RTS SDK,您也可以通过参数指定RTS SDK版本,如:rtsVersion: '2.2.1'。
RTS URL播放示例
<script> var player = new Aliplayer({ id: 'J_prismPlayer', source: '<your play URL>',//播放地址,使用超低延时直播(RTS)地址,协议是artc://。 isLive: true,//是否为直播播放。 // rtsVersion: 'x.x.x', // 可以手动指定RTS SDK版本 },function(player){ console.log('The player is created.') }); </script>
辅助工具
在线配置工具
https://player.alicdn.com/aliplayer/setting/setting.html
基础配置更多配置皮肤自定义播放预览代码
视频类型:
播放方式:地址播放
播放地址://player.alicdn.com/video/aliyunmedia.mp4
封面:输入封面地址
宽度:100%
高度:500px
自动播放:
内置播放:
自动加载:
循环播放:
功能演示
https://player.alicdn.com/aliplayer/presentation/index.html
基本功能:
封面延迟播放截图循环播放4k视频更多
组件插件:
图片广告跑马灯
记忆播放(点击播放)
视频列表旋转镜像视频广告弹幕
试看(地址)
倍速播放字幕组件音轨组件多视频广告
清晰度(多地址)
视频打点更多
高级功能:
字幕多音轨多source自适应hls国际化自定义皮肤更多
诊断工具
http://player.alicdn.com/detection.html
类型:
阿里云H5
V2.9.23
Source:
请输入source
Vid:
请输入Vid
playAuth:
请输入playAuth
还没有评论,来说两句吧...