استفاده مستقیم از پلیر تحت وب

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

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

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

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

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

قرار دادن پلیر در سایت

سمت سرور

هنگام قرار دادن پلیر در سایت اولین قدم همگام سازی کوکی مرورگر کاربر با سرور اسپات پلیر است که باید در کدهای سمت سرور سایت شما انجام شود. علت این موضوع این است که مرورگر سافاری کوکی هایی سمت کلاینت یا سرور که با دامنه ایی غیر از دامنه اصلی باشند را پس از دو هفته پاک میکند. به این منظور لازم است در صفحه ایی که قصد نمایش اسپات پلیر را دارید، مقدار قبلی کوکی 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);
}

کد جاوااسکریپت برای اکسپرس و node.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 را به دامنه خود تغییر دهید.

سمت کلاینت

سپس کد زیر را در صفحه html مورد نظر قرار دهید.

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

پس از این کد توسط کد زیر اسپات پلیر را به المنت مورد نظر در صفحه اضافه کنید:

const sp = new SpotPlayer(document.findElementById('SpotPlayer'), null, 0);

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

برای خواندن یک کوکی مانند X در جاوااسکریپت میتوانید از کد زیر استفاده کنید:

const x = (document.cookie.match(new RegExp(';?X=([^;]+)')) || [undefined, null])[1];

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

await sp.Open(licenseKey, courseId, contentId);

هنگام استفاده از این تابع فقط licenseKey اجباری است.

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

await sp.Stop();

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

await sp.Hide();

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

async function play() {
	try {
		const x = (document.cookie.match(new RegExp(';?X=([^;]+)')) || [undefined, null])[1];
		const sp = new SpotPlayer(document.findElementById('SpotPlayer'), x, false);
		await sp.Open(licenseKey, courseId, contentId);
	}
	catch(ex) {
		console.log(ex);
	}
}

SpotPlayer.ir

به SpotPlayer بپیوندید

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

  • JavaScript Programming
  • NodeJS Programming
  • HTML & CSS Designing & Programming
  • C++ Programming
  • Network Administration
  • NoSQL & Big Data Programming
  • Nueural & Deep Networks Programming
ارسال درخواست