نحوه قرار دادن ویدئو در صفحات وب

سلام خدمت دوستان و همراهان محترم سایت آموزشی فری لرن ، لطفا در ادامه با آموزش نحوه قرار دادن ویدئو در صفحات وب با من همراه باشید.

ویدئو در صفحات وب

در این بخش میخواهیم با فایل های تصویری و نحوه قرار دادن آنها در صفحات وب آشنا شویم. لطفا در ادامه با من همراه باشید.

اگر در جریان باشید از بین فرمت های ویدئویی تنها فرمت های MP4 و WebM و Ogg توسط HTML5 پشتیبانی می شود، لذا فایل ویدئویی شما باید از این فرمت ها ایجاد شده باشد.

در جدول زیر مشاهده خواهید نمود که چه مرورگرهایی از ۳ فرمت MP4 و WebM و Ogg پشتیبانی خواهند کرد.

تنها فرمتی که توسط تمامی مرورگرها پشتیبانی می شود فرمت MP4 می باشد.

همانطور که در جدول مشاهده مینمایید تنها فرمت MP4 است که تمامی مرورگرها از آن بخوبی پشتیبانی می کنند لذا من هم پیشنهاد میکنم شما نیز از این فرمت ویدئویی برای ویدئوهایتان استفاده نمایید.

جدول نوع رسانه ویدئویی در HTML

در این وبسایت میتوانید نوع رسانه تمامی فایل های همچون تصویری / صوتی / متنی و.. را مشاهده نمایید.

نحوه قرار دادن ویدئو در صفحات وب

ما در HTML5 به راحتی و با استفاده از تگ <video> میتوانیم یک ویدئو را در یک صفحه ی وب قرار دهیم، که شکل کلی برای استفاده از این تگ را میتوانید بصورت زیر مشاهده نمایید.

<video controls>
<source src="demo.mp4" type="video/mp4">
</video>

امتحان کنید

تنظیم اندازه عرض و ارتفاع ویدئو

ما با استفاده از صفات width و height درون تگ <video> میتوانیم اندازه عرض و ارتفاع ویدئو را به دلخواه تنظیم نماییم.

<video controls width="400" height="230">
<source src="demo.mp4" type="video/mp4">
</video>

امتحان کنید

تنظیم پخش خودکار ویدئو در HTML

شاید شماهم تا به الان براتون پیش اومده باشه که وارد یک وبسایت می شوید و بطور خودکار و بدون اینکه متوجه شوید یک ویدئو برای شما پخش می شود، که البته اینکار زیاد به میل کاربران خوش نمیاد و اینکار میتونه باعث فرار کاربر از یک وبسایت شود.

با استفاده از صفت autoplay در تگ <video> ، میتوان کاری کرد که ویدئو بطور خودکار به محض بالا آمدن پخش شود.

در مرورگرهای مدرن (آخرین نسخه های موزیلا فایرفاکس یا گوگل کروم) ممکن است از پخش خودکار صدا جلوگیری کنند، ولی خب شما میتونید خودتون تعیین کنید که آیا اجازه بده برای پخش خودکار یا خیر. (آموزش فعالسازی پخش خودکار در مرورگرها)

قابلیت پخش خودکار یک ویدئو ممکن است بروی برخی از گوشی های موبایل کار نکند.

<video controls autoplay>
<source src="demo.mp4" type="video/mp4">
</video>

امتحان کنید

تکرار پخش ویدئو در HTML

با قرار دادن صفت loop درون تگ <video> میتوان حالت تکرار پخش یک ویدئو را فعال کرد و در اینصورت به محض اتمام یک ویدئو ،دوباره همان ویدئو بطور خودکار پخش خواهد شد.

<video controls loop>
<source src="demo.mp4" type="video/mp4">
</video>

امتحان کنید

قطع صدای ویدئو در HTML

با قرار دادن صفت muted درون تگ <video> میتوان بطور پیش فرض صدای ویدئو را قطع کرد، یعنی با کلیک بروی دکمه پخش هیچ صدایی از ویدئو پخش نخواهد شد و فقط تصویر پخش خواهد شد.

<video controls muted>
<source src="demo.mp4" type="video/mp4">
</video>

امتحان کنید

نحوه اضافه کردن زیرنویس به ویدئو در HTML

حتما تا به الان ویدئوهایی را دیده اید که زیرنویس دارند، مثلا وقتی ما میخواهیم یک فیلم با زبان اصلی (خارجی) را مشاهده نماییم باید از زیرنویس با زبان فارسی استفاده نماییم. در HTML5 هم ما میتوانیم فایل زیرنویس به ویدئوهایمان اضافه نماییم تا کاربر بتواند بصورت آنلاین یک زیرنویس با زبان فارسی یا هر زبانی دیگر را مشاهده نماید.

حال لطفا به مثال زیر توجه نمایید و همچنین بروی دکمه امتحان کنید برای مشاهده خروجی بصورت آنلاین کلیک نمایید.

• صفت src : محل فایل زیرنویس را مشخص میکند (یک فایل زیرنویس با فرمت (vtt.))
• صفت kind : برای فعال کردن فایل زیرنویس
• صفت srclang : برای مشخص کردن کد زبان فایل زیرنویس (اگر مقدار صفت kind برابر باشد با subtitles وجود این صفت ضروری می باشد)
• صفت label : برای ایجاد یک نام جهت نمایش در ویدئوی در حال پخش
• صفت default : اگر وجود داشته باشد فایل زیرنویس بطور خودکار با پخش ویدئو نمایش داده خواهد شد

توجه داشته باشید که فایل زیرنویس شما باید حتما از نوع vtt باشد نه srt یا دیگر فرمت ها.

با استفاده از این وبسایت میتوانید یک زیرنویس که از نوع srt است را به یک زیرنویس از نوع vtt تبدیل نمایید.

برای مشاهده کد زبان های کشورها لطفا اینجا کلیک نمایید.

<video width="400" height="230" controls>
<source src="demo.mp4" type="video/mp4">
<track src="subtitle.vtt" kind="subtitles" srclang="fa" label="farsi" default>
</video>

امتحان کنید

منبع: سایت آموزشی فری لرن
برای مشاهده آموزش های بیشتر و همچنین دانلود فایل PDF این آموزش لطفا به سایت مراجعه نمایید.