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

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

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