nexhome-hls-player

Project setup

yarn add nexhome-hls-player

usage

<template>
  <div id="app">
    <NexhomeHlsPlayer
      v-bind="videoProps"
      @on-ready="readyHandler"
      @on-error="errorHandler"
    />
  </div>
</template>

<script lang="ts">
  import Vue from 'vue'
  import NexhomeHlsPlayer from 'nexhome-hls-player'
  import 'nexhome-hls-player/hls-player.css'

  export default Vue.extend({
    name: 'App',
    components: {
      NexhomeHlsPlayer
    },
    data: () => ({
      source:
        'https://streamer-pull.wei-ju.com.cn/live/7e3aea55e15f4ef799b395c270b85bd7.m3u8?auth_key=1617073168-7476692d82c34d2aa39090ad56303c74-0-34184cc74e735bc10391cf3da1702d2c'
    }),
    computed: {
      videoProps() {
        return {
          url: this.source,
          live: true,
          maxRetries: 1,
          RENEW_URL_TIMEOUT: 60 * 1000, // 60 seconds timeout for renew url
          REBOOT_TIMEOUT: 10 * 1000, // 10 seconds timeout for reboot
          streamCode: 'streamCode-123',
          deviceId: 'deviceId-123',
          renewFunction: this.renewFunction,
          restartFunction: this.restartFunction
        }
      }
    },
    methods: {
      readyHandler(event: any) {
        console.log('ready handler', event)
      },
      errorHandler(error: any) {
        console.log('error handler', error)
      },
      async renewFunction(payload: any) {
        console.log('renew function', payload)
        return Promise.reject(new Error('xxx'))
      },
      async restartFunction(payload: any) {
        console.log('renew function', payload)
        return Promise.reject(new Error('xxx'))
      }
    }
  })
</script>

<style lang="scss">
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 640px;
    height: 360px;
    margin: 0 auto;
    margin-top: 10vh;
  }
</style>