قرار دادن فیلم در HTML5
دسته بندی : آموزش HTML سطح مقاله : متوسط زمان مطالعه : 2 دقیقه آخرین بروز رسانی: 04 آذر 1399قرار دادن فیلم در HTML5 به شما امکان میدهد محتوای ویدئو را بدون اضافه کردن افزونههای شخص ثالث در صفحه وب مستقیم پخش کنید.
آموزش قرار دادن فیلم در HTML5
در HTML4 و نسخههای قبلی ، فقط با استفاده از پلاگینهای چندرسانهای مختلف (به عنوان مثال، Adobe Flash) میتوان فایلهای ویدئویی را به وب سایت اضافه کرد. HTML5 دارای یک عنصر ویدیوی بومی است که از سه قالب ویدیویی (MP4 ، WebM و Ogg) پشتیبانی میکند ، جاسازی فیلمها در یک صفحه وب را بسیار آسانتر میکند. با استفاده از یک فایل یا URL میتوانید منبع خارجی فیلم را تعریف کنید.
استفاده از تگ ویدیوی HTML5
در HTML5 ، میتوانید با استفاده از یک جفت تگ<video>
ویدیویی را در صفحه وب خود تعبیه کنید. همچنین تعریف منبع برای فیلم الزامی است. میتوانید با استفاده از یک ویژگی src ساده این کار را انجام دهید ، اما توصیه میشود تگهای <source>
را برای آن انتخاب کنید:
<video controls width="400" height="300">
<source src="video-tag-example.mp4" type="video/mp4">
<source src="video-tag-sample.webm" type="video/webm">
<source src="video-tag-demo.ogg" type="video/ogg">
Video tag is not supported in this browser.
</video>
دلیل اینکه این کار به عنوان یک روش بهتر در نظر گرفته میشود این است که با استفاده از تگ <source>
امکان تعریف چندین منبع فراهم می شود. پخش کننده ویدیوی HTML5 از سه قالب پشتیبانی میکند ، اما همه آنها از سطح پشتیبانی مرورگر یکسانی برخوردار نیستند. این بدان معنی است که میتوانید برای اطمینان از اینکه کاربر میتواند ویدیو را ببیند ، منابع را در قالبهای مختلف اضافه کنید.
اگر ویدیو در هر قالب ارائه شده قابل پخش نباشد ، کاربر متنی را که به عنوان محتوای اصلی شناخته میشود مشاهده میکند. این تنها محتوای موجود در تگ <video>
است. از آن برای ارائه اطلاعات به کاربر یا پیوند مستقیم به پرونده ویدیویی استفاده کنید.
کنترل های ویدئویی
همیشه توصیه میشود کنترل های ویدیویی HTML5 را به پخش کننده خود اضافه کنید. با استفاده از دکمههای ویژه در پنجره پخش کننده، کاربر میتواند به صورت دستی فیلم را شروع کرده و متوقف کند، با استفاده از نوار لغزنده به مکان خاصی بروید یا بین نمایشگر پنجره و صفحه تمام صفحه جابجا شود. برای افزودن کنترلهای ویدئویی، ویژگی کنترلها را وارد کنید:
<video controls width="400" height="300">
<source src="video-tag-example.mp4" type="video/mp4">
Video tag is not supported in this browser.
</video>
اگر فیلم صدا دارد ، کنترلهای ویدیویی HTML5 همچنین امکان تغییر میزان صدا یا بی صدا کردن آن را به طور کامل فراهم میکنند. نه تنها تجربه کاربر را بهبود میبخشد ، بلکه برای دستیابی به آن نیز بسیار مهم است. توانایی کنترل پخش برای افراد دارای معلولیت (به عنوان مثال صرع حساس به عکس) بسیار مهم است.
ابعاد پخش کننده
برای تعریف اندازه پخش کننده خود، میتوانید از ویژگیهای قد و عرض استفاده کنید. ویدئو همان نسبت ابعاد را حفظ خواهد کرد.
در مثال ویدیویی HTML5 در زیر ، مقادیر برای ارتفاع 300 و برای عرض 400 تنظیم شده است:
<video controls width="400" height="300">
<source src="video-tag-example.mp4" type="video/mp4" width="400" height="300">
Video tag is not supported in this browser.
</video>
توجه: تعیین اندازه دقیق به جلوگیری از سوسو زدن هنگام بارگیری نیز کمک میکند.
نکات مهم قرار دادن فیلم در HTML5
- اگر از عنصر
<source>
استفاده میکنید ، توصیه میکنیم ویژگی type را به آن اضافه کنید. به این ترتیب ، مرورگر میتواند بدون تلاش برای پخش آن و اتلاف منابع ، فوراً از قالبی كه پشتیبانی نمیكند، بگذرد. - با قرار دادن ویژگی پوستر ، می توانید تصویری اضافه کنید تا قبل از شروع فیلم نمایش داده شود.
- میتوانید با استفاده از CSS به پخش کننده ویدیوی HTML5 خود سبک دهید – به عنوان مثال، ممکن است کدورت را اصلاح کرده یا مرزها را تنظیم کنید. برای آموزش کاملا رایگان CSS به شما پیشنهاد میکنیم مقالات این دسته از سایت دویکس را مطالعه کنید.
مزایای قرار دادن فیلم در HTML5
استفاده از تگ <video>
در HTML5 روشی ساده، انعطافپذیر و سازگار برای قرار دادن ویدئو در صفحات وب است که مزایای متعددی برای کاربران و صاحبان وبسایت به ارمغان میآورد.
1. سهولت استفاده:
- قرار دادن ویدئو در HTML5 بسیار ساده است و به دانش زیادی از برنامهنویسی یا کدنویسی نیاز ندارد.
- تنها با استفاده از چند تگ و مشخصه ساده، میتوانید ویدئویی را در صفحه خود جاسازی کنید و آن را با کنترلهای پخش، مانند دکمههای پخش، مکث و صدا، همراه کنید.
2. سازگاری:
- ویدئوهای HTML5 در اکثر مرورگرهای وب مدرن و دستگاههای مختلف، از جمله رایانههای شخصی، تبلتها و تلفنهای هوشمند، به خوبی نمایش داده میشوند.
- این امر به شما امکان میدهد تا بدون نیاز به نگرانی در مورد مشکلات سازگاری، محتوای ویدئویی خود را به مخاطبان گستردهای برسانید.
3. قابلیت انعطافپذیری:
- تگ
<video>
از فرمتهای مختلف ویدئویی مانند MP4، WebM و Ogg پشتیبانی میکند. - این به شما امکان میدهد تا ویدئوهای خود را در قالبهای مختلف ارائه دهید و مطمئن شوید که کاربران میتوانند محتوای شما را در دستگاههای خود مشاهده کنند.
4. قابلیت کنترل:
- شما میتوانید با استفاده از صفات مختلف، ظاهر و عملکرد ویدئوی خود را در HTML5 به طور کامل کنترل کنید.
- میتوانید مواردی مانند اندازه ویدیو، نمایش یا عدم نمایش کنترلها، و نحوه پخش خودکار یا عدم پخش خودکار ویدیو را تعیین کنید.
5. تعامل:
- میتوانید از جاوا اسکریپت برای افزودن قابلیتهای تعاملی به ویدئوهای HTML5 خود استفاده کنید.
- به عنوان مثال، میتوانید دکمههایی را برای اجازه دادن به کاربران برای پرش به جلو یا عقب در ویدیو، یا برای تغییر سرعت پخش، اضافه کنید.
6. مزایای سئو:
- استفاده از ویدئو در صفحات وب میتواند به بهبود رتبهبندی موتور جستجوی (SEO) شما کمک کند.
- موتورهای جستجو محتوای ویدئویی را ارزشمند میدانند و ممکن است به صفحاتی که حاوی ویدئو هستند، رتبهبندی بالاتری در نتایج جستجو اعطا کنند.
7. افزایش جذابیت:
- ویدئوها میتوانند محتوای شما را جذابتر و جذابتر کنند.
- مردم به طور کلی محتوای ویدئویی را بیشتر از محتوای متنی یا تصویری درگیر کننده میدانند، و این میتواند به افزایش زمان صرف شده توسط کاربران در وب سایت شما و همچنین نرخ تبدیل شما کمک کند.
8. ارائه اطلاعات به روشی جدید:
- ویدئوها میتوانند راهی عالی برای ارائه اطلاعات به روشی جدید و جذاب باشند.
- میتوانید از ویدئوها برای نمایش محصولات یا خدمات خود، آموزش به کاربران در مورد نحوه استفاده از محصول یا خدمات خود، یا به اشتراک گذاشتن داستان برند خود استفاده کنید.
پشتیبانی مرورگرها
از اکثر مرورگرها مانند : chrome، ie ، Firefox ، Safari، Opera، Edge پشتیبانی می کند.
این مقاله چقدر براتون مفید بود؟