کاربر گرامی ، تمام فایلهای سایتپ رایگان میباشند اما جهت دانلود نیاز به عضویت دارید . عضویت  |  راهنما

آموزش افزودن ویدیو در html5 | تگ یا برچسب video

این مورد را ارزیابی کنید
(0 رای‌ها)
منتشرشده در آموزش html

پیشنهاد میکنیم قبل از شروع این آموزش مبحث قلبی را مطالعه فرمائید : آموزش افزودن صدا با تگ audio در html5 | افزودن آهنگ mp3 موسیقی به وب سایت

شروع آموزش html : جریان ویدئو در اینترنت چیز تازه ای نیست، تالش برای انجام چنین کاری به نیمه ی قرن بیستم برمی گردد. به خاطر پایین بودن پهنای باند شبکه ها و قدرت پایین CPU، هیچ موفقیتی حاصل نشد، تا اینکه Youtube در سال 2005 آغاز به کار کرد.

 اکنون با HTML5، می توانیم ویدئو را مانند یک عنصر داخلی، مانند <img>، قرار دهیم. طول، عرض و پوستر وجود دارند، طول و عرض سایز صفحه را مشخص می کنند و پوستر تنها یک فایل تصویر ثابت می باشد که قبل از اجرای فیلم روی صفحه قرار گرفته است.

 

چگونه؟

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

<video src="/rain.mp4" controls width="480" height="360"></ video> 

در واقع زندگی آنطوری نیست که ما فکر می کردیم باید باشد، خط ساده ی کد باال تنها در google chrome و apple safari کار می کند و حتی برای اجرای فیلم درapple safari باید مطمئن شوید که quick time در کامپیوتر شما نصب شده است.

 مشابه گرفتاری صوتی، یک فرمت جهانی برای ویدئو نداریم که همه ی مرورگرهای وب از آن پشتیبانی کنند، حداقل در زمان نگارش آن 13 دسامبر 2010

 در اینجا دوباره بازی پول مطرح می شود. H.264 یک مشکل همگانی است، فایرفاکس و اپرا خرید امتیاز آزاد یک کدک را پذیرفتند که Theora و WebM می باشد.( کدک VP8 )

آموزش video در html5

 

گوگل در ژانویه ی 2011 اعالم کرد که در ورژن آینده ی گوگل کروم از H.264 پشتیبانی نمی کند. به طور خالصه کد تک خطی ساده، همانطور که در باال توضیح دادم، عملی نمی باشد. شما حداقل باید دو منبع برای یک ویدئو تامین کنید.

<video controls width="480" height="288">
<source src="/media/html5iscool.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="/media/html5iscool.ogv" type='video/ogg; codecs="theora, vorbis"' />
<source src="/media/html5iscool.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>

 

نکات

 برای اینکه فایل ویدئوی خود را در H.264 رمزگشایی کنید، ممکن است تمایل داشته باشید HandBrake را امتحان کنید، که یک GPL مناسب ویک ابزار منبع باز می باشد. اگرمی خواهید تنها یک ویدئو را رمزگشایی کنید

