سرور مجازی NVMe

روش پخش ویدیو با HTML5

طراحی و توسعه نرم افزار

توسط تیم تولید محتوا آخرین بروزرسانی دی ۲۹, ۱۴۰۲

سرفصلهای مطلب

زمان لازم برای مطالعه: 3 دقیقه

روش پخش ویدیو با HTML5

قرار دادن یک ویدیو در نشانه گذاری HTML5 ساده است، برای هر مرورگری پیچیده تر از قرار دادن یک تصویر نیست. در این مقاله ما از پشتیبانی داخلی مرورگر برای ساخت ساده‌ترین پخش‌کننده ویدیوی ممکن بهره کامل خواهیم برد.

ما چارچوب اصلی برنامه را می گذاریم و سپس از عنصر

پیش نیازها

از Chrome، Safari یا Internet Explorer 9+ استفاده کنید. فعلاً باید از فایرفاکس و اپرا به دلیل مشکلات فرمت فایل ویدیویی بین مرورگرها اجتناب کنید. اگرچه پشتیبانی از عنصر ویدیو در تمام مرورگرهای مدرن ثابت است، فرمت MP4 فایرفاکس و اپرا را افزایش می دهد. تو می توانی سازگاری را در اینجا بررسی کنید.

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

ساخت چارچوب اساسی

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

شما باید یک فایل HTML جدید در پوشه کاری خود ایجاد کنید و نام آن را index.html بگذارید، سپس این کد را اضافه کنید:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>HTML5 Video Player</title>
 <style>
 body {
 font-family: sans-serif;
 border: 0;
 margin: 0;
 padding: 0;
 }
 header {
 text-align: center;
 }
 #player {
 display: table;
 width: 100%;
 padding: 4px;
 }
 #player > div {
 display: table-cell;
 vertical-align: top;
 }
 </style>
</head>
<body>
 <header>
 <h1>HTML5 Video Player</h1>
 </header>
 <section id="player">
 <div>
 <!-- The video will appear here-->
 </div>
 </section>
</body>
</html>

اکنون، با پایه گذاری شده، بیایید با افزودن یک ویدیو به قسمت سرگرم کننده پخش کننده برسیم page.

پیشنهاد می‌کنیم بخوانید: نگران هک شدن هستید؟ – 10 گام برای امنیت بهتر وب سایت

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

هدف از طراحی عنصر

در اینجا یک ویدیوی HTML5 در کروم به نظر می رسد:

لیست بعدی تمام کدهای مورد نیاز برای نمایش ویدیو را نشان می دهد. همانطور که می بینید، پیچیده نیست.

این کد را به جای کامنت “” در کد بالا وارد کنید، مطمئن شوید که ( YOUR VIDEO ) را با مسیر mp4. خود جایگزین کرده اید و بازخوانی کنید page.

<video src="https://www.webdesignerdepot.com/2013/10/how-to-play-video-with-html5/( YOUR VIDEO ).mp4"
controls
width="720" height="480">
Your browser does not support the video element, please #D try <a href="https://www.webdesignerdepot.com/2013/10/how-to-play-video-with-html5/videos/VID_20120122_133036.mp4">downloading the video instead</a>
</video>

در این کد src ویژگی مسیر و نام فایل فایل mp4 شما است کنترل ها ویژگی نشان می دهد که شما دوست دارید ویدیو دارای کنترل های استاندارد باشد (اگر کنترل ها را نمی خواهید آن را حذف کنید) و عرض و ارتفاع خود توضیحی هستند. متن داخل عنصر متن پشتیبان است تا اگر تگ ویدیو توسط مرورگر شناسایی نشود، نمایش داده می شود.

خلاصه

وب به طور فزاینده ای به عنوان جایگزینی برای رسانه های پخش سنتی استفاده می شود. سرویس‌هایی مانند Netflix، YouTube، Spotify، last.fm و Google Music به دنبال جایگزینی مجموعه‌های DVD و CD شما با پخش‌کننده‌های آنلاین هستند. با HTML5، ویدئو و صدا به شهروندان درجه یک محتوای وب تبدیل می شوند. به جای اینکه مسئولیت پخش رسانه را به یک برنامه شخص ثالث واگذار کنید، در مرورگر پخش می شود و به شما امکان می دهد رسانه ها را از داخل برنامه وب خود کنترل و دستکاری کنید.

پیشنهاد می‌کنیم بخوانید: ایجاد یک وب سایت بیش از چند کلیک طول می کشد

همانطور که می بینید HTML5 آن را به عنوان ساده می کند process برای افزودن ویدیو و صدا به صفحات وب همانطور که برای افزودن تصاویر است.

ترجیح می‌دهید چگونه ویدیو را مدیریت کنید؟ آیا عنصر

تصویر/تصویر کوچک ویژه، تصویر ویدیویی از طریق Shutterstock.

منتشر شده در 1403-01-19 20:13:02

منبع نوشتار

امتیاز شما به این مطلب