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

سلام خدمت دوستان و همراهان محترم سایت آموزشی فری لرن ، لطفا در ادامه با آموزش نحوه قرار دادن ویدئو در صفحات وب با من همراه باشید.ویدئو در صفحات وبدر این بخش میخواهیم با فایل های تصویری و نحوه قرار دادن آنها در صفحات وب آشنا شویم. لطفا در ادامه با من همراه باشید.اگر در جریان باشید از بین فرمت های ویدئویی تنها فرمت های 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 این آموزش لطفا به سایت مراجعه نمایید.