轻量全能的阿里云Web播放器 - Aliplayer

admin

文章最后更新时间:2024年05月30日

aliplayer.jpg

阿里云Aliplayer简介

阿里云web播放器支持HTML5和Flash两种播放模式。由于Flash Player已停止服务,主流浏览器均不支持Flash播放。在Internet Explorer及其他不支持H5播放的浏览器下使用需要切换至Flash模式。阿里云web播放器支持多种视频协议,如:MP4、FLV、HLS、RTMP等等,同时支持视频点播与直播,亦能支持市面上大部分PC端与移动端浏览器,可以说是兼容性与易用性都非常强的一款Web播放器。


Aliplayer Demo

Demo HTML

<!--阿里云官方播放器文件CDN-->
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.15.2/skins/default/aliplayer-min.CSS" />
<script charset="utf-8" type="text/JavaScript" src="https://g.alicdn.com/de/prismplayer/2.15.2/aliplayer-min.js"></script>
<!--阿里云H5插件CDN-->
<script charset="utf-8" type="text/JavaScript" src="https://g.alicdn.com/de/prismplayer/2.15.2/aliplayer-h5-min.js"></script>
<div id="player"></div>

Demo JS

var player = new Aliplayer({
    id: "player",//容器
    source: "https://xxx.com/2023/index.M3U8",//视频地址
    width: "100%",//宽度
    height: "100%",//高度
    autoplay: false,//自动播放
    preload: true,//预加载
    rePlay: false,//循环播放
    cover:"",//视频封面
    isLive:false,//直播模式
    playsinline: true,//H5是否内置播放,有的Android浏览器不起作用。
    useH5Prism: true,//指定使用H5播放器。
    "controlBarVisibility": "click",//控制栏显示方式
    "showBarTime": 5555,//控制栏自动隐藏时间
});


Aliplayer 参数

id//播放器外层容器的dom元素ID
source//视频地址,多地址示例:source:’{“HD”:”address1”,”SD”:”address2”}’
vid//媒体转码服务的媒体ID
height//播放器高度
width//播放器宽度
videoHeight//视频高度
videoWidth//视频宽度
preload//预加载
cover//视频封面
isLive//直播模式:默认值为false,播放直播流时需要设置为true
autoplay//自动播放
rePlay//循环播放
useH5Prism//指定使用H5播放器
useFlashPrism//指定使用Flash播放器
playsinline//H5是否内置播放,有的Android浏览器不起作用
skinRes//皮肤图片
skinLayout//功能组件布局配置,不传该字段使用默认布局
controlBarVisibility//控制面板的实现,默认值为:hover
    click:点击播放器区域
    hover:移动到播放器区域
    always:控制面板一直显示
    never:隐藏整个控制面板
showBarTime//控制栏自动隐藏时间,单位毫秒
extraInfo//JSON串,用于定制性的接口参数,目前仅Flash支持
enableSystemMenu//是否允许系统右键菜单显示,默认为false
format//指定播放地址格式,只有使用vid的播放方式时支持可选值,取值:MP4 HLSM3U8 flv
mediaType//指定返回音频还是视频,只有使用vid的播放方式时支持,默认值为video
qualitySort//指定排序方式,只有使用Vid + PlayAuth播放方式时支持。取值:desc:表示按倒序排序(即:从大到小排序)。asc:示按正序排序(即:从小到大排序)。
definition//显示视频清晰度,多个使用半角逗号(,)分隔,比如:‘FD,LD’,此值是vid对应流清晰度的一个子集,仅H5模式支持。取值:FD(流畅)LD(标清)SD(高清)HD(超清)OD(原画)2K(2K)4K(4K)
defaultDefinition//默认视频清晰度,此值是vid对应流的一个清晰度,仅H5模式支持。取值:FD(流畅)LD(标清)SD(高清)HD(超清)OD(原画)2K(2K)4K(4K)

x5_type//声明启用同层H5播放器,启用时取值:h5
x5_fullscreen//声明视频播放时是否进入到TBS的全屏模式,取值:false:不把视频做为背景。true:把视频做为背景。默认值为false。
x5_video_position//声明视频播在界面上的位置,默认值为center。取值:center:居中。top:顶部。
x5_orientation//声明TBS播放器支持的方向,取值:landscape:横屏。portrait:竖屏。
x5LandscapeAsFullScreen//声明TBS全屏播放是否横屏,默认值为true。取值:true:横屏。false:竖屏。

