1.1.3 • Published 2 years ago
xlink-player v1.1.3
xlink-player
介绍 Introduction
此播放器为Vue2播放器组件，不支持Vue3
仅支持H264视频，暂不支持H265.
- 支持HTTP-FLV/WS-FLV播放
- 支持m3u8/HLS/MP4播放
- 支持直播
- 支持全屏或比例显示
属性 Property
| 属性名 | 含义 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| url | 视频流播放地址 | String | '' | '' |
| playerId | 播放器Id | String | 'xlinkPlayer' | '' |
| isAlive | 是否直播 | Boolean | true | true/false |
| loadingMsg | 加载中的文案 | String | '' | '' |
| stretching | 视频画面显示比例 | String | 'uniform' | 'uniform'/'exactfit'/'fill' |
| controls | 设置播放器控制条的显示模式 | String | 'over' | 'none'/'over' |
| isLoop | 是否循环播放 | Boolean | false | true/false |
stretching 可选项含义
- uniform:添加黑边缩放；(默认方式为uniform)
- exactfit:改变宽高比缩到最大
- fill:剪切并缩放到最大
controls 可选项含义
- over:悬浮（鼠标无操作时自动隐藏）(默认)
- none:不显示
方法 Methods
安装使用 Install
安装
npm install xlink-player使用
<template>
<div class="player-main">
<XlinkPlayer :url="url" :loadingMsg="message" />
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { XlinkPlayer } from 'xlink-player'
@Component({
components: {
XlinkPlayer,
},
})
export default class XLinkPlayer extends Vue {
@Prop()
url!: string
@Prop({
type: String,
default: '',
})
message!: string
}
</script>