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

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

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

تگ video از فرمت mp4 و ogg و swf و Mpeg و webM پشتیبانی می کند اما دقت کنید که بعضی از مرورگرها در همه فرمت غیر از mp4 مشکل دارن لذا سعی کنید فرمت فایل تصویریتان حتما mp4 باشد.

»» مثال از تگ VIDEO در HTML :

<video controls > <source src="http://up.pegasusgraph.ir/download/3303601/demo.mp4" type="video/mp4"> </video>

اگه متوجه شده باشید بعد از تگ video مقدار controls داخل تگ قرار گرفته اگه این مقدار داخل تگ وجود داشته باشد دکمه های پخش و متوقف و جلو و عقب پخش کننده فعال می شود.

»» دقت کنید که شما می توانید در داخل بطن تگ video متنی اضافه کنید که وقتی مرورگر کاربر از این تگ پشتیبانی نمی کند نمایش داده شود .

به مثال زیر توجه کنید :

<video controls> <source src="http://up.pegasusgraph.ir/download/3303601/demo.mp4" type="video/mp4"> شرمنده، مرورگر شما تگ ویدئو را پشتیبانی نمی کند </video>

»» همچنین ما می توانین با اضافه کردن مقدار autoplay کاری کنیم که فایل تصویری ما بصورت خودکار بعد از ورود به سایت پخش شود.

به مثال زیر توجه فرمایید :

<video controls autoplay> <source src="http://up.pegasusgraph.ir/download/3303601/demo.mp4" type="video/mp4"> </video>

»» همچنین این تگ video به ما این امکان را می دهد که با اصافه کردن مقدار loop کاری کنیم که بعد از اتمال پخش فایل تصویری دوباره به صورت خودکار پخش شود .

مانند مثال زیر :

<video controls loop> <source src="http://up.pegasusgraph.ir/download/3303601/demo.mp4" type="video/mp4"> </video>

»» شما حتی می توانید تصویری به عنوان کاور ویدیو انتخاب کنید که قبل از پخش فایل تصویری برای ویدیو نمایش داده بشه مثل کاور های ویدیوی آپارات و یوتوپ برای این کار کافیست مثل مثال زیر عمل کنید

<video controls poster="آدرس عکس شما" > <source src="http://up.pegasusgraph.ir/download/3303601/demo.mp4" type="video/mp4"> </video>

این تگ کاربردی تنظیمات دیگری نیز دارد ولی چون زیاد مهم نیست و بیشتر مرورگرها پشتیبانی نمی کنند از توضیح و آموزش آن ها صرف نظر کردیم.

امیدوارم این آموزش و این قسمت جلسه html مورد توجه شما قرار گرفته باشد.

با تشکر مدیریت سایت پگاسوس گراف .