پلیر تحت وب اسپات پلیر از نظر ظاهری مشابه نسخه های دیگر بوده و استفاده از آن تفاوت چندانی ندارد اما با توجه به محدودیت های محیط وب نسبت به نیتیو مسائلی در این نسخه وجود دارند که باید به آن توجه داشته باشید.

اسپات پلیر تحت وب از المان ویدیو HTML5 استفاده نمیکند و خود کاملا عملیات دیکود و پخش ویدیو را انجام میدهد بنابرین با توجه به سرعت پایینتر جاوا اسکریپت نسبت به کدهای نیتیو باید توجه داشته باشید این نسخه برای ویدیوهای آموزشی که حرکت کمی دارند مناسب میباشد و ویدیوها با موشن بالا در دستگاه های قدیمی به خوبی پخش نمیشوند. همچنین بهتر است نسخه کم حجم فایل ها نیز موجود باشد.

از آنجایی که در مرورگرها امکانی برای فینگرپرینت کردن دستگاه مانند دسترسی به سریال هارد و مادربرد وجود ندارد، این نسخه به منظور ایجاد محدودیت تعداد دستگاه از کوکی استفاده می کند، بنابرین کاربران باید توجه داشته باشند که ریست کردن اطلاعات مرورگر باعث حذف لایسنس خواهد شد.

نسخه وب در آیفون از سافاری نسخه 12.4 به بعد و در بقیه سیستم عامل ها فقط از آخرین نسخه کروم پشتیبانی میکند. همچنین در آیفون یا آپید به علت عدم وجود WakeLock API در سافاری امکان روشن نگه داشتن صفحه نمایشگر وجود ندارد و کاربر باید به صورت دستی زمان خاموش شدن صفحه را افزایش دهد. توجه باشید در iOS مرورگرهای دیگر مانند کروم هم به اجبار اپل از موتور نمایش سافاری استفاده میکنند و تفاوتی در این امر ایجاد نمیکند.

در صورتی که برای افزایش رتبه الکسای سایت خود میخواهید از پلیر وب استفاده کنید پیشنهاد میشود به جای قرار دادن در سایت خود از نسخه ریبرندینگ با دامنه خود استفاده کنید که امکان نصب و استفاده آفلاین به صورت PWA را هم فراهم میکند.

سمت سرور

برای قرار دادن اسپات پلیر در سایت اولین مرحله همگام‌سازی کوکی (با نام X) مرورگر کاربر با سرور اسپات پلیر است که می‌بایست در کدهای سمت سرور سایت شما انجام شود.

به این منظور لازم است در یک آدرس از سایت مانند http://localhost/spotx مقدار قبلی کوکی X را به سرور اسپات پلیر ارسال و مقدار دریافتی جدید را به مرورگر کاربر ارسال نمایید.

کد php که برای این منظور میتوانید استفاده کنید:

if ((microtime(true) * 1000) > hexdec(substr($X = $_COOKIE['X'], 24, 12))) {
	$ch = curl_init();
	curl_setopt_array($ch, [
		CURLOPT_HEADER => true,
		CURLOPT_NOBODY => true,
		CURLOPT_RETURNTRANSFER => true,
		CURLOPT_URL => 'https://app.spotplayer.ir/',
		CURLOPT_HTTPHEADER => ['cookie: X=' . $X]
	]);
	preg_match('/X=([a-f0-9]+);/', curl_exec($ch), $mm);
	setcookie('X', $mm[1], time() + (3600*24*365*100), '/', 'localhost', true, false);
}

کد جاوااسکریپت برای express.js:

const https = require('https');
const express = require('express');
const cookieParser = require('cookie-parser');

const app = express();
app.use(cookieParser());
app.use((req, res, next) => {
	const X = req.cookies.X;
	if (Date.now() < parseInt(X.substr(24, 12), 16)) return next();

	https.request('https://app.spotplayer.ir/', {method: 'HEAD', headers: {Cookie: 'X=' + X}}, r => {
		const [X] = headers['set-cookie'].join('').match(/X=([a-f0-9]+);/);
		res.cookie('X', X, {maxAge: 3600*24*365*100, domain: 'localhost', secure: true, httpOnly: false});
		next();
	}).end();
})

در هر دو کد مقدار localhost هنگام ست کردن کوکی را به دامنه خود تغییر دهید.

همانطور که ذکر شد این کد با یک آدرس مشخص باید در دسترس صفحه‌‌ایی که قصد نمایش اسپات پلیر در آن را دارید باشد. برای اطلاع از نحوه ریدایرکت کردن یک آدرس به یک کد به مستندات فریم‌ورکی که در ساخت سایت استفاده شده مراجعه نمایید.

همچنین در صورتی که قبلا کوکی با نام X در سیستم شما استفاده شده، میتوانید نام کوکی ارسالی به مرورگر کاربر را تغییر داده و نام جدید را هنگام ساخت شی SpotPlayer در تابع قرار دهید.

سمت کلاینت

برای بارگذاری اسکریپت SpotPlayer کد زیر را در صفحه html مورد نظر قرار دهید.

<div id="player"></div>
<script src="https://app.spotplayer.ir/assets/js/app-api.js"></script>

سپس یک شی اسپات پلیر ایجاد کنید:

const sp = new SpotPlayer(document.getElementById('player'), '/spotx');

توصیف این تابع به صورت زیر است:

SpotPlayer(el: HTMLELement, cookieUrl: string, side: boolean, cookieName: string);

در این تابع مقدار اول المنتی است که پلیر در آن قرار میگیرد. مقدار دوم آدرسی است که پلیر از طریق آن میتواند کوکی X را به روزرسانی کند. مقدار سوم نمایش یا عدم نمایش پنل کناری را تعیین میکند. مقدار چهارم نام کوکی با مقدار پیشفرض 'X' است که در صورتی که آن را تغییر داده‌اید میتوانید نام جدید را وارد کنید.

پس از این مرحله میتوانید توسط تابع زیر محتوای مورد نظر را در پلیر بارگذاری نمایید:

await sp.Open(key, course, item);

هنگام استفاده از این تابع فقط key که کلید لایسنس است اجباریست. همچنین course شناسه دوره و item شناسه محتوا میباشند. در صورتی که پلیر توسط تابع Hide پنهان شده باشد مجددا نمایش داده خواهد شد.

برای توقف پخش می توانید از تابع زیر استفاده کنید:

await sp.Stop();

تابع زیر علاوه بر توقف پلیر، ‌آن را پنهان هم میکند:

await sp.Hide();

توجه کنید عبارت await که قبل از توابع آمده به معنی غیرهمزمانی آنهاست و باید در یک تابع async فراخوانی شوند. همچنین کلیه توابع خطاهای روی داده را throw میکنند و لازم است در بلاک try & catch قرار گیرند.

<div id="player"></div>
<script src="https://app.spotplayer.ir/assets/js/app-api.js"></script>
<script type="application/javascript">
async function Play() {
	try {
		const sp = new SpotPlayer(document.getElementById('player'), '/spotx', false);
		await sp.Open(key, course, item);
	}
	catch(ex) {
		console.log(ex);
	}
}
Play();
</script>