aliplayer阿里云播放器直播及录播前端代码

引入 aliplayer

<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css"/>
<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/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.com/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阿里云播放器直播及录播前端代码相关推荐

阿里云播放器SDK的正确打开方式 | Aliplayer Web播放器介绍及功能实现(三)
阿里云播放器SDK(ApsaraVideo for Player SDK)是阿里视频云端到云到端服务的重要一环,除了支持点播和直播的基础播放功能外,还深度融合视频云业务,支持视频的加密播放.安全下载. ...
nuxt项目打包后阿里云播放器错误：ReferenceError Aliplayer is not defined
nuxt项目打包后阿里云播放器错误:ReferenceError: Aliplayer is not defined 这个问题搞了我一天,阿里云视频播放有时点进去是好的,有时候就报错,而且一刷新也报这 ...
关于，VUE中，阿里云播放器报错：Aliplayer is not defined。
VUE中,阿里云播放器报错:Aliplayer is not defined.-Java-CSDN问答感谢@iMingzhen大哥的解答!
h5阿里云播放器常规使用
阿里云播放器: 引入js和css <script type="text/javascript" charset="utf-8" src="htt ...
在vue项目中使用阿里云播放器
在官方文档中分为HTML5和Flash两种播放模式我用的是html5的播放模式,下面是阿里云官方文档阿里云播放器的使用说明_视频点播-阿里云帮助中心首先在index.html文件中引入 <l ...
阿里云播放器AliyunPlayer的走马灯组件的位置
引入当前组件, 播放器配置中添加如下代码: components: [{name: 'BulletScreenComponent',type: AliPlayerComponent.BulletScr ...
解决ijkplayer和阿里云播放器冲突的解决
ijkplayer和阿里云播放器的冲突问题解决今天遇到导入阿里云的播放器跟自身的ijkplayer播放器产生冲突的问题 ijkplayer 报错 IJKSDLGLView: setupDisplay ...
Swift 第三方播放器AliyunPlayer,音乐(阿里云播放器)(源码)
一直觉得自己写的不是技术,而是情怀,一个个的教程是自己这一路走来的痕迹.靠专业技能的成功是最具可复制性的,希望我的这条路能让你们少走弯路,希望我能帮你们抹去知识的蒙尘,希望我能帮你们理清知识的脉络,希 ...
web直播+聊天室功能（阿里云播放器和即时通信IM聊天、消息自动滚动）
左边为视频直播,右边为聊天解决问题: 1.直播的时候,播放器可以点击,并且可以暂停,解决办法是在播放器上加一次遮罩 2.tim聊天功能要注册阿里云的账号,下载自己的sdk和js插件 3.直播功能下载 ...
腾讯迁移至阿里云播放器
目前APP中视频模块使用了腾讯及阿里两套播放器,造成维护困难.包体增大.恰逢开谈项目下线决定进行播放器业务迁移. 首先需要熟悉一下各个播放器的使用方法以及业务中的应用场景.涉及的模块包括直播拉流.直播 ...

aliplayer阿里云播放器直播及录播前端代码

引入 aliplayer

基本配置

直播配置

录播配置

aliplayer阿里云播放器直播及录播前端代码相关推荐

最新文章

热门文章