LHWPlayer

این پکیج برای پخش Live Streaming و VOD است. هدف این پکیج ایجاد یک پلیر قدرتمند در صفحات و کامپوننت‌های شما به راحت‌ترین شکل ممکن و با کمترین میزان کد نویسی است.

نحوه استفاده

مرحله اول

لینک‌های زیر را در داخل تک head صفحه HTML خود قرار دهید.

<link
  href="https://assets.lhwsaas.com/player/1.0.0/lhw-player.min.css"
  rel="stylesheet"
/>
<script src="https://assets.lhwsaas.com/player/1.0.0/lhw-player.min.js"></script>

یا با استفاده از npm اقدام به نصب lhw-player نمایید.

npm install lhw-player

پس از نصب، تابع‌های setupPlayer، getStatistics و استایل پلیر را import کنید.

import {
  setupPlayer,
  getStatistics,
} from "lhw-player/dist/lhw-player.esm.min.js";
import "lhw-player/dist/lhw-player.min.css";

مرحله دوم

در صفحه HTML یا کامپوننت خود یک تگ video با id دلخواه ایجاد کنید.

<video id="player"></video>

مرحله سوم

پیکربندی

| Prop | Type | Default | Required | Description | | -------------- | -------- | ------------------ | -------- | ----------------------------------------------------------------------------------------------------------------------------------- | | videoElementId | string | | true | id تگ video در HTML | | status | string | | true | وضعیت پخش که باید یکی از موارد online, offline یا countdown باشد | | socket_url | string | | true | لینک socket ارائه شده برای محاسبه آمار | | m3u8 | string | | false | لینک stream ویدیو | | poster | string | | false | لینک poster ویدیو (این تصویر قبل از شروع پخش استریم نمایش داده می‌شود.) بهترین سایز 1920 در 1080 پیکسل است. | | offline_cover | string | https://storage... | false | لینک یک تصویر برای نمایش در وضعیت offline پلیر. بهترین سایز 1920 در 1080 پیکسل است. | | stream_id | string | | false | شناسه stream در حال پخش است. اگر وضعیت استریم online باشد، برای محاسبه آمار این مقدار اجباری است. | | start_at | DateTime | | false | در صورتی که وضعیت پخش countdown باشد، این فیلد اجباری است. زمان باقیمانده تا پخش استریم به صورت شماره معکوس نمایش داده می‌شود. |

نمونه پیکربندی

<script>
  const config = {
    videoElementId: "player",
    socket_url: "wss://lhwsaas.com",
    stream_id: "17247",
    m3u8: "https://xxx.lhwsaas.com/17247/master.m3u8",
    poster:
      "https://xxx.lhwsaas.com/17247/thumbnail-source.jpg",
    offline_cover:
      "https://assets.livito.tv/covers/no_cover.png",
    status: "online",
    start_at: null,
  };
</script>

مرحله چهارم

فراخوانی متد ()setupPlayer.

<script>
  window.addEventListener("load", () => {
    lhwplayer.setupPlayer(config);
  });
</script>

آمار

برای آمار بازدیدکنندگان نیز کافیست متد ()getStatistics را فراخوانی کنید. این متد یک Object از نوع IStatistics برمی‌گرداند.

<script>
  const statistics = lhwplayer.getStatistics();
</script>

interface IStatistics {
  total: number;
  active: number;
  login: number;
  guests: number;
}