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;
}