برترین ویدیو پلیرهای HTML5 در ۲۰۱۹

ویدیو پلیرهای HTML5

ویدیو پلیرهای HTML5: زمانی که HTML5 تگهای Video و Audio را معرفی کرد، فایلهای رسانه‌ای شما کاملا در اینترنت قابل دسترسی شد. ویدیو پلیرهای HTML5 به سرعت جایگزین Flash Player و موارد مشابه شدند. قبلا پخش درست ویدیو بدون استفاده از پلیرهای HTML5 سخت و دست و پا گیر بود.

اغلب تگ‌های <embed> و <object> باید مورد استفاده قرار گیرند که لیست گسترده‌ای از پارامترها را برای دسترسی به پخش رسانه‌ها اختصاص میدهند.

تفاوت تگ‌های Audio و Video در HTML5 با سایر مدیا پلیرها از جمله Flash Player این است که، HTML5 فایلها و تگ‌های ویدیو و صدا را به عنوان تصاویر در نظر میگیرند. خصوصیاتی مانند ارتفاع، عرض و پخش خودکار را میتوان در تگ‌های هر المنت HTML تعریف کرد.

<video src=”url” width=”۶۴۰px” height=”۳۸۰px” autoplay/>

چرا انتخاب یک ویدیو پلیر اوپن سورس؟

  • رایگان بودن
  • باگها و مشکلات کمتر و حل سریع آنها
  • امکان سفارشی‌سازی
  • پشتیبانی رایگان و فوری

برترین ویدیو پلیرهای HTML5

در این بخش به معرفی و بررسی ۵ ویدیو پلیر برتر و اوپن سورس HTML5 در ۲۰۱۹ میپردازیم:

 

Plyr

ویدیو پلیرهای HTML5

Plyr یک ویدیوپلیر ساده و سقارشی‌سازی شده  HTML5، Vimeo و یوتیوب است. این پلیر سبک و کم حجم، قابل دسترسی و سفارشی‌سازی بوده و توسط مرورگرهای مدرن پشتیبانی میشود. شما میتوانید با استفاده از NPM و دستور npm install plyr به این ویدیوپلیر دسترسی داشته باشید. (دوره آنلاین و رایگان آموزش HTML5 کدفرند)

Video.js

ویدیو پلیر وب که بطور اختصاصی برای HTML5 ساخته شده است. Video.js از HTML5 و Flash video و همچنین Vimeo , یوتیوب پشتیبانی میکند. در Video.js پخش ویدیو روی دسکتاپ و موبایل نیز پشتیبانی شده است. این ویدیوپلیر در سال ۲۰۱۰ شروع به کار کرده و اکنون در بیش از ۲۰۰,۰۰۰ وبسایت فعال کار میکند.

CDN نسخه رایگان Video.js اکنون برای استفاده عموم آزاد است. باری استفاده باید کدهای زیر مابین تگهای <head> فایل خود قرار دهید:

<link href=”//vjs.zencdn.net/7.0/video-js.min.css” rel=”stylesheet”>
<script src=”//vjs.zencdn.net/7.0/video.min.js”></script>

سپس میتوانید با بکار گیری نمونه کد زیر، Video.js را در فایل خود include کنید:

<video
 id=”my-player”
 class=”video-js”
 controls
 preload=”auto”
 poster=”//vjs.zencdn.net/v/oceans.png”
 data-setup=’{}’>
 <source src=”//vjs.zencdn.net/v/oceans.mp4" type=”video/mp4"></source>
 <source src=”//vjs.zencdn.net/v/oceans.webm” type=”video/webm”></source>
 <source src=”//vjs.zencdn.net/v/oceans.ogv” type=”video/ogg”></source>
 <p class=”vjs-no-js”>
 To view this video please enable JavaScript, and consider upgrading to a web browser that
 <a href=”http://videojs.com/html5-video-support/” target=”_blank”>
 supports HTML5 video
 </a>
 </p>
</video>

Afterglow

ویدیو پلیرهای HTML5

