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

آموزش Video در HTML 5

دوره های مرتبط با این مقاله

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

چگونه؟

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

                    <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).

Theora
+Vorbis
+Ogg
WebM
H.264+
AAC+
MP4
Browser
Mozzila Firefox 3.6
Opera 10.63
Google Chrome 8.0
Apple Safari 5.0.3 (with QuickTime)
Microsoft IE 9 Beta

گوگل در ژانویه ی 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 برنامه ی شما را به فرمت H.264 آپلود کرده و شما می توانید آن را از Youtube دانلود کنید.
همانطور که برای فرمت های WEBM و Theora ممکن است Firefogg را (یک فایرفاکس پلاگین است که حداقل دانلود را لازم دارد.) امتحان کنید.

ویژگی های ویدئو

Description
Value
Attribute
اگر می خواهید کنترل اجرا کننده ی مرورگر داخلی در اطراف باشد، کنترل ها را مشخص کنید.
ویژگی *Boolean
controls
اگر این ویژگیوجود داشته باشد، مرورگر فیلم شما را بدون پرسیدن اجازه از ویزیتور، اجرا می کند.
ویژگی *Boolean
autoplay
فیلم شما را تکرار می کند.
ویژگی *Boolean
loop
url فایل تصویری شما
url
src
این ویژگی پیش ازاین با عنوان autobuffer شناخته می شد و مانند کنترل ها یک ویژگی Boolean بود.
None –فایل ویدئو را به طور خودکار بافر نکن.
Metadata –فقط متادیتای فیلم را بافر کن.
Auto –فایل فیلم را قبل از اجرا بافر کن.
none | metadata | auto
preload
عرض پخش کننده ی فیلم.
عرض به پیکسل
width
طول پخش کننده ی فیلم.
طول به پیکسل
height
اگر وجود داشته باشد، تا زمان دانلود شدن اولین فریم فیلم تصویر پوستر را نشان می دهد.
url یک فایل تصویر
poster

مرورگرهایی که در مورد 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>‎
  • 5644
  •    2468
  • تاریخ ارسال :   1394/07/27

دانلود PDF دانلود فیلم آموزشی دانلود فیلم آموزشی 2 دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
آموزش Video در HTML 5
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

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

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .