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>