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>

1. 直播配置
2. 录播配置

直播配置

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("请播放后再全屏")
                        }
                    }
                })
                 }