با عرض سلام خدمت شما ، کاربران عزیز ، خوبین؟ شاد هستید ؟ با اموزش امروز ما که در مورد افزودن ویدیو به سایت خود است همراه باشید.جریان ویدئو در اینترنت چیز تازه ای نیست، تلاش برای انجام چنین کاری به نیمه ی قرن بیستم برمی گردد. به خاطر پایین بودن پهنای باند شبکه ها و قدرت پایین CPU، هیچ موفقیتی حاصل نشد، تا اینکه Youtube در سال ۲۰۰۵ آغاز به کار کرد.
اکنون با HTML5، می توانیم ویدئو را مانند یک عنصر داخلی، مانند <img>، قرار دهیم. طول، عرض و پوستر وجود دارند، طول و عرض سایز صفحه را مشخص می کنند و پوستر تنها یک فایل تصویر ثابت می باشد که قبل از اجرای فیلم روی صفحه قرار گرفته است.
چگونه؟
کد اجرای فیلم از صفحه ی وب شما، می تواند به سادگی خط زیر باشد.
<video src=”rain.mp4″ controls width=”480″ height=”360″></video>
در واقع زندگی آنطوری نیست که ما فکر می کردیم باید باشد، خط ساده ی کد بالا تنها در google chrome و apple safari کار می کند و حتی برای اجرای فیلم درapple safari باید مطمئن شوید که quick time در کامپیوتر شما نصب شده است.
مشابه گرفتاری صوتی، یک فرمت جهانی برای ویدئو نداریم که همه ی مرورگرهای وب از آن پشتیبانی کنند، حداقل در زمان نگارش آن (۱۳ دسامبر ۲۰۱۰).
در اینجا دوباره بازی پول مطرح می شود. H.264 یک مشکل همگانی است، فایرفاکس و اپرا خرید امتیاز آزاد یک کدک را پذیرفتند که Theora و WebM می باشد (کدکVP8).
Browser
H.264+
AAC+
MP4
WebM
Theora
+Vorbis
+Ogg
Mozzila Firefox 3.6
✓
✓
Opera 10.63
✓
✓
Google Chrome 8.0
✓
✓
✓
Apple Safari 5.0.3 (with QuickTime)
✓
Microsoft IE 9 Beta
✓
✓
گوگل در ژانویه ی ۲۰۱۱ اعلام کرد که در ورژن آینده ی گوگل کروم از 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 برنامه ی شما را به فرمت H.264 آپلود کرده و شما می توانید آن را از Youtube دانلود کنید.
همانطور که برای فرمت های WEBM و Theora ممکن است Firefogg را (یک فایرفاکس پلاگین است که حداقل دانلود را لازم دارد.) امتحان کنید.
ویژگی های ویدئو
Attribute
Value
Description
controls
ویژگی *Boolean
اگر می خواهید کنترل اجرا کننده ی مرورگر داخلی در اطراف باشد، کنترل ها را مشخص کنید.
autoplay
ویژگی *Boolean
اگر این ویژگیوجود داشته باشد، مرورگر فیلم شما را بدون پرسیدن اجازه از ویزیتور، اجرا می کند.
loop
ویژگی *Boolean
فیلم شما را تکرار می کند.
src
url
url فایل تصویری شما
preload
none | metadata | auto
این ویژگی پیش ازاین با عنوان autobuffer شناخته می شد و مانند کنترل ها یک ویژگی Boolean بود.
None –فایل ویدئو را به طور خودکار بافر نکن.
Metadata –فقط متادیتای فیلم را بافر کن.
Auto –فایل فیلم را قبل از اجرا بافر کن.
width
عرض به پیکسل
عرض پخش کننده ی فیلم.
height
طول به پیکسل
طول پخش کننده ی فیلم.
poster
url یک فایل تصویر
اگر وجود داشته باشد، تا زمان دانلود شدن اولین فریم فیلم تصویر پوستر را نشان می دهد.
مرورگرهایی که در مورد HTML5 دارای معلومات کمتری هستند چطور؟
اگر فکر می کنید که اجرای ویدئو برای سه دفعه سخت است، به مدت کمی طولانی تر نفس خود را نگه دارید، زیرا قرار است برای تامین یوزرهای بیشتر که از مرورگرهای قدیمی تری مانند internet explorer 8 و یا پایین تراستفاده می کنند، بیشتر اذیت شوید.
مایکروسافت internet explorer 9 Beta را در نوامبر ۲۰۱۰ آزاد کرد که 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-۳٫۲٫۵٫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>
