برترین ویدیو پلیرهای 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/>

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

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

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

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

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

Plyr

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>

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

<video

id=”my-player”

class=”video-js”

controls

preload=”auto”

poster=”//vjs.zencdn.net/v/oceans.png”

data-setup=’{}’>

To view this video please enable JavaScript, and consider upgrading to a web browser that

supports HTML5 video

</a>

</p>

</video>

Afterglow

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>

!DOCTYPE html>

<html>

<head>

<title>afterglow player</title>

</head>

<body>

</video>

</body>

<html>

MediaElement.js

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”
},
// …

// …

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

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

<! — Captions are optional →

</video>

برنامه نویسی

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

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

Plyr

Video.js

Afterglow

MediaElement.js

jPlayer

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

HTML5 Audio

HTML5 Video

نکات مهم در طراحی وبسایت رستورانی زیبا

تفاوت URL و URI

نظر بدهید لغو پاسخ

برنامه نویسی

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

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

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

HTML5 Audio

HTML5 Video

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

نظر بدهید لغو پاسخ

ورود به حساب کاربری

ایجاد حساب کاربری