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

من در این مقاله به شما آموزش میدم که چطوری پخش زنده شخصیتون رو روی وبسایتتون قرار بدید بصورتی که بیشتر کاربراتون بتونن اون رو براحتی مشاهده کنند.

امروزه شبکه های اجتماعی معروف و سایت های ارائه دهنده سرویس لایو استریم (Live Stream) و پخش زنده اعم از خارجی و داخلی، همه و همگی به سمت دو پروتکل معروف HLS و RTMP روی اوردن و طوری شده که بقیه پروتکل ها نقش دکور رو ایفا میکنند و اگر توسط سرویس ها ارائه میشند فقط میخوان بگند که جنس ما هم جوره.

البته این تعریف در صورتی صحیح میشه که فقط بحث WEB و WWW و پرت 80 وسط باشه، که معمولا همین هم هست. راحتی استفاده پروتکل HLS بیشتر توسعه دهندگان رو ترغیب کرده که بیشتر به این سمت روانه بشن و نرم افزار ها و دستگاه های بیشتری این پروتکل رو پشتیبانی کنند. اگر هم نرم افزارهایی مثل مرورگر های وب هم عقب بمونن برنامه نویس های مردمی هم دست روی دست نمیزارند و سریع کتابخونه های رایگان بیرون میدن که این مسیر سهل تر بشه.

من قبلا آموزش نصب و راه اندازی کامل استریمینگ سرور (Streaming Server) یا همون سرور پخش زنده خودمون با پروتکل های RTMP و HLS رو هم برای سرورهای ویندوزی و هم برای سرور های لینوکسی آموزش دادم.

 

کتابخانه hls.js

بصورت نیتیو native (بومی) فقط مرورگر سافاری +6 قابلیت پخش HLS رو داره و بقیه مرورگرها رو باید بوسیله کتابخونه های جاوا نظیر hls.js به این قابلیت مجهز کرد، که این هم بسیار سادست. شما با embed کردن کتابخونه hls.js به صفحتون با کد زیر :

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

و گذاشتن یک تگ <video> و دادن آی دی به اون و نوشتن اسکریپت زیر یک HLS پلیر نیتیو برای مرورگرها ایجاد کنید.

<video id="video"></video>
<script>
  var video = document.getElementById('video');
  if(Hls.isSupported()) {
    var hls = new Hls();
    hls.loadSource('https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
      video.play();
  });
 }
  else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8';
    video.addEventListener('loadedmetadata',function() {
      video.play();
    });
  }
</script>

دقت داشته باشید که با این کتابخونه شما فقط قابلیت پخش HLS رو به تک <video> مرورگر اضافه کردید و برای اینکه به پلیر شکل و شمایل بدید باید از پلیر های دیگه استفاده کنید، که در ادامه یکیش رو معرفی میکنیم.

 

پلیر plyr.io

در این پست من قصد دارم که شما رو با پلیر plyr.io آشنا کنم. همون طور که در قسمت امکانات صفحه Github این کتابخونه میخونید این پلیر قابلیت های خوبی نظیر پشتیبانی از زیرنویس VTT، تغییرات ظاهری ساده در CSS، ریسپانسیو، پشتیبانی از یوتیوب و Vimeo،کسب درآمد از طریق تبلیغات در ویدیو با vi.ai، پشتیبانی از استریمینگ با استفاده از کتابخانه هایی نظیر hls.js, Shaka و dash.js ، کنترل پخش ویدیو با API ، پشتبانی از ایونت ها، قابلیت تمام صفحه، میانبرهای کیبرد، تصویر در تصویر، پخش در صفحه وب برای مرورگر های iOS، کنترل سرعت پخش، پشتیبانی از مولتی کپشن و چند زیرنویسی و چندین امکان جالب دیگه.

برای اضافه کردن پلیر به صفحه وبــتون کافیه کد زیر را وارد کنید.

برای فایل های ویدئویی :

<video poster="/path/to/poster.jpg" id="player" playsinline controls>
    <source src="/path/to/video.mp4" type="video/mp4" />
    <source src="/path/to/video.webm" type="video/webm" />

    <!-- Captions are optional -->
    <track kind="captions" label="English captions" src="/path/to/captions.vtt" srclang="en" default />
</video>

برای فایل های صوتی:

<audio id="player" controls>
    <source src="/path/to/audio.mp3" type="audio/mp3" />
    <source src="/path/to/audio.ogg" type="audio/ogg" />
</audio>

در پایان صفحه و بعد از کدهای بالا نیز کد زیر رو با اضافه کردن کتابخانه plyr.js به صفحه اضافه کنید تا پلیر کار کند.

<script src="https://cdn.plyr.io/3.5.2/plyr.js"></script>
<script>
    const player = new Plyr('#player');
</script>

به دلیل اینکه plyr با ES6 نوشته شده و بعضی از مرورگر ها از اون پشتیبانی نمیکنند.plyr با استفاده از polyfills این قابلیت رو برای مرورگرهای قدیمی تر هم محیا کرده. پس برای اجرا کتابخانه polyfill.io رو با کد زیر، قبل از کد بالا؛ اضافه کنید:

<script
   type="text/javascript"
   src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,Array.prototype.includes,CustomEvent,Object.entries,Object.values,URL,Math.trunc"
   crossorigin="anonymous"
   ></script>

درضمن در نظر داشته باشید درصورتی که بخواید از ظاهر پیش فرض plyr استفاده کنید باید فایل css رو در <head> قرار دهید.

<link rel="stylesheet" href="https://cdn.plyr.io/3.5.2/plyr.css" />

 

برای بقیه تنظیمات این پلیر قدرتمند میتونید به صفحه اصلی این پلیر در Github مراجعه کنید.

 

کد نهایی

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Plyr | ghm.me</title>
        <meta name="author" content="Ali Ghaemi" address="https://ghm.me" />
        <link rel="stylesheet" type="text/css" href="https://cdn.plyr.io/3.5.2/plyr.css" />
        <link rel="stylesheet" type="text/css" href="https://cdn.plyr.io/3.5.2/demo.css" />
    </head>
    <body>
        <div class="grid">
            <header>
                <h1>Plyr.io</h1>
                <h2>ghm.me</h2>
	   	 <p><a href="https://ln.ghm.me/b123">ln.ghm.me/b123</a></p>
            </header>
            <main>
                <div id="container">
                    <video
                        controls
                        crossorigin
                        playsinline
                        autoplay
                        id="player"
                    >
                    </video>
                </div>
            </main>
        </div>
        <!-- Polyfills -->
        <script
            type="text/javascript"
            src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,Array.prototype.includes,CustomEvent,Object.entries,Object.values,URL,Math.trunc"
            crossorigin="anonymous"
        ></script>
        <!-- plyr.is -->
        <script type="text/javascript" src="https://cdn.plyr.io/3.5.2/plyr.js"></script>
        <!-- hls.js -->
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

        <script>
            const source = 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8';
            const player = new Plyr('#player');
            var video = document.getElementById('player');
            if(Hls.isSupported()) {
               var hls = new Hls();
               hls.loadSource(source);
               hls.attachMedia(video);
               hls.on(Hls.Events.MANIFEST_PARSED,function() {
                   video.play();
                });
            }else if (video.canPlayType('application/vnd.apple.mpegurl')) {
               video.src = source;
               video.addEventListener('loadedmetadata',function() {
                   video.play();
                });
            }
        </script>

    </body>
</html>

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

https://codepen.io/pen?template=YgqvJN

1

متاسفانه پلیر plyr.io از پروتکل RTMP پشتیبانی نمیکنه و برای اون باید از پلیرهای دیگه که آموزشش رو در وبلاگ قرار دادیم، استفاده کنید.

امیدوارم این آموزش براتون مفید بوده باشه.