H5 player based on Vue3.2
一、用法(Usage)
1、全局引入(use global import)
// main.ts
import { Player } from 'vvms';
import 'vvms/dist/style.css';
createApp(App).component('h5-player', Player).mount('#app');
// App.vue
<h5-player></h5-player>
2、按需引入(use manually import)
// App.vue
<template>
<Player></Player>
</template>
<script setup lang="ts">
import { Player } from 'vvms';
import 'vvms/dist/style.css';
</script>
二、API
1、props
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
autoplay | 自动播放 | boolean | true |
data | 播放数据源 | MediaData | - |
uriParser | uri解析器 | UriParser | useDefaultUriParser |
2、events
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
end | 播放结束 | () => void | - |
3、default uri parser
const useDefaultUriParser: UriParser<string> = async (definition) => {
if (typeof definition.uri === 'string') {
definition.url = definition.uri;
return new Promise(
(resolve) => {
resolve(
{
state: 'success',
message: '',
definition: definition
}
);
}
);
}
else {
return new Promise(
(resolve) => {
resolve(
{
state: 'error',
message: 'uri不是一个有效的url字符串,请额外提供uri parser函数将uri解析成url',
definition: definition
}
);
}
);
}
}
4、data type
MediaData
/**
* 媒体数据
*/
interface MediaData {
/**
* 时长(毫秒)
*/
duration?: number;
/**
* 播放服务
*
* @default Service.VOD
*
* @example
* Service.VOD // 'vod'
* Service.LIVE // 'live'
*/
service: Service;
/**
* 媒体协议
*
* @default Protocol.HTTP_MP4
*
* @example
* Protocol.HTTP_MP4 // 'http-mp4'
* Protocol.HTTP_FLV // 'http-flv'
* Protocol.HLS // 'hls'
*/
protocol: Protocol;
/**
* 清晰度列表,若无设置,将默认选择第一个
*/
definitions: Definition[];
}
UriType
type UriType = string | number | object;
Definition
/**
* 清晰度(泛型T指示uri类型)
*/
interface Definition<T extends UriType = UriType> {
/**
* 清晰度唯一标识
*/
id: string;
/**
* 清晰度标签
* @example
* '720p'
* '1080p'
* '高清'
* '标清'
*/
label: string;
/**
* 资源标识,当该uri就是可直接访问的资源url时,无需提供额外的解析器
*/
// uri: object | string | number;
uri: T;
/**
* 经解析器处理uri后的资源地址
*/
url?: string;
/**
* 是当前播放的清晰度
*
* @default false
*/
selected?: boolean;
}
UriParser
type UriParser<T extends UriType = UriType> = (definition: Definition<T>) => Promise<UriParserReturnType>
UriParserReturnType
/**
* uri解析器返回类型
*/
interface UriParserReturnType {
state: 'success' | 'error';
/**
* 当 state == 'error'时显示的信息
*/
message: string;
definition: Definition;
}
三、示例(demo)
<template>
<Player :autoplay="state.autoplay" :data="state.data" :uriParser="useCustomizedUriParser">
</Player>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import {
Player,
MediaData,
Service,
Protocol,
UriParser,
UriParserReturnType
} from 'vvms';
import 'vvms/dist/style.css';
interface VueState {
autoplay: boolean;
data: MediaData;
}
const state = reactive<VueState>(
{
autoplay: true,
data: {
duration: 46000,
service: Service.VOD,
protocol: Protocol.HTTP_MP4,
definitions: [
{
"id": "270bba2e-e297-49fe-8451-be39b0e9991c",
"label": "高清1080p",
"uri": {
"assetId": "7898af71-5901-defa-5325-1072484c2060",
"resolution": 268435458
}
},
{
"id": "def2cb9f-e382-4d21-a51f-098bee92811e",
"label": "高清720P",
"uri": {
"assetId": "7898af71-5901-defa-5325-1072484c2060",
"resolution": 268435460
}
}
]
}
}
);
const useCustomizedUriParser: UriParser<string> = async (definition) => {
// 定制的uri-parser,将uri解析成可用的url
if (definition.uri) {
definition.url = 'http://localhost/1.mp4';
}
return new Promise<UriParserReturnType>(
(resolve) => {
resolve(
{
state: 'success',
message: '',
definition: definition
}
);
}
);
}
</script>
1.3.7
1 year ago
1.3.6
2 years ago
1.3.5
2 years ago
1.3.4
2 years ago
1.3.3
2 years ago
1.3.2
2 years ago
1.3.1
2 years ago
1.2.19
2 years ago
1.2.18
2 years ago
1.2.17
2 years ago
1.2.16
2 years ago
1.2.15
2 years ago
1.2.14
2 years ago
1.2.13
2 years ago
1.2.12
2 years ago
1.2.11
2 years ago
1.2.10
2 years ago
1.2.9
2 years ago
1.2.8
2 years ago
1.2.7
2 years ago
1.2.6
2 years ago
1.2.4
2 years ago
1.2.3
2 years ago
1.2.2
2 years ago
1.2.1
2 years ago
1.2.0
2 years ago
1.1.9
2 years ago
1.1.8
2 years ago
1.1.7
2 years ago
1.1.6
2 years ago
1.1.4
2 years ago
1.1.3
2 years ago
1.1.2
2 years ago
1.1.1
2 years ago
1.1.0
2 years ago
1.0.9
2 years ago
1.0.8
2 years ago
1.0.7
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago
0.9.0
2 years ago
0.8.0
2 years ago
0.7.0
2 years ago
0.6.0
2 years ago
0.5.0
2 years ago
0.4.0
2 years ago
0.3.0
2 years ago
0.2.0
2 years ago
0.1.0
2 years ago