vue集成阿里云Aliplayer直播点播组件

官方文档

属性和方法官方文档都有用法，需要可自行查阅

官方文档链接

组件代码 Aliplayer.vue

<template><div class='prism-player' :id='playerId' :style='playStyle'></div>
</template><script>//查具体属性文档 https://help.aliyun.com/document_detail/125572.html?spm=a2c4g.11186623.6.1179.131d10e43Evs78export default {name: 'Aliplayer',props: {playStyle: {type: String,default: ''},aliplayerSdkPath: {// Aliplayer 代码的路径type: String,default: '//g.alicdn.com/de/prismplayer/2.9.3/aliplayer-min.js'},autoplay: {//播放器是否自动播放，在移动端autoplay属性会失效type: Boolean,default: true},isLive: {type: Boolean,default: true},playsinline: {type: Boolean,default: false},width: {type: String,default: '100%'},height: {type: String,default: '500px'},controlBarVisibility: {// 控制面板的实现，默认值为：hover。取值：// click：点击。// hover：停留。// always：一直。type: String,default: 'always'},useH5Prism: {type: Boolean,default: false},useFlashPrism: {type: Boolean,default: false},vid: {//媒体转码服务的媒体Idtype: String,default: ''},playauth: {//播放权证type: String,default: ''},source: {//视频播放地址urltype: String,default: ''},cover: {//播放器默认封面图片，请填写正确的图片url地址。需要autoplay值为false时，才生效type: String,default: ''},format: {//指定播放地址格式type: String,default: ''},x5_video_position: {type: String,default: 'top'},x5_type: {type: String,default: 'h5'},x5_fullscreen: {type: Boolean,default: false},x5_orientation: {type: Number,default: 2},autoPlayDelay: {type: Number,default: 0},autoPlayDelayDisplayText: {type: String}},data () {return {playerId: "aliplayer_" +Math.random().toString(36).substr(2),scriptTagStatus: 0,instance: null,}},created () {if (window.Aliplayer !== undefined) {// 如果全局对象存在，说明编辑器代码已经初始化完成，直接加载编辑器this.scriptTagStatus = 2this.initAliplayer()} else {// 如果全局对象不存在，说明编辑器代码还没有加载完成，需要加载编辑器代码this.insertScriptTag()}},mounted () {if (window.Aliplayer !== undefined) {// 如果全局对象存在，说明编辑器代码已经初始化完成，直接加载编辑器this.scriptTagStatus = 2this.initAliplayer()} else {// 如果全局对象不存在，说明编辑器代码还没有加载完成，需要加载编辑器代码this.insertScriptTag()}},methods: {insertScriptTag () {const _this = thislet playerScriptTag = document.getElementById('playerScriptTag')// 如果这个tag不存在，则生成相关代码tag以加载代码if (playerScriptTag === null) {playerScriptTag = document.createElement('script')playerScriptTag.type = 'text/javascript'playerScriptTag.src = this.aliplayerSdkPathplayerScriptTag.id = 'playerScriptTag'let s = document.getElementsByTagName('head')[0]s.appendChild(playerScriptTag)}if (playerScriptTag.loaded) {_this.scriptTagStatus++} else {playerScriptTag.addEventListener('load', () => {_this.scriptTagStatus++playerScriptTag.loaded = true_this.initAliplayer()})}_this.initAliplayer()},initAliplayer () {const _this = this// scriptTagStatus 为 2 的时候，说明两个必需引入的 js 文件都已经被引入，且加载完成if (_this.scriptTagStatus === 2 && _this.instance === null) {// Vue 异步执行 DOM 更新，这样一来代码执行到这里的时候可能 template 里面的 script 标签还没真正创建// 所以，我们只能在 nextTick 里面初始化 Aliplayer_this.$nextTick(() => {_this.instance = window.Aliplayer({id: _this.playerId,autoplay: _this.autoplay,isLive: _this.isLive,playsinline: _this.playsinline,format: _this.format,width: _this.width,height: _this.height,controlBarVisibility: _this.controlBarVisibility,useH5Prism: _this.useH5Prism,useFlashPrism: _this.useFlashPrism,vid: _this.vid,playauth: _this.playauth,source: _this.source,cover: _this.cover,x5_video_position: _this.x5_video_position,x5_type: _this.x5_type,x5_fullscreen: _this.x5_fullscreen,x5_orientation: _this.x5_orientation,autoPlayDelay: _this.autoPlayDelay,autoPlayDelayDisplayText: _this.autoPlayDelayDisplayText})// 绑定事件，当 AliPlayer 初始化完成后，将编辑器实例通过自定义的 ready 事件交出去_this.instance.on('ready', () => {this.$emit('ready', _this.instance)})_this.instance.on('play', () => {this.$emit('play', _this.instance)})_this.instance.on('pause', () => {this.$emit('pause', _this.instance)})_this.instance.on('ended', () => {this.$emit('ended', _this.instance)})_this.instance.on('liveStreamStop', () => {this.$emit('liveStreamStop', _this.instance)})_this.instance.on('m3u8Retry', () => {this.$emit('m3u8Retry', _this.instance)})_this.instance.on('hideBar', () => {this.$emit('hideBar', _this.instance)})_this.instance.on('waiting', () => {this.$emit('waiting', _this.instance)})_this.instance.on('snapshoted', () => {this.$emit('snapshoted', _this.instance)})})}},/*** 播放视频*/play: function () {this.instance.play()},/*** 暂停视频*/pause: function () {this.instance.pause()},/*** 重播视频*/replay: function () {this.instance.replay()},/*** 跳转到某个时刻进行播放* @argument time 的单位为秒*/seek: function (time) {this.instance.seek(time)},/*** 获取当前时间 单位秒*/getCurrentTime: function () {return this.instance.getCurrentTime()},/***获取视频总时长，返回的单位为秒* @returns 返回的单位为秒*/getDuration: function () {return this.instance.getDuration()},/**获取当前的音量，返回值为0-1的实数ios和部分android会失效*/getVolume: function () {return this.instance.getVolume()},/**设置音量，vol为0-1的实数，ios和部分android会失效*/setVolume: function (vol) {this.instance.setVolume(vol)},/***直接播放视频url，time为可选值（单位秒）目前只支持同种格式（mp4/flv/m3u8）之间切换暂不支持直播rtmp流切换*@argument url 视频地址*@argument time 跳转到多少秒*/loadByUrl: function (url) {this.instance.loadByUrl(url)},/*** 直播流中断时触发。M3U8、FLV、RTMP在重试5次未成功后触发。提示上层流中断或需要重新加载视频。*/liveStreamStop:function() {this.instance.liveStreamStop()},/*** M3U8直播流中断后重试事件，每次断流只触发一次。*/m3u8Retry:function() {this.instance.m3u8Retry()},/*** 设置播放速度*@argument speed 速度*/setSpeed: function (speed) {this.instance.setSpeed(speed)},/*** 设置播放器大小w,h可分别为400px像素或60%百分比chrome浏览器下flash播放器分别不能小于397x297*@argument w 播放器宽度*@argument h 播放器高度*/setPlayerSize: function (w, h) {this.instance.setPlayerSize(w, h)},/*** 目前只支持HTML5界面上的重载功能,暂不支持直播rtmp流切换m3u8）之间切换,暂不支持直播rtmp流切换*@argument vid 视频id*@argument playauth 播放凭证*/reloaduserPlayInfoAndVidRequestMts: function (vid, playauth) {this.instance.reloaduserPlayInfoAndVidRequestMts(vid, playauth)},}}
</script><style>@import url(//g.alicdn.com/de/prismplayer/2.9.3/skins/default/aliplayer-min.css);
</style>

引入组件的直播页面

主要问题在于播放、暂停、直播地址的路径（source）、直播出错恢复处理等问题。

<template><el-dialog:title="isLive ? '直播中-' + title  : '回放-' + title"append-to-body:close-on-click-modal="false":visible.sync="visitable"width="1000px"@close="closePlayer()"><ali-playerref="player"@play="play($event)"@pause="pause($event)"@liveStreamStop="liveStreamStop($event)":autoplay="true":isLive="isLive":rePlay="false"showBuffer="true"showBarTime="5000"format="m3u8":source="source"></ali-player></el-dialog></template><script>
import aliplayer from './Aliplayer.vue'export default {data () {return {visitable:false,id:'',source:'',isLive:true,title:''}},components: {"ali-player": aliplayer},methods: {init(source,isLive,title){// console.log(source,isLive)this.isLive = isLivethis.visitable = truethis.title = titleif(this.source == ''){this.source = source} else {this.$nextTick(()=>{this.$refs.player.play()})}},//播放play(event) {// console.log(event);},//暂停pause(event){// console.log(event);},//直播出错恢复处理onM3u8Retry(event){alert("主播暂时离开，请稍后......")this.closePlayer()this.visitable = false},liveStreamStop(event){alert('直播失败或直播已结束');this.closePlayer()this.visitable = false// player.loadByUrl(newUrl);},//关闭模态层closePlayer(){this.$refs.player.pause()// this.source = ''// console.log(this.source)},}
};
</script>

vue集成阿里云Aliplayer直播点播组件相关推荐

java SpringBoot 集成阿里云视频直播完成直播功能
经历了几天的周折,近期才把项目完成,在这里与大家分享一下踩坑之路,也方便日后有类似项目,可以借阅一番开发直播前先满足已下条件 1.开通视频直播功能 2.购买好了OSS存储 3.购买两个域名并且备案好 ...
java SpringBoot 集成阿里云视频直播完成直播功能
经历了几天的周折,近期才把项目完成,在这里与大家分享一下踩坑之路,也方便日后有类似项目,可以借阅一番该项目是一个H5直播,采用m3u8格式完成直播的展示.通过推流地址,借助第三方推流工具实现直播效果 ...
第三方直播云平台（保利威和阿里云）直播集成demo
第三方直播云平台(保利威和阿里云)直播集成文档整理. 保利威: 保利威帮助中心 js demo <div id="player"></div> <sc ...
React+阿里云Aliplayer播放器实现rtmp直播（推流时间差，重启播放器，计时观看）
需求前端框架为React 用阿里云播放器Aliplayer播放直播使用的rtmp协议资料阿里云播放器 Web端文档:https://help.aliyun.com/document_detai ...
阿里云视频直播 web前端[移动端] Aliplayer的简单案例
阿里云视频直播 web前端[移动端] Aliplayer的简单案例最近做了一个功能就是播放后台提供的各种直播视频,格式在未确定的情况下,刚开始以为简单的一个video标签就能播放视频,后面才发现各种 ...
Spring Boot集成阿里云视频点播服务的过程记录
阿里云视频点播效果预览视频点播视频点播概述功能优势流程环境准备开通视频点播创建RAM用户并授权上传SDK 上传流程下载上传SDK 安装上传SDK 集成Java上传SDK 异常说明 ...
vue使用阿里云视频点播
vue使用阿里云视频点播--videoId + playauth的方式一. 上传视频官方文档https://help.aliyun.com/document_detail/52204.htm?sp ...
阿里云CDN直播架构与双11晚会直播实战
摘要: 分享人:阿里云CDN直播高级技术专家阙寒分享内容:双11直播活动是众多直播活动中非常典型的场景,离不开直播本身这个话题.所以今天的分享会从直播概述.直播架构.业务功能.直播监控.双11这几 ...
阿里云CDN直播架构与双11晚会直播实战 1
摘要: 分享人:阿里云CDN直播高级技术专家阙寒分享内容:双11直播活动是众多直播活动中非常典型的场景,离不开直播本身这个话题.所以今天的分享会从直播概述.直播架构.业务功能.直播监控.双11这几 ...
阿里云视频直播使用详细步骤
目录一.阿里云视频直播 1.什么是视频直播 2.视频直播架构 3.官方文档链接二.使用流程 1.使用条件 2.添加推流域名和播流域名 3.配置CNAME 4.关联推流域名和播流域名 5.生成推流地 ...

vue集成阿里云Aliplayer直播点播组件

官方文档

组件代码 Aliplayer.vue

引入组件的直播页面

vue集成阿里云Aliplayer直播点播组件相关推荐

最新文章

热门文章