تمایلی به نصب برنامه ای دیگر روی OS تقریبا بسته ی خود ندارید، می توانید فیلم خود را روی Youtube آپلود کنید. سپس Youtube برنامه ی شما را به فرمت 264 آپلود کرده و شما می توانید آن را از Youtube دانلود کنید.

 همانطور که برای فرمت های WEBM و Theora ممکن است Firefogg را )یک فایرفاکس پالگین است که حداقل دانلود را الزم دارد.( امتحان کنید.

آموزش افزودن ویدیو در html5

مرورگرهایی که در مورد HTML5 دارای معلومات کمتری هستند چطور؟

 اگر فکر می کنید که اجرای ویدئو برای سه دفعه سخت است، به مدت کمی طوالنی تر نفس خود را نگه دارید، زیرا قرار است برای تامین کاربرهای بیشتر که از مرورگرهای قدیمی تری مانند internet explorer 8 و یا پایین تراستفاده می کنند، بیشتر اذیت شوید.

 مایکروسافت internet explorer 9 Beta را در نوامبر 2010 آزاد کرد که HTML5 را نیز پشتیبانی می کند. اما برچسب <video> به عنوان نگارش هنوز پشتیبانی می شود. به هرحال شما مجبورید برای قرار دادن یک فلش پلیر در <object> به جلوتر بروید زیرا بیشتر کاربرها فلش پالگین را نصب کرده اند. من معتقدم که مایکروسافت در نهایت <video> را پشتیبانی می کند، چرا که همیشه برای اکثر کاربرها رسیدن به آخرین ورژن مرورگر زمان بر است.

<video controls width="320 " height="240">

<source src="/media/html5iscool.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="/media/html5iscool.ogv" type='video/ogg; codecs="theora, vorbis"' />
<source src ="media/html5iscool.webm" type='video/webm; codecs="vp8, vorbis"' />

<object width="320" height="240" type="application/x-shockwave-flash" data="media/flowplayer-3.2. 5.swf">
<param name=" movie" value="media/flowplayer-3.2.5.swf" />
<param name=" allowfullscreen" value="false" />
<param name="flashvars" value='config={"clip": {"url": "html5iscool.mp4", "autoPlay":false, "autoBuffering":true}}' />
</object>

</video>

 

پایان این بخش از آموزش

برای مطالعه بیشتر مباحث دیگر  این آموزش بر روی لینک روبرو کلیک نمائید : فهرست آموزش رایگان html5 سطح ساده تا پیشرفته

خواندن 216 دفعه
محسن محمد

با نگاهی گذرا به وب سایت های مشابه سایتپ , پی به تفاوت محصولات منتشر شده در سایتپ و این سایت ها خواهید برد .

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

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

www.mohssen.ir | این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید

مقالات آموزشی سایتپ

  • امکان جدید کامپوننت کاتو k2در مدیریت تگ ها یا برچسب ها
    امکان جدید کامپوننت کاتو k2در مدیریت تگ ها یا برچسب ها سلام جوملا دوست عزیز ، بسیار خوشحالیم که شما هم از این سیستم قدرتمند برای کسب و کار خود استفاده میکنید . یکی از مشکلات اساسی کار کردن با کامپوننت جوملا k2 برچسب گذاری برای مطالب سایت بوده است که خوشبختانه این مورد در جدیدترین نسخه k2 یعنی V2.10.3 به…
    آموزش جوملا خواندن 74 بار
  • آموزش افکت زیبای سورس کد ماوس هاور Css argyleink
    آموزش افکت زیبای سورس کد ماوس هاور Css argyleink زیبایی در قالب وب سایت ، مهمترین دلیل جذب کاربران جدید است . قصد داریم آموزش css سورس کدی را خدمتتان معرفی کنیم که میتواند تغییری هر چند ناچیز اما مهم در لینک های سایت شما ایجاد کند . با استفاده از این سورس کد css میتوانید براحتی یک ماوس…
    آموزش css خواندن 99 بار
  • مشکل دو زبانه کردن جوملا 3 در تگ html با خصوصیت rtl به ltr
    مشکل دو زبانه کردن جوملا 3 در تگ html با خصوصیت rtl به ltr سلام به جوملا دوستان عزیز، در حال پیاده سازی یک وب سایت چند زبانه بودیم که با یک مشکل عجیب مواجه شدیم. ما زمانی که سیستم جوملا را چند زبانه کردیم ، برای ایجاد خصوصیت های LTR و RTL که بتوانیم به هر کدام از زبان ها یک STYLE مختلف…
    آموزش جوملا خواندن 191 بار
  • آموزش اجرا و نمایش متن در بوم نقاشی html5
    آموزش اجرا و نمایش متن در بوم نقاشی html5 پیشنهاد میکنیم قبل از شروع این آموزش مبحث قلبی را مطالعه فرمائید : آموزش طراحی تصویر در بوم نقاشی html5 شروع آموزش : کلمات جادویی برای چاپ متن در بوم نقاشی عبارتند از Fillstyle ،Strokestyle ،Font ،TextBaseline و در انتها filltext و stroketext. <div> <canvas id="c6" width="600" height="200" style="border:solid 1px…
    آموزش html خواندن 75 بار
نمایش تمام مقالات سایتپ - کلیک نمائید