Afterglow ابزاری برای ساخت ویدیو پلیرهای کاملا ریسپانسیو با استفاده از المنتهای مختلف ویدیو در HTML5 با حداقل زحمت است. روند آماده‌سازی بسیار ساده ای داشته و از ویژگیهای مختلفی از حمله پخش با کیفیتهای مختلف پشتیبانی میکند. با بکار گیری نمونه کد زیر، میتوانید Afterglow را در فایل مد نظرتان include کنید: (دوره آنلاین و رایگان آموزش HTML5 کدفرند)

!DOCTYPE html>
<html>
 <head>
 <title>afterglow player</title>
 <script type=”text/javascript” src=”//cdn.jsdelivr.net/afterglow/latest/afterglow.min.js”></script>
 </head>
 <body>
 <video class=”afterglow” id=”myvideo” width=”۱۲۸۰" height=”۷۲۰">
 <source type=”video/mp4" src=”/path/to/myvideo.mp4" />
 </video>
 </body>
<html>

MediaElement.js

ویدیو پلیرهای HTML5

MediaElement.js یک پلبر Video یا Audio در HTML5 است که از API مدیا المنت HTML5 تقلید کرده و یک UI سازگار در تمامی مرورگرها ارائه میدهد. به جای ارائه یک پلیر HTML5 به مرورگرهای مدرن و یک Flash Player مستقل برای مرورگرهای قدیمیتر، MediaElement.js یک پلاگین سفارشی Flash و سیلورلایت را با استفاده از API مدیا المنت در HTML5 ارائه میدهد.

راهنمای نصب و استفاده از MediaElement.js در مستندات سایت رسمی آن موجود است که میتوانید از آن استفاده کنید.

jPlayer

jPlayer یک کتابخانه رساته رایگان و اوپن سورس است که با جاوااسکریپت نوشته شده است. jPlayer به شما این امکان را میدهد تا به سرعت با استفاده از یک پلاگین jQeuery محتوای صوتی و ویدیویی خود را به صفحات وب اضافه کنید.

API جامع آن از راه‌حل‌های رسانه‌ای نوآورانه پشتیبانی میکند در حالی که پشتیبانی توسط کاربران فعال برنامه اوپن سورس jPlayer و جامعه برنامه‌نویس ارائه شده است. jPlayer دارای یک پکیج خوب برای PHP است که میتوانید با استفاده از composer آنرا نصب کنید. برای اینکار، نیاز به اضافه کردن خطوط زیر به فایل composer.json پروژه خود دارید: (دوره آنلاین و رایگان آموزش HTML5 کدفرند)

// …
“require”: {
 // …
 “happyworm/jPlayer”: “۲٫*”
 // …
}
// …
“config”: {
 “component-dir”: “your/desired/asset/path”
},
// …

برای استفاده از مدیا پلیرهای پیش فرض HTML5 از دستورات زیر میتوانید استفاده کنید:

HTML5 Audio

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

HTML5 Video

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

 

برچسب:, , , , , , , , , , ,

آواتار نویسنده
کدفرند
همیشه یکی از مشکلات و دغدغه های ما در تیم کدفرند تولید دوره های آموزشی با کیفیت و با قیمت مناسب بوده،و امروز به این هدف رسیده‌ایم و خوشحالیم که توانستیم با تولید دوره های آموزشی جامع و کامل به این مهم دست یابیم

شما همچنین ممکن است دوست داشته باشید

backend
بسترهای توسعه برنامه های Back-End
18 آگوست, 2020
graphql_codefriend
GraphQL روشی موثر برای نوشتن API های بهینه
11 آگوست, 2020
Web Api
Web Api چیست؟ بررسی و آشنایی با Web Api
4 آگوست, 2020

یک دیدگاه ارسال کنید

نشانی ایمیل شما منتشر نخواهد شد.

تخفیف های جدید آبان ماه : تا ۴۰۰ هزار تومان تخفیف برای خرید اشتراک ویژه کدفرنــد (تنـــها تا ۶آبان فرصــــت باقیســـــت)خرید بسته اشتراک ویژه تخفیف دار
+