تبلیغات تبلیغات
حراجی دامنه های ویژهمشاهده


آخرین ارسال های تالار مشاهده انجمن
Google Scholar 1 پاسخ 610 بازدید افزونه پرداخت با تتر 2 پاسخ 794 بازدید درج اگهی تبلیغاتی چگونه است؟ 0 پاسخ 3 بازدید Open Journal Systems (OJS) 0 پاسخ 1466 بازدید ارز ووکامرس 2 پاسخ 1172 بازدید افزونه گرافیست 1 پاسخ 1050 بازدید آموزش تغییر استایل بخش مدیریت سفارشات 1 پاسخ 1597 بازدید خرابی قالب سایت اسکریپت ها 2 پاسخ 1534 بازدید لینک قالب کلینیک بهداشتی پزشکی Medizco برای وردپرس 1 پاسخ 1002 بازدید چگونه این نوشته در آخرین ارسالات را ویرایش کنم؟ 1 پاسخ 1056 بازدید
تبلیغات
تبلیغات تبلیغات

آموزش قرار دادن تگ video در HTML5

CSS / HTML , آموزش طراحی

در اولین قسمت از سری آموزش های دوران طراحی قصد داریم که به معرفی و نحوه استفاده از تگ Video در HTML5 بپردازیم .

آموزش قرار دادن تگ video در HTML5

 

در ابتدا بهتره که بگیم تگ video در نسخه های قبلی از HTML یعنی نسخه HTML4 به پایین وجود نداشت ! و این تگ در زبان HTML ورژن پنجم نمایان شد  و تا قبل از آن کاربران برای نمایش ویدیو در سایت خود از برنامه های جانبی از جمله Flash و silverlight استفاده می کردند که جالب است بدانید برنامه های فلش و سیلورلایت به زودی با سفر را از دنیای وب خواهند بست و جای خود را به تکنولوزی های جدید صنعت وب مانند این تگ Video خواهند داد .

 

اما می رسیم به نحوه کار این تگ , همانطور که در ابتدا گفتیم کار این تگ اضافه کردن یک فایل ویدیویی به وب سایت می باشد . اما باید به این نکته توجه داشته باشیم که مرورگر های مختلف از جمله فایرفاکس و گوگل کروم و دیگر مرورگر ها نوع و یا پسوند خاصی از فایل های ویدیویی پشتیبانی خواهند کرد . جدول زیر نمایانگر این امر می باشد

Browser MP4 WebM Ogg
Internet Explorer 9+ YES NO NO
Chrome 6+ YES YES YES
Firefox 3.6+ NO YES YES
Safari 5+ YES NO NO
Opera 10.6+ NO YES YES

اما نحوه استفاده از تگ ویدیو در میان کد های وب سایت به صورت زیر می باشد

تگ video رو با صورت زیر می نویسیم :

<video width="320" height="240" poster="img1.jpg"  controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>

 

این قطعه کد باعث ایجاد یک پلیر و فیلم ویدیویی در سایت شما می شود . خصوصیت width , height تگ video طول و عرض پلیر ویدیو را مشخص خواهد کرد .

خصوصیت poster درون این تگ نیز مشخص کردن تصویر ابتدایی یا شروع ویدیو قبل از پخش آن نمایش داده می شود را تعیین می کند که به آدرس عکس مورد نظر شاره خواهد کرد که در اینجا عکس img1.jpg انتخاب شده است

خصوصیت بعدی این تگ نیز controls می باشد که تعیین کننده این است که ویدیو نمایش داده شده دارای تنظیماتی از قبیل محور زمان و یا میزان صدا و … باشد یا خیر

و اما به مهمترین قسمت این تگ یعنی تگ های درونی آن که با نام source می باشد می رسیم . همانطور که قبلا گفتیم مرورگر های مختلف از ویدیو هایی با پسوند های مختلف پشتیبانی می کنند که در جدول بالا نحوه پشتیبانی آن نمایان شده است . اما پرسش اصلی این است که ما چرا 3 بار از این تگ استفاده کرده ایم .

جواب آن بسیار ساده می باشد چون ما نمی دانیم که کاربر مورد نظر ما با کدام یک از مرورگر ها وارد سایت ما می شود مجبور هستیم که هر 3 فرمت استاندارد را ایجاد کرده و از طریق تگ source به تگ video اضافه کنیم , اما اضافه کردن این 3 تگ به این منظور نیست که مرورگر هر 3 ویدیو را بارگذاری کند که سرعت بارگذاری سایت شما کاهش یابد بلکه مرورگر ها با توجه به نوع فرمتی که پشتیبانی می کنند ویدیو مورد نظر را بارگذاری خواهند کرد .

اما برسیم به خصوصیات تگ source :
خصوصیت src تگ source اشاره به آدرس فایل ویدیو مورد نظر می کند که در اینجا ما در تگ اولین source آدرس movie.mp4 را قرار داده ایم و قسمت بعدی نیز خاصیت type این تگ می باشد که بسته به نوع فایل آدرس دهی شده مشخص می گردد که ما video/mp4 را وارد کرده ایم

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

این مقاله چقدر براتون مفید بود؟

از ۱ تا ۵ امتیاز بدید.

میانگین رتبه 1.5 / 5. تعداد رای : 2

تا حالا کسی رای نداده! اولین نفر شما باشید.

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 2 CSS / HTML , آموزش طراحی
لینک کوتاه مطلب : https://www.20script.ir/?p=796
کلمات کلیدی پست :
مطالب مرتبط
18,361دانلود قالب سایت شخصی کبیر به صورت HTML تاریخ : 2016/06/11
10,388اسکریپت بازی آنلاین HTML5 با نام Defense تاریخ : 2014/04/8
15,810دانلود قالب html5 بسیار حرفه ای Verti تاریخ : 2013/11/16
7,258اسکریپت مدیریت فایل های پروژه Uploadr تاریخ : 2015/12/3
10,890اسکریپت بازی آنلاین و مهیج Ninja Run تاریخ : 2017/08/3
9,636اسکریپت ساده مدیریت کاربران Zlogin نسخه 1.2 تاریخ : 2016/02/28
11,106رابط کاربری iMessage در 9 IOS با جی کوئری تاریخ : 2016/04/21
29,711قالب HTML وبسایت فروشگاهی فارسی MarketShop تاریخ : 2017/02/15
9,058پلیر صوتی با قابلیت نمایش لیست پخش به صورت HTML5 تاریخ : 2016/04/11
21,869دانلود قالب HTML رستوران و فست فود Cooker تاریخ : 2016/04/6
9,423قالب بسیار زیبا Halcyonic به صورت HTML5 تاریخ : 2013/11/29
20,293اسکریپت ویرایشگر آنلاین تصاویر Pixie نسخه 2.1.3 تاریخ : 2021/01/8
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
بیست اسکریپت
اسکریپت
profile
sourceforge
profile webmaster
profile check
checker list
checker
checker
upload file
تبلیغات