طراحی و بهینه سازیمشاهده

آخرین ارسال های تالار مشاهده انجمن

عنوانپاسخبازدیدتوسط
iconforumچک سئو سایت5116hosseinhotmail
iconforumفروش دامنه lilya.ir03hosseinhotmail
iconforumراستچین کردن قالب html326hosseinhotmail
iconforumفیلتر حرفه ای ووکامرس592hosseinhotmail
iconforumدرخواست کد html بخش تیم ما126hosseinhotmail
iconforumدرخواست راهنمایی545hosseinhotmail
iconforumمشکل در آپدیت نشدن مطالب ایندکس شده و ایندکس نشدن مطالب جدید451hosseinhotmail
iconforumسئو سایت اینتکس332hosseinhotmail
iconforumسایت جدید...16hosseinhotmail
iconforumدرخواست اسکریپت سایت بازنشر740hosseinhotmail
iconforumمدیریت محتوای فروشگاهی228hosseinhotmail

آموزش وردپرس WordPressآموزش وردپرس WordPress سایت

آموزش جی کوئری jQueryآموزش جی کوئری jQuery جاوا اسکریپت

آموزش انگولار جی اس Angular JS آموزش انگولار جی اس 2 AngularJS 

آموزش اچ تی ام ال HTML5 CSS3آموزش HTML5 و CSS3 اچ تی ام ال 5

آموزش پی اچ پی PHPآموزش پی اچ پی PHP پک 1 برنامه نویسی وب

آموزش سئو SEO آموزش سئو سایت و وردپرس SEO گوگل 

آموزش سوئیفت SWIFT آموزش سوئیفت Swift برنامه نویسی اپل

آموزش برنامه نویسی اندروید استودیو  آموزش برنامه نویسی اندروید استودیو  

آموزش زامارین Xamarinآموزش زامارین Xamarin برنامه نویسی موبایل

هاست درگاه پرداخت

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

CSS / HTML , آموزش طراحی
آموزش قرار دادن تگ video در HTML5Reviewed by جواد on Oct 27Rating: 4.5آموزش قرار دادن تگ video در HTML5در اولین قسمت از سری آموزش های دوران طراحی قصد داریم که به معرفی و نحوه استفاده از تگ 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
در ادامه بخوانید  اسکریپت رسم نمودار Highcharts

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

تگ 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 می باشند .


به کانال تلگرام بیست اسکریپت بپیوندید !

دانلود

مطلب مفیدی بود ؟
نویسنده : admin تاریخ : 1392/08/5 2 CSS / HTML , آموزش طراحی

لینک کوتاه مطلب : http://www.20script.ir/?p=796

کلمات کلیدی پست :
درگاه پرداخت
مطالب مرتبط
729اسکریپت ویرایشگر آنلاین تصاویر Pixie نسخه 1.7 تاریخ : 1395/10/18
5,327نمایش متن به صورت اسلاید تاریخ : 1392/08/7
2,484اسکریپت بازی آنلاین نگه داشتن موقعیت Hold Position تاریخ : 1395/07/21
7,658افزونه پخش آنلاین فایل های صوتی ZoomSounds برای وردپرس تاریخ : 1395/08/8
3,179اسکریپت مینیمال آپلود فایل Droply تاریخ : 1395/05/21
2,487اسکریپت بازی آنلاین HTML5 با نام Defense تاریخ : 1393/01/19
2,871افزونه طراحی محصول فانتزی Fancy Product Designer برای ووکامرس تاریخ : 1395/02/17
4,296دانلود قالب شخصی Water Mobile به صورت HTML تاریخ : 1394/06/1
675قالب HTML وبسایت فروشگاهی فارسی MarketShop تاریخ : 1395/11/27
3,919دانلود قالب html5 بسیار حرفه ای Verti تاریخ : 1392/08/25
4,190دانلود قالب HTML مترو و چندمنظوره STYLISH تاریخ : 1395/02/1
1,998رابط کاربری iMessage در 9 IOS با جی کوئری تاریخ : 1395/02/2
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب