قراردادن فیلم در HTML5

قرار دادن فیلم در 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 خود سبک دهید – به عنوان مثال ، ممکن است کدورت را اصلاح کرده یا مرزها را تنظیم کنید.

پشتیبانی مرورگرها

از اکثر مرورگرها مانند : chrome، ie ، Firefox ، Safari، Opera، Edge پشتیبانی می کند.

در دوره آموزش HTML بین المللی آکادمی دویکس به صورت رایگان ثبتنام کنید.