vue-owt-player
v1.1.3
Published
一个基于Alipayer和owt 开发并封装成vue组件的集成播放器.可播放,m3u8,mp4....视频.支持直播流与点播的基础功能外,视频的加密播放、清晰度切换、直播时移、连麦等业务场景
Downloads
3
Readme
vue-263-player
感谢每一位支持开源的朋友. 这是一个基于 Alipayer 和 owt 开发并封装成 vue 组件的播放器.
vue 中使用 Alipayer,播放 webrtc,m3u8,mp4 视频
阿里云播放器在线演示
1.安装使用! 下载安装 npm 包
npm i vue-263-player --save
or
yarn add vue-263-player全局注册 main.js
import Vue263player from 'vue-263-player';
Vue.use(Vue263player);
//可选全局配置
//Vue.use(VueAliplayerV2,{
// cssLink: 'https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css',
// scriptSrc: 'https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js'
//});局部注册 App.vue
//推荐第一种(仅v1.2.3)及以上的版本可用
import Vue263player from 'vue-263-player';
components: {
Vue263player;
}
//或者
components: {
Vue263player: Vue263player.Player;
}2.组件中使用
组件模板使用,下面的视频连接仅供演示测试.
<template>
<div id="app">
<template>
<Vue263player
:source="source"
:audioSource="audioSource"
ref="VueAliplayerV2"
:options="options"
@micStatusChange="micStatusChange"
@audioStatusChange="audioStatusChange"
@baberrageStatusChange="baberrageStatusChange"
@error="playerError"
style="position: relative;"
>
<div class="Vue263playerSlot">用来显示其他内容，在播放器内</div>
</Vue263player>
</template>
<div class="player-btns">
<template v-if="show">
<span @click="changePlay('liveAV')">切换播放音视频</span>
<span @click="changePlay('liveA')">切换播放纯音频</span>
<span @click="changePlay('playBack')">切换播放回放</span>
<p></p>
<span @click="play()">播放</span>
<span @click="pause()">暂停</span>
<span @click="replay()">重播</span>
<span @click="lianmai()">连麦</span>
<span @click="addBarrage()">添加弹幕</span>
<span @click="disconnectMic()">下麦</span>
<span @click="getCurrentTime()">播放时刻</span>
<span @click="getStatus()">获取播放器状态</span>
<span @click="mute">静音</span>
<span @click="unmute">取消静音</span>
</template>
<span @click="show = !show">{{ show ? '销毁' : '重载' }}</span>
</div>
</div>
</template>
<script>
export default {
data() {
return {
options: {
isLive: !false, //切换为直播流的时候必填
autoplay: true,
rePlay: false,
playsinline: true,
preload: true,
controlBarVisibility: 'hover',
useH5Prism: true,
mediaType: 'video',
},
roomOptions: {
themeColor: '#2081eb', // 主题色 默认: '#2081eb'
bgUrl: '', //播放器背景url
},
source: JSON.stringify({
LD: 'http://119.61.7.138:10002/live/test0_customud.m3u8',
SD: '//ivi.bupt.edu.cn/hls/cctv1.m3u8',
}),
audioVideosource: JSON.stringify({
LD: 'http://119.61.7.138:10002/live/test0_customud.m3u8',
SD: '//ivi.bupt.edu.cn/hls/cctv1.m3u8',
}),
audioSource: 'http://119.61.7.138:10002/audio/test0_customud.m3u8',
playBackSource: JSON.stringify({
LD: 'http://player.alicdn.com/video/1.mp4',
SD: 'http://player.alicdn.com/video/1.mp4',
}),
// source: '//ivi.bupt.edu.cn/hls/cctv1.m3u8',
//http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8
show: true,
curPlayerStatus: 'liveAV',
};
},
methods: {
// liveAV liveA playBack
changePlay(status) {
if (status == 'liveAV') {
this.source = this.audioVideosource;
this.options.isLive = true;
this.options.mediaType = 'video';
} else if (status == 'liveA') {
this.source = this.audioSource;
this.options.isLive = true;
this.options.mediaType = 'audio';
} else {
this.source = this.playBackSource;
this.options.isLive = false;
this.options.mediaType = 'video';
}
},
play() {
this.$refs.VueAliplayerV2.play();
},
pause() {
this.$refs.VueAliplayerV2.pause();
},
lianmai() {
this.$refs.VueAliplayerV2.connectMic({
roomId: '4151738257',
userName: 'dyy3',
});
},
replay() {
this.$refs.VueAliplayerV2.replay();
},
getCurrentTime() {
this.$refs.VueAliplayerV2.getCurrentTime();
},
getStatus() {
const status = this.$refs.VueAliplayerV2.getStatus();
console.log(`getStatus:`, status);
},
mute() {
this.$refs.VueAliplayerV2.mute();
},
unmute() {
this.$refs.VueAliplayerV2.unMute();
},
// 连麦状态发生改变触发
//连麦状态： 0->未连麦 1->正在连麦中 2->已连麦 3->被下麦 4->主动下麦成功 5->连麦失败
micStatusChange(micStatus) {
console.log(micStatus);
},
// 连麦麦克风状态发生改变：例如被主持人静音/解除静音
// audioStatus "inactive" or "active" 静音/解除静音
audioStatusChange(audioStatus) {
console.log(audioStatus);
},
// 主动下麦
disconnectMic() {
this.$refs.VueAliplayerV2.disconnectMic();
},
/***
* 直播模式添加弹幕
*/
addBarrage() {
this.$refs.VueAliplayerV2.addBarrage();
},
/***
*
* 弹幕开关状态发生改变
*/
baberrageStatusChange(value) {
console.log(value);
},
/***
* 播放错误
*/
playerError(err) {
console.log(err);
},
},
};
</script>
<style lang="less">
* {
margin: 0;
padding: 0;
}
.remove-text {
text-align: center;
padding: 20px;
font-size: 24px;
}
.Vue263playerSlot {
position: absolute;
z-index: 1111111;
color: red;
}
.show-multiple {
display: flex;
.multiple-player {
width: calc(100% / 4);
margin: 20px;
}
}
.player-btns {
width: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
span {
margin: 0 auto;
display: inline-block;
padding: 5px 10px;
width: 150px;
height: 40px;
line-height: 40px;
border: 1px solid #eee;
background: #e1e1e1;
border-radius: 10px;
text-align: center;
margin: 5px;
cursor: pointer;
}
}
.source-box {
padding: 5px 10px;
margin-bottom: 10px;
.source-label {
margin-right: 20px;
font-size: 16px;
display: block;
}
#source {
margin-top: 10px;
}
.source-input {
margin-top: 10px;
padding: 5px 10px;
width: 80%;
border: 1px solid #ccc;
}
}
</style>3.1 配置项 options 属性
可以参考 属性和接口说明
| 名称 | 类型 | 说明 | | :----------------------- | :-----------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | source | String | 视频播放地址 url：单独 url。默认状态，表示使用 vid+playauth。source 播放方式优先级最高。source 支持多清晰度设置：source:’{“HD”:”address1”,”SD”:”address2”’，详情参见多清晰度播放。 | | vid | String | 媒体转码服务的媒体 Id。 | | playauth | String | 播放权证，如何得到参见获取 playauth。 | | height | String | 播放器高度，可形如‘100%’或者‘100px’,chrome 浏览器下 flash 播放器分别不能小于 397x297。 | | width | String | 播放器宽度，可形如‘100%’或者‘100px’,chrome 浏览器下 flash 播放器分别不能小于 397x297。 | | videoWidth | String | 视频宽度，仅 h5 支持。详情参见旋转和镜像。 | | videoHeight | String | 视频高度，仅 h5 支持。详情参见旋转和镜像。 | | preload | Boolean | 播放器自动加载，目前仅 h5 可用。 | | cover | String | 播放器默认封面图片，请填写正确的图片 url 地址。需要 autoplay 为’false’时，才生效。Flash 播放器封面也需要开启允许跨域访问。 | | isLive | Boolean | 播放内容是否为直播，直播时会禁止用户拖动进度条。 | | autoplay | Boolean | 播放器是否自动播放，在移动端 autoplay 属性会失效。Safari11 不会自动开启自动播放如何开启。 | | rePlay | Boolean | 播放器自动循环播放。 | | useH5Prism | Boolean | 指定使用 H5 播放器。 | | useFlashPrism | Boolean | 指定使用 Flash 播放器。 | | playsinline | Boolean | H5 是否内置播放，有的 Android 浏览器不起作用。 | | showBuffer | Boolean | 显示播放时缓冲图标，默认 true。 | | skinRes | Url | 说明：皮肤图片，不建议随意修改该字段，如要修改，请参照皮肤定制。 | | skinLayout | Array Boolean | 说明：功能组件布局配置，不传该字段使用默认布局。传 false 隐藏所有功能组件，请参照皮肤定制。 | | controlBarVisibility | String | 控制面板的实现，默认为‘hover’。可选的值为：‘click’、‘hover’、‘always’。 | | showBarTime | String | 控制栏自动隐藏时间（ms）。 | | extraInfo | String | 说明：JSON 串用于定制性接口参数。 | | > | > | 1.“fullTitle”：“测试页面”全屏时显示视频标题（仅 flash 支持）。 | | > | > | 2. “m3u8BufferLength”：“30”播放 m3u8 时加载缓存 ts 文件长度单位（秒）（仅 flash 支持）。 | | > | > | 3. “liveStartTime”：“2016/08/17 12:00:00”,直播开始时间，用于提示直播未开始(仅 flash 支持)。 | | > | > | 4. “liveOverTime”：“2016/08/17 14:00:00”,直播结束时间，用于提示直播结束（仅 flash 支持）。 | | enableSystemMenu | Boolean | 是否允许系统右键菜单显示，默认为 false。 | | format | String | 指定播放地址格式，只有使用 vid 的播放方式时支持,可选值为’mp4’、’m3u8’、’flv’、’mp3’，默认为空，仅 H5 支持。 | | mediaType | String | 指定返回音频还是视频，只有使用 vid 的播放方式时支持。可选值为’video’和’audio’，默认为’video’,‘audio’主要是针对只包含音频的视频格式，比如音频的 mp4，仅 H5 支持。 | | qualitySort | String | 指定排序方式，只有使用 vid + plauth 播放方式时支持。‘desc’表示按倒序排序（即：从大到小排序）,‘asc’表示按正序排序（即：从小到大排序）,默认值：‘asc’，仅 H5 支持。 | | definition | String | 显示视频清晰度，多个用逗号分隔，比如：’FD,LD’，此值是 vid 对应流清晰度的一个子集，取值范围：FD（流畅）LD（标清）SD（高清）HD（超清）OD（原画）2K（2K）4K（4K），仅 H5 支持。 | | defaultDefinition | String | 默认视频清晰度，此值是 vid 对应流的一个清晰度，取值范围：FD（流畅）LD（标清）SD（高清）HD（超清）OD（原画）2K（2K）4K（4K）,仅 H5 支持。 | | x5_type | String | 声明启用同层 H5 播放器，启用时设置的值为‘h5’,详情参见同层播放。 | | x5_fullscreen | Boolean | 声明视频播放时是否进入到 TBS 的全屏模式，默认为 false。当需要把视频做为背景时，设置为 true,详情参见同层播放。 | | x5_video_position | String | 声明视频播在界面上的位置，默认为“center”。可选值为：“top”，“center”,详情参见同层播放。 | | x5_orientation | String | 声明 TBS 播放器支持的方向，可选值：landscape：横屏,portraint：竖屏,详情参见同层播放。 | | x5LandscapeAsFullScreen | String | 声明 TBS 全屏播放是否横屏，默认值为 true。 | | autoPlayDelay | Number | 延迟播放时间，单位为秒。详情参见延迟播放 | | autoPlayDelayDisplayText | String | 延迟播放提示文本，详情参见延迟播放。 | | language | String | 国际化，默认为‘zh-cn’。如果未设置，则采用浏览器语言。可选值为‘zh-cn’、‘en-us’或其它值。 | | languageTexts | JSON | 自定义国际化文本 json 结构，key 的值需要和 language 属性值对应起来。例子：{jp:{Play:”Play”}},自定义值参见 Json 结构。 | | snapshot | Boolean | flash 启用截图功能。 | | snapshotWatermark | Object | H5 设置截图水印。 | | useHlsPluginForSafari | Boolean | Safari 浏览器可以启用 Hls 插件播放，Safari 11 除外。 | | enableStashBufferForFlv | Boolean | H5 播放 flv 时，设置是否启用播放缓存，只在直播下起作用。 | | stashInitialSizeForFlv | Number | H5 播放 flv 时，初始缓存大小，只在直播下起作用。 | | loadDataTimeout | Number | 缓冲多长时间后，提示用户切换低清晰度，默认：20 秒。 | | waitingTimeout | Number | 最大缓冲超时时间，超过这个时间会有错误提示，默认：60 秒。 | | liveStartTime | String | 直播开始时间，直播时移功能使用，格式为：“2018/01/04 12:00:00”。 | | liveOverTime | String | 直播结束时间，直播时移功能使用，格式为：“2018/01/04 12:00:00”。 | | liveTimeShiftUrl | String | 直播可用时移查询地址，详情参见直播时移。 | | liveShiftSource | String | flv 直播地址播放时，hls 的流地址，详情参见直播时移。 | | recreatePlayer | Function | flv 直播和 hls 时移切换是，重新创建播放器方法，详情参见直播时移。 | | diagnosisButtonVisible | Boolean | 是否显示检测按钮，默认为 true。 | | disableSeek | Boolean | 禁用进度条的 Seek，默认为 false，仅 Flash 支持。 | | encryptType | int | 加密类型，播放点播私有加密视频时，设置值为 1，默认值为 0。 | | progressMarkers | Array | 进度条打点内容数组，详情参见进度条打点。 | | vodRetry | int | 点播失败重试次数，默认 3 次 | | liveRetry | int | 直播播放失败重试次数，默认 5 次 |
3.2 播放器方法
// 暂停播放
this.$refs.VueAliplayerV2.pause();可以参考 阿里云播放器接口方法
| 名称 | 参数 | 说明 | | :--------------------- | :------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | play | - | 播放视频。 | | pause | - | 暂停视频。 | | replay | - | 重播视频。 | | seek | time | 跳转到某个时刻进行播放，time 的单位为秒。 | | getCurrentTime | - | 获取当前的播放时刻，返回的单位为秒。 | | getDuration | - | 获取视频总时长，返回的单位为秒，这个需要在视频加载完成以后才可以获取到，可以在 play 事件后获取。 | | getVolume | - | 获取当前的音量，返回值为 0-1 的实数。ios 和部分 android 会失效。 | | setVolume | - | 设置音量，vol 为 0-1 的实数，ios 和部分 android 会失效。 | | loadByUrl | url，time | 直接播放视频 url，time 为可选值（单位秒）。目前只支持同种格式（mp4/flv/m3u8）之间切换。暂不支持直播 rtmp 流切换。 | | replayByVidAndPlayAuth | vid：视频 id,playauth：播放凭证 | 目前只支持 H5 播放器。暂不支持不同格式视频间的之间切换。暂不支持直播 rtmp 流切换。 | | replayByVidAndAuthInfo | 仅 MPS 用户时使用,参数顺序为：vid、accId、accSecret、stsToken、authInfo、domainRegion | 目前只支持 H5 播放器。暂不支持不同格式视频间的之间切换。暂不支持直播 rtmp 流切换。 | | setPlayerSize | w，h | 设置播放器大小 w，h 可分别为 400px 像素或 60%百分比。chrome 浏览器下 flash 播放器分别不能小于 397x297。 | | setSpeed | speed | 手动设置播放的倍速，倍速播放仅 H5 支持。移动端可能会失效，比如 android 微信。倍速播放 UI 默认是开启的。如果自定义过 skinLaout 属性，需要添加 speedButton 项到数组里： | | > | > | {name：“speedButton”，align：“tr”，x：10，y：23} | | setSanpshotProperties | width：宽度,height：高度,rate：截图质量 | 设置截图参数。 | | requestFullScreen | - | 播放器全屏，仅 H5 支持。 | | cancelFullScreen | - | 播放器退出全屏，iOS 调用无效，仅 H5 支持。 | | getIsFullScreen | - | 获取播放器全屏状态，仅 H5 支持。 | | getStatus | - | 获取播放器状态，包含的值：‘init’,‘ready’,‘loading’,‘play’,‘pause’,‘playing’,‘waiting’,‘error’,‘ended’ | | setLiveTimeRange | 开始时间,结束时间 | 设置直播的开始结束时间，开启直播时移功能时使用。例子：player.liveShiftSerivce.setLiveTimeRange(“”，‘2018/01/04 20:00:00’) | | setRotate | rotate 旋转角度 | 参数为旋转角度， 正数为正时针旋转， 负数为逆时针旋转。例如: setRotate(90)。详情参见旋转和镜像。 | | getRotate | - | 获取旋转角度。详情参见旋转和镜像。 | | setImage | image：镜像类型,可选值为：horizon,vertical | 设置镜像，例如: setImage(‘horizon’)。详情参见旋转和镜像。 | | dispose | - | 播放器销毁 | | setCover | cover 封面地址 | 设置封面 | | setProgressMarkers | markers 打点数据集合 | 设置打点数据 | | setPreviewTime | time 试看时间 | 设置试看时间，单位为秒，详情参见试看 | | getPreviewTime | - | 获取试看时间 | | isPreview | - | 是否试看 | | off | ev:事件名[String],handle,事件回调方法[Function] | 通过播放器实例的 off 方法取消绑定的方法 |
[自定义播放器接口方法] | 名称 | 参数 | 说明 | | connectMic | roomId,userName | 推送、接收 RTC 流 | | disconnectMic | BarrageContent | 取消推送、取消接收 RTC 流 | | addBarrage | roomId,userName | 添加弹幕 | | mute | | 静音 | | unMute | | 解除静音 |
4.播放器事件
<template>
<vue-aliplayer-v2 @ready="handleReady" />
</template>
<script>
export default {
methods: {
/**
* 播放器事件回调
*/
handleReady(e) {
console.log(`ready`, e);
},
},
};
</script>可以参考 播放器事件
| 名称 | 说明 | | :---------------- | :--------------------------------------------------------------------------------------------------------------------------------------- | | ready | 播放器视频初始化按钮渲染完毕。播放器 UI 初始设置需要此事件后触发，避免 UI 被初始化所覆盖。播放器提供的方法需要在此事件发生后才可以调用。 | | play | 视频由暂停恢复为播放时触发。 | | pause | 视频暂停时触发。 | | canplay | 能够开始播放音频/视频时发生，会多次触发，仅 H5 播放器。 | | playing | 播放中，会触发多次。 | | ended | 当前视频播放完毕时触发。 | | liveStreamStop | 直播流中断时触发。m3u8/flv/rtmp 在重试 5 次未成功后触发。提示上层流中断或需要重新加载视频。PS：m3u8 一直自动重试，不需要上层添加重试。 | | onM3u8Retry | m3u8 直播流中断后重试事件，每次断流只触发一次。 | | hideBar | 控制栏自动隐藏事件。 | | showBar | 控制栏自动显示事件。 | | waiting | 数据缓冲事件。 | | timeupdate | 播放位置发生改变时触发，仅 H5 播放器。可通过 getCurrentTime 方法，得到当前播放时间。 | | snapshoted | 截图完成事件。 | | requestFullScreen | 全屏事件，仅 H5 支持。 | | cancelFullScreen | 取消全屏事件，iOS 下不会触发，仅 H5 支持。 | | error | 错误事件。 | | startSeek | 开始拖拽，参数返回拖拽点的时间。 | | completeSeek | 完成拖拽，参数返回拖拽点的时间。 |
[自定义播放器事件] | 名称 | 说明 | | :- | :- | | micStatusChange | 连麦状态发送改变 连麦状态： 0->未连麦 1->正在连麦中 2->已连麦 3->被下麦 4->主动下麦成功 5->连麦失败 | | audioStatusChange | 麦克风状态发生改变 inactive/acitve，连麦状态触发 | | baberrageStatusChange | 弹幕开关状态发生改变 true/false |
5.缺陷 & 后期计划
2021 年 2 月 22 日 更新优化局部引用方式
您有功能建议,或者 bug 反馈请留言.
6.感谢
vue-263-player 的作者,项目地址:https://github.com/duanyuanyuan123/vue-263-player
Alipayer 阿里云的开源播放器 https://help.aliyun.com/document_detail/125572.html?spm=a2c4g.11186623.6.1085.36fc6fc57WKZ5P#h2-u64ADu653Eu5668u4E8Bu4EF63
Customize configuration
更新日志
v1.1.0 修复部分已知 bug v1.1.1 修复部分已知 bug v1.1.2 修复部分已知 bug