autoPlayDelay//延迟播放时间,单位:秒
autoPlayDelayDisplayText//延迟播放提示文本
language//语言 默认为zh-cn。如果未设置,则采用浏览器语言。取值:zh-cn:中文。en-us:英文。
languageTexts//自定义国际化文本JSON结构,key的值需要和language属性值对应起来
snapshot//是否启用Flash截图功能。取值:true:启用。false:禁用。(默认值)
snapshotWatermark//H5设置截图水印
useHlsPluginForSafari//Safari浏览器是否启用HLS插件播放,Safari 11除外。取值:true:启用。false:禁用。(默认值)
enableStashBufferForFlv//H5播放FLV时,设置是否启用播放缓存,只在直播下起作用。取值:true:启用。(默认值)false:禁用。
stashInitialSizeForFlv//H5播放FLV时,初始缓存大小,只在直播下起作用。默认32KB。当设置的值较小时,会提升起播速度,但是值太小时,可能会导致播放一小段之后卡顿。
loadDataTimeout//缓冲多长时间后,提示用户切换低清晰度,单位:秒。默认20秒。
waitingTimeout//最大缓冲超时时间,超过这个时间会有错误提示,单位:秒。默认60秒
diagnosisButtonVisible//是否显示检测按钮,取值:true:显示按钮。false:不显示按钮。默认值为true。
disableSeek//禁用进度条的Seek,取值:true:禁用。false:不禁用。默认值为false。仅Flash支持。
progressMarkers//进度条打点内容数组
vodRetry//点播失败重试次数,默认3次
liveRetry//直播播放失败重试次数,默认5次
keyShortCuts//否启用快捷键,取值:true:开启快捷键。false:不开启快捷键。默认值为false。
textTracks//设置WebVTT外挂字幕,示例:textTracks: [{ kind: 'subtitles', label: '英文(美国)', src: '字幕地址', srclang: 'en-US' }],
    字段解释如下:kind:vtt类型,取值包括subtitles和captions。
    label:用于显示的字幕名称。
    srclang:字幕语言。
    src:字幕地址,请允许跨域访问。


Aliplayer API

API方式:

//H5 播放器
 var player = new Aliplayer({},function(player) {
    player.play();
 });
//Flash 播放器
 player.on('ready',function(e) {
    player.play();
 });

API目录:

play//播放
pause//暂停
replay//循环播放
seek//跳转到某个已加载的时刻进行播放,时间单位:秒
getCurrentTime//获取当前的播放时刻,返回的时间单位:秒
getDuration//获取视频总时长,返回的单位为秒,这个需要在视频加载完成以后才可以获取到,可以在play事件后获取
getVolume//获取当前的音量,返回值为0~1的实数。iOS和部分Android会失效
setVolume//设置音量,vol为0~1的实数,iOS和部分Android会失效
loadByUrl//直接播放视频url,time为可选值(单位:秒)。目前只支持同种格式(MP4、FLV、HLS)之间切换。暂不支持直播RTMP流切换
setPlayerSize//设置播放器大小,取值:400px 60% Chrome浏览器下Flash播放器分别不能小于397x297px
setSpeed//手动设置播放的倍速,支持0.5~2倍速播放,倍速播放仅H5模式支持。移动端可能会失效,比如Android微信。倍速播放UI默认是开启的
setSanpshotProperties//width:宽度,height:高度,rate:截图质量    设置截图参数    
fullscreenService.requestFullScreen//播放器全屏,仅H5支持。
fullscreenService.cancelFullScreen//播放器退出全屏,iOS调用无效,仅H5支持
fullscreenService.getIsFullScreen//获取播放器全屏状态,仅H5支持。
getStatus//获取播放器状态,取值:init:初始化。ready:准备。loading:加载中。play:播放。pause:暂停。playing:正在播放。waiting:等待缓冲。error:错误。ended:结束。
setRotate//rotate:旋转角度 参数为旋转角度,正数为正时针旋转,负数为逆时针旋转。示例:setRotate(90)
getRotate//获取旋转角度
setImage//image:镜像类型 设置镜像,取值:horizon:水平。vertical:垂直。示例:setImage(‘horizon’)。
dispose//播放器销毁。
setCover//cover:封面地址
setProgressMarkers//markers:打点数据集合
setPreviewTime//time:试看时间 设置试看时间,单位:秒。
getPreviewTime//获取试看时间。
isPreview//是否试看。
getCurrentPDT//使用mediaAuth播放通用媒体管理服务的视频,用法:player.replayByMediaAuth(mediaAuth)。
setTraceId//traceId:公共埋点 传入公共埋点,用于日志跟踪,用法:player.setTraceId(traceId);。
setTextTracks//设置一组WebVTT字幕,示例如下:player.setTextTracks([{ kind: 'subtitles', label: '英文(美国)', src: '字幕地址', srclang: 'en-US' }])


Aliplayer 监听

ready//播放器视频初始化按钮渲染完毕。播放器UI初始设置需要此事件后触发,避免UI被初始化所覆盖。
play//视频由暂停恢复为播放时触发。
pause//视频暂停时触发。
canplay//能够开始播放音频和视频时发生,会多次触发,仅H5播放器。
playing//播放中,会触发多次。
ended//当前视频播放完毕时触发
liveStreamStop//直播流中断时触发。HLS、FLV、RTMP在重试5次未成功后触发。提示上层流中断或需要重新加载视频。
onM3u8Retry//HLS直播流中断后重试事件,每次断流只触发一次。
hideBar//控制栏自动隐藏事件。
showBar//控制栏自动显示事件。
waiting//数据缓冲事件。
timeupdate//播放位置发生改变时触发,仅H5模式播放器。可通过getCurrentTime方法,得到当前播放时间。
snapshoted//截图完成事件。
requestFullScreen//全屏事件,仅H5模式支持。
cancelFullScreen//取消全屏事件,iOS下不会触发,仅H5模式支持。
error//错误事件。
startSeek//开始拖拽,参数返回拖拽点的时间。
completeSeek//完成拖拽,参数返回拖拽点的时间。
resolutionChange//直播情况下,推流端切换了分辨率。
seiframe//HLS或FLV收到SEI消息。
rtsFallback//当RTS降级时触发。其中,参数reason为降级的原因,fallbackUrl为降级到的地址。


Aliplayer 错误码

代码    含义
4001    参数不合理。    
4002    鉴权过期。    
4003    无效地址。    
4004    地址不存在。    
4005    开始下载数据错误,检测网络情况或播放地址是否可以访问。    
4006    开始下载元数据错误。    
4007    播放时错误。    
4008    加载超时,检测网络情况或播放地址是否可以访问。    
4009    请求数据错误,测网络情况或播放地址是否可以访问。    
4010    不支持阿里云视频加密(私有加密)播放。    
4011    播放格式不支持。    
4012    playauth解析错误。    
4013    播放数据解码错误MEDIA_ERR_DECODE,检测浏览器是否支持视频格式。    
4014    网络不可用。    
4015    获取数据过程被中止MEDIA_ERR_ABORTED。    
4016    播网络错误加载数据失败MEDIA_ERR_NETWORK。    
4017    返回的播放地址为空。    
4100    信令请求失败。    
4110    不支持webrtc。    
4111    不支持此浏览器。    
4112    浏览器版本过低。    
4113    不支持H264。    
4114    create offer失败。    
4115    自动播放失败。    
4116    播放URL协议错误。    
4118    订阅时候传入的HTMLElement既不是Audio也不是Video。    
4200    播放失败。    
4400    未知错误MEDIA_ERR_SRC_NOT_SUPPORTED(由于服务器或网络原因不能加载资源,或者格式不支持)。    
4500    服务端请求错误,查看Network里点播服务的请求的具体错误。


文章版权声明:除非注明,否则均为十八码原创文章,转载或复制请以超链接形式并注明出处。

发表评论

快捷回复: 表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
评论列表 (暂无评论,1175人围观)

还没有评论,来说两句吧...

目录[+]