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>