mirror of
https://github.com/langyuxiansheng/vue-aliplayer-v2.git
synced 2025-04-05 19:41:39 +08:00
更新默认SDK版本
This commit is contained in:
zhouliujun
parent
39bd7ad3b7
commit
5a0a49aacc
115
README.md
115
README.md
@ -1,12 +1,17 @@
|
||||
# vue-alipayer-v2
|
||||
|
||||
## 感谢每一位支持开源的朋友. 这是一个基于 Alipayer 开发并封装成 vue 组件的播放器.
|
||||
|
||||
### vue 中使用 Alipayer,播放 rtmp,m3u8,mp4 视频
|
||||
|
||||
#### [本项目在线演示](https://langyuxiansheng.github.io/vue-aliplayer-v2/)
|
||||
|
||||
#### [阿里云播放器在线演示](https://player.alicdn.com/aliplayer/index.html)
|
||||
|
||||
> 假如此轮子对你有帮助,请顺手star一下吧.o(*￣︶￣*)o
|
||||
> 假如此轮子对你有帮助,请顺手 star 一下吧.o(_￣︶￣_)o
|
||||
|
||||
## 1.安装使用! 下载安装 npm 包
|
||||
|
||||
```bash
|
||||
npm i vue-aliplayer-v2 --save
|
||||
or
|
||||
@ -16,7 +21,7 @@ yarn add vue-aliplayer-v2
|
||||
#### 全局注册 main.js
|
||||
|
||||
```javascript
|
||||
import VueAliplayerV2 from 'vue-aliplayer-v2';
|
||||
import VueAliplayerV2 from "vue-aliplayer-v2";
|
||||
|
||||
Vue.use(VueAliplayerV2);
|
||||
|
||||
@ -30,28 +35,41 @@ Vue.use(VueAliplayerV2);
|
||||
#### 局部注册 App.vue
|
||||
|
||||
```javascript
|
||||
|
||||
//推荐第一种(仅v1.2.3)及以上的版本可用
|
||||
import VueAliplayerV2 from 'vue-aliplayer-v2';
|
||||
components:{ VueAliplayerV2 }
|
||||
import VueAliplayerV2 from "vue-aliplayer-v2";
|
||||
components: {
|
||||
VueAliplayerV2;
|
||||
}
|
||||
|
||||
//或者
|
||||
components:{ VueAliplayerV2: VueAliplayerV2.Player }
|
||||
|
||||
components: {
|
||||
VueAliplayerV2: VueAliplayerV2.Player;
|
||||
}
|
||||
```
|
||||
|
||||
## 2.组件中使用
|
||||
|
||||
### 组件模板使用,下面的视频连接仅供演示测试.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div id="app">
|
||||
<template v-if="!isShowMultiple && show">
|
||||
<vue-aliplayer-v2 :source="source" ref="VueAliplayerV2" :options="options" />
|
||||
<vue-aliplayer-v2
|
||||
:source="source"
|
||||
ref="VueAliplayerV2"
|
||||
:options="options"
|
||||
/>
|
||||
</template>
|
||||
<div v-if="isShowMultiple && show" class="show-multiple">
|
||||
<template v-for="x in 5">
|
||||
<vue-aliplayer-v2 class="multiple-player" :key="x" :source="source" ref="VueAliplayerV2" :options="options" />
|
||||
<vue-aliplayer-v2
|
||||
class="multiple-player"
|
||||
:key="x"
|
||||
:source="source"
|
||||
ref="VueAliplayerV2"
|
||||
:options="options"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
<p class="remove-text" v-if="!show">播放器已销毁!</p>
|
||||
@ -64,21 +82,32 @@ components:{ VueAliplayerV2: VueAliplayerV2.Player }
|
||||
<span @click="getStatus()">获取播放器状态</span>
|
||||
</template>
|
||||
<span @click="show = !show">{{ show ? '销毁' : '重载' }}</span>
|
||||
<span @click="options.isLive = !options.isLive">{{ options.isLive ? '切换普通模式' : '切换直播模式' }}</span>
|
||||
<span @click="showMultiple()">{{isShowMultiple ? '显示1个播放器' : '显示多个播放器'}}</span>
|
||||
<span @click="options.isLive = !options.isLive"
|
||||
>{{ options.isLive ? '切换普通模式' : '切换直播模式' }}</span
|
||||
>
|
||||
<span @click="showMultiple()"
|
||||
>{{isShowMultiple ? '显示1个播放器' : '显示多个播放器'}}</span
|
||||
>
|
||||
</div>
|
||||
<div class="source-box">
|
||||
<span class="source-label">选择播放源(支持动态切换):</span>
|
||||
<select v-model="source" name="source" id="source">
|
||||
<option value="//player.alicdn.com/video/aliyunmedia.mp4">播放源1</option>
|
||||
<option value="//yunqivedio.alicdn.com/user-upload/nXPDX8AASx.mp4">播放源2</option>
|
||||
<option value="//tbm-auth.alicdn.com/e7qHgLdugbzzKh2eW0J/kXTgBkjvNXcERYxh2PA@@hd_hq.mp4?auth_key=1584519814-0-0-fc98b2738f331ff015f7bf5c62394888">播放源3</option>
|
||||
<option value="//player.alicdn.com/video/aliyunmedia.mp4"
|
||||
>播放源1</option
|
||||
>
|
||||
<option value="//yunqivedio.alicdn.com/user-upload/nXPDX8AASx.mp4"
|
||||
>播放源2</option
|
||||
>
|
||||
<option
|
||||
value="//tbm-auth.alicdn.com/e7qHgLdugbzzKh2eW0J/kXTgBkjvNXcERYxh2PA@@hd_hq.mp4?auth_key=1584519814-0-0-fc98b2738f331ff015f7bf5c62394888"
|
||||
>播放源3</option
|
||||
>
|
||||
<option value="//ivi.bupt.edu.cn/hls/cctv1.m3u8">直播播放源4</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="source-box">
|
||||
<span class="source-label">输入播放源(支持动态切换):</span>
|
||||
<input class="source-input" type="text" v-model="source">
|
||||
<input class="source-input" type="text" v-model="source" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -91,17 +120,16 @@ export default {
|
||||
isLive: true, //切换为直播流的时候必填
|
||||
// format: 'm3u8' //切换为直播流的时候必填
|
||||
},
|
||||
source: '//player.alicdn.com/video/aliyunmedia.mp4',
|
||||
source: "//player.alicdn.com/video/aliyunmedia.mp4",
|
||||
// source: '//ivi.bupt.edu.cn/hls/cctv1.m3u8',
|
||||
show: true,
|
||||
isShowMultiple: false
|
||||
}
|
||||
isShowMultiple: false,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
play() {
|
||||
this.$refs.VueAliplayerV2.play()
|
||||
this.$refs.VueAliplayerV2.play();
|
||||
},
|
||||
|
||||
pause() {
|
||||
@ -114,7 +142,7 @@ export default {
|
||||
|
||||
getCurrentTime() {
|
||||
// this.$refs.VueAliplayerV2.getCurrentTime();
|
||||
this.source = 'http://ivi.bupt.edu.cn/hls/cctv1.m3u8';
|
||||
this.source = "http://ivi.bupt.edu.cn/hls/cctv1.m3u8";
|
||||
},
|
||||
|
||||
getStatus() {
|
||||
@ -125,9 +153,9 @@ export default {
|
||||
|
||||
showMultiple() {
|
||||
this.isShowMultiple = !this.isShowMultiple;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
* {
|
||||
@ -185,8 +213,8 @@ export default {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
```
|
||||
|
||||
## 3.功能与配置
|
||||
|
||||
```javascript
|
||||
@ -206,20 +234,22 @@ props:{
|
||||
cssLink:{ //css版本源
|
||||
required: false,
|
||||
type: [String],
|
||||
default: `https://g.alicdn.com/de/prismplayer/2.9.0/skins/default/aliplayer-min.css`
|
||||
default: `https://g.alicdn.com/de/prismplayer/2.9.7/skins/default/aliplayer-min.css`
|
||||
},
|
||||
scriptSrc:{ //js版本源
|
||||
required: false,
|
||||
type: [String],
|
||||
default: `https://g.alicdn.com/de/prismplayer/2.9.0/aliplayer-min.js`
|
||||
default: `https://g.alicdn.com/de/prismplayer/2.9.7/aliplayer-min.js`
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 3.1 配置项 options 属性
|
||||
|
||||
可以参考 [属性和接口说明](https://help.aliyun.com/document_detail/125572.html?spm=a2c4g.11186623.6.1085.36fc6fc57WKZ5P)
|
||||
|
||||
| 名称 | 类型 | 说明 |
|
||||
| :- | :-: | :- |
|
||||
| :----------------------- | :-----------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| source | String | 视频播放地址 url：单独 url。默认状态，表示使用 vid+playauth。source 播放方式优先级最高。source 支持多清晰度设置：source:’{“HD”:”address1”,”SD”:”address2”’，详情参见多清晰度播放。 |
|
||||
| vid | String | 媒体转码服务的媒体 Id。 |
|
||||
| playauth | String | 播放权证，如何得到参见获取 playauth。 |
|
||||
@ -280,14 +310,16 @@ props:{
|
||||
| liveRetry | int | 直播播放失败重试次数，默认 5 次 |
|
||||
|
||||
### 3.2 播放器方法
|
||||
|
||||
```javascript
|
||||
// 暂停播放
|
||||
this.$refs.VueAliplayerV2.pause();
|
||||
```
|
||||
|
||||
可以参考 [播放器接口方法](https://help.aliyun.com/document_detail/125572.html?spm=a2c4g.11186623.6.1085.36fc6fc57WKZ5P#h2-u64ADu653Eu5668u63A5u53E32)
|
||||
|
||||
| 名称 | 参数 | 说明 |
|
||||
| :- | :- | :- |
|
||||
| :--------------------- | :------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| play | - | 播放视频。 |
|
||||
| pause | - | 暂停视频。 |
|
||||
| replay | - | 重播视频。 |
|
||||
@ -333,15 +365,16 @@ export default {
|
||||
*/
|
||||
handleReady(e) {
|
||||
console.log(`ready`, e);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
可以参考 [播放器事件](https://help.aliyun.com/document_detail/125572.html?spm=a2c4g.11186623.6.1085.36fc6fc57WKZ5P#h2-u64ADu653Eu5668u4E8Bu4EF63)
|
||||
|
||||
| 名称 | 说明 |
|
||||
| :- | :- |
|
||||
| :---------------- | :--------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| ready | 播放器视频初始化按钮渲染完毕。播放器 UI 初始设置需要此事件后触发，避免 UI 被初始化所覆盖。播放器提供的方法需要在此事件发生后才可以调用。 |
|
||||
| play | 视频由暂停恢复为播放时触发。 |
|
||||
| pause | 视频暂停时触发。 |
|
||||
@ -362,10 +395,12 @@ export default {
|
||||
| completeSeek | 完成拖拽，参数返回拖拽点的时间。 |
|
||||
|
||||
---
|
||||
|
||||
## 5. 图片展示
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
## 6.二次开发 下载项目
|
||||
@ -375,6 +410,7 @@ git clone https://github.com/langyuxiansheng/vue-aliplayer-v2.git
|
||||
```
|
||||
|
||||
## Project setup
|
||||
|
||||
```bash
|
||||
cd vue-aliplayer-v2
|
||||
|
||||
@ -382,36 +418,48 @@ npm install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Lints and fixes files
|
||||
|
||||
```bash
|
||||
npm run lint
|
||||
```
|
||||
|
||||
## 7.缺陷 & 后期计划
|
||||
|
||||
> 2019 年 12 月 27 日 更新优化局部引用方式
|
||||
|
||||
> 您有功能建议,或者 bug 反馈请留言.
|
||||
|
||||
## 8.感谢
|
||||
|
||||
---
|
||||
|
||||
- vue-aliplayer 的作者,项目地址:https://github.com/slacrey/vue-aliplayer
|
||||
|
||||
- Alipayer 阿里云的开源播放器 https://help.aliyun.com/document_detail/125572.html?spm=a2c4g.11186623.6.1085.36fc6fc57WKZ5P#h2-u64ADu653Eu5668u4E8Bu4EF63
|
||||
|
||||
### Customize configuration
|
||||
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
|
||||
## 更新日志
|
||||
|
||||
> v1.3.0
|
||||
|
||||
- sdk 版本更新,默认 SDK 版本由 2.9.3 更新为 2.9.7
|
||||
- 默认注释更新
|
||||
|
||||
> v1.2.9 修正部分默认属性, 感谢"Schean17"网友的反馈与建议.
|
||||
|
||||
> v1.2.8 更换底层默认 sdk 版本为 2.9.3 修复 options 遇到 update loop 错误 感谢"litmonw"网友的反馈与建议.
|
||||
@ -441,6 +489,7 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
> v1.1.6 修复部分已知 bug 和优化局部的引用方式
|
||||
|
||||
---
|
||||
|
||||
## 其它问题
|
||||
|
||||
1. IOS 或者其它设备无法全屏播放,或者点击全屏按钮的时候也只是显示竖屏？
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vue-aliplayer-v2",
|
||||
"version": "1.2.9",
|
||||
"version": "1.3.0",
|
||||
"author": "yxs",
|
||||
"description": "感谢每一位支持开源的朋友. 这是一个基于Alipayer 开发并封装成vue组件的集成播放器.可播放rtmp,m3u8,mp4....视频.除支持直播流与点播的基础功能外,也支持视频的加密播放、清晰度切换、直播时移等业务场景",
|
||||
"main": "lib/vue-aliplayer-v2.umd.min.js",
|
||||
|
||||
@ -18,12 +18,12 @@ export default {
|
||||
cssLink:{ //css版本源
|
||||
required: false,
|
||||
type: [String],
|
||||
default: `https://g.alicdn.com/de/prismplayer/2.9.3/skins/default/aliplayer-min.css`
|
||||
default: `https://g.alicdn.com/de/prismplayer/2.9.7/skins/default/aliplayer-min.css`
|
||||
},
|
||||
scriptSrc:{ //js版本源
|
||||
required: false,
|
||||
type: [String],
|
||||
default: `https://g.alicdn.com/de/prismplayer/2.9.3/aliplayer-min.js`
|
||||
default: `https://g.alicdn.com/de/prismplayer/2.9.7/aliplayer-min.js`
|
||||
}
|
||||
},
|
||||
data () {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user