admin管理员组文章数量:1659539
引入 aliplayer
<link rel="stylesheet" href="https://g.alicdn/de/prismplayer/2.8.2/skins/default/aliplayer-min.css"/>
<script type="text/javascript" charset="utf-8" src="https://g.alicdn/de/prismplayer/2.8.2/aliplayer-h5-min.js"></script>
看官方简介快速入门 点我
看官方接口说明 点我
看官方在线配置 点我
基本配置
//容器
<div id="videoPlayer" class="" style=""></div>
- 直播配置
- 录播配置
直播配置
var playerBox = new Aliplayer({
"id": "videoPlayer", // 容器id
"source": source, // 资源路径
"width": "100%",
"height": "3.8rem",
"autoplay": false, // 自动播放
"isLive": true, // 是否是直播
"rePlay": false, // 循环播放
"playsinline": true,
"preload": true, //预加载
"controlBarVisibility": "always", // 控制台显示方式 always hover click
"useH5Prism": true, // H5优先级最高,能H5播放的绝不选择Flash,除非用户指定用Flash播放
"webkit-playsinline": true,
"x-webkit-airplay": true,
"x5-type": 'h5-page',
"skinLayout": [ // 自定义样式及controlBar, 直播没有进度条,暂停播放按钮需要自定义
{
"name": "bigPlayButton",
"align": "blabs",
"x": 'calc(50% - 25px)',
"y": 'calc(50% - 25px)'
},
{
"name": "H5Loading",
"align": "cc"
},
{
"name": "thumbnail"
},
{
"name": "controlBar",
"align": "blabs",
"x": 0,
"y": 0,
"children": [
{
"name": "playButton",
"align": "tl",
"x": 15,
"y": 12
},
{
"name": "progress",
"align": "blabs",
"x": 0,
"y": 44
},
{
"name": "timeDisplay",
"align": "tl",
"x": 10,
"y": 7
},
{
"name": "fullScreenButton",
"align": "tr",
"x": 10,
"y": 12
},
{
"name": "volume",
"align": "tr",
"x": 5,
"y": 10
}
]
}
]
}, function (player) {
// 控制点击画面控制栏显示及隐藏
// 原来是显示之后五秒隐藏
player.on('click', function(e) {
if($('.prism-big-play-btn').is(':hidden')) {
$('.prism-big-play-btn').show();
$('.prism-controlbar').show();
$('.prism-big-play-btn').css({
'background': 'url(/static/image/3.0/card/bigpause.png) no-repeat',
'background-size': 'contain'
});
} else {
$('.prism-big-play-btn').hide();
$('.prism-controlbar').hide();
$('.prism-big-play-btn').css({
'background': 'url(https://g.alicdn/de/prismplayer/2.8.2/skins/default/img/bigplay.png) no-repeat',
'background-size': 'contain'
})
}
});
// 安卓机视屏未播放(暂停)状态时点击全屏播放按钮无效,进行提示
$('.prism-fullscreen-btn').on('click', function() {
var isAndroidOS = "{{$agent->isAndroidOS()}}";
if(isAndroidOS) {
var state = player.getStatus();
if(state=='ready' || state=='pause') {
window.$Message.success("请播放后再全屏")
}
}
})
}
//video状态获取方法
var status = playerBox.getStatus();
// 根据status进行事件相关操作
// eg:
playerBox.on('ready', function (e) {
console.log('11111111');
$('#videoPlayer').find('video').css('object-fit','contain');
});
playerBox.on("play",function(){}) //播放时
playerBox.on("pause",function(){}) //暂停时
playerBox.on("liveStreamStop",function(){}) // 直播流中断时
playerBox.on("waiting",function(){}) // 数据缓冲时
录播配置
var player = new Aliplayer({
"id": "videoPlayer",
"source": "{{$live_info['record_url']}}",
"width": "100%",
"height": "3.8rem",
"autoplay": false,
"isLive": false,
"rePlay": false,
"playsinline": true,
"preload": true,
"cover": "{{$live_info['record_mp4_url']}}"+"?x-oss-process=video/snapshot,t_7000,f_jpg,w_800,h_600,m_fast", // 封面,阿里云提供了方式截取录像第一帧为图片。在录像地址后接 “?x-oss-process=video/snapshot,t_7000,f_jpg,w_800,h_600,m_fast”
"showBarTime": 3000,
"controlBarVisibility": "always",
"useH5Prism": true,
"webkit-playsinline": true,
"x-webkit-airplay": true,
"x5-type": 'h5-page',
"x5_fullscreen": true,
"showBuffer": true,
"skinLayout": [
{
"name": "bigPlayButton",
"align": "blabs",
"x": 'calc(50% - 25px)',
"y": 'calc(50% - 25px)'
},
{
"name": "H5Loading",
"align": "cc"
},
{
"name": "controlBar",
"align": "blabs",
"x": 0,
"y": 0,
"children": [
{
"name": "progress",
"align": "blabs",
"x": 0,
"y": 44
},
{
"name": "playButton",
"align": "tl",
"x": 15,
"y": 12
},
{
"name": "timeDisplay",
"align": "tl",
"x": 10,
"y": 7
},
{
"name": "fullScreenButton",
"align": "tr",
"x": 10,
"y": 12
},
{
"name": "volume",
"align": "tr",
"x": 5,
"y": 10
}
]
}
]
}, function (player) {
player.on('click', function() {
if($('.prism-controlbar').is(':hidden')) {
$('.prism-controlbar').show();
} else {
$('.prism-controlbar').hide();
}
});
// 安卓机视屏未播放(暂停)状态时点击全屏播放按钮无效,进行提示
$('.prism-fullscreen-btn').on('click', function() {
var isAndroidOS = "{{$agent->isAndroidOS()}}";
if(isAndroidOS) {
var state = player.getStatus();
if(state=='ready' || state=='pause') {
window.$Message.success("请播放后再全屏")
}
}
})
}
版权声明:本文标题:aliplayer阿里云播放器直播及录播前端代码 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1729837517a1214487.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论