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 可选项含义

1. uniform:添加黑边缩放；(默认方式为uniform)
2. exactfit:改变宽高比缩到最大
3. fill:剪切并缩放到最大

controls 可选项含义

1. over:悬浮（鼠标无操作时自动隐藏）(默认)
2. 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>