1 / 16

دانشگاه صنعتی خواجه نصیرالدین طوسی دانشكده مهندسي برق و کامپیوتر صوت و تصویر در HTML5 ارایه:

دانشگاه صنعتی خواجه نصیرالدین طوسی دانشكده مهندسي برق و کامپیوتر صوت و تصویر در HTML5 ارایه: صباح نعمتی ملک 8811543. بر چسب video و audio رفتار مشابهی با هم دارند. رایج ترین راه برای اضافه کردن صوت و تصویربه صفحات وب استفاده از افزونه ی flash player است.

byrd
Download Presentation

دانشگاه صنعتی خواجه نصیرالدین طوسی دانشكده مهندسي برق و کامپیوتر صوت و تصویر در HTML5 ارایه:

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. دانشگاه صنعتی خواجه نصیرالدین طوسی دانشكده مهندسي برق و کامپیوتر صوت و تصویر در HTML5 ارایه: صباح نعمتی ملک 8811543

  2. بر چسب videoوaudio رفتار مشابهی با هم دارند. رایج ترین راه برای اضافه کردن صوت و تصویربه صفحات وب استفاده از افزونه ی flash player است. تا قبل از ارایه HTML5 هیچ راه استانداردی برای اضافه کردن فیلم به صفحه وب وجود نداشت و با ارایه بر چسبهای VIDEOوAUDIO در HTML5این مشکل بر طرف شد.

  3. کد نویسی • ساده ترین راه برای اضافه کردن برچسب VIDEO به صفحه وب درHTML5 استفاده از این کد است: • <video src=“example.webm”></video> • این کد حداقل کد مورد نیاز برای استفاده از قابلیت پیوست فیلم به صفحه وب است. • برای برچسبVIDEO نیز مانند بر چسب img باید از خصیصه های width و height استفاده کنید: • <video src=“example.webm” width=“375”height=“280”> </video>

  4. فعال کردن کنترل های بومی خصیصه controls امکاناتی مانند توقف و جلو وعقب بردن فیلم را در اختیار کاربر قرار می دهد. <video src=“example.webm”width=‘375’height=‘280’controls> </video>

  5. خصیصه ی : autoplay این خصیصه به مرور گر می گوید به محض دریافت فیلم پخش آن را شروع کند. <video src=‘example.webm’width=‘375’height ‘280’controls autoplay ></video> خصیصه ی loop : این خصیصه به مرور گر می گوید به محض اتمام فیلم آن را دوباره از اول پخش کند. <video src =‘example.webm’ width=‘375’height=‘280’ controls autoplayloop></video>

  6. خصیصه ی preload • این خصیصه یکی از سه مقدار زیر را قبول میکند: • auto:این مقدار مشخص میکند که فیلم و metadata مربوط به فیلم باید قبل از پخش فیلم بر روی سیستم کاربر بار گزاری شود. • None:این مقدار مشخص میکند تا زمانی که کاربر دکمه پخش را نفشرده است فیلم نباید دریافت شود. • Metadata:اطلاعات metadata دریافت می شود در حالیکه خود فیلم با فشردن دکمه پخش توسط کاربر دریافت میشود.

  7. خصیصه ی poster • زمانیکه برای دیدن یک فیلم به سایتی مراجعه میکنید اغلب یک فریم از فیلم مورد نظر را میبینید که ثابت است و با کلیک بر روی آن فیلم برای شما پخش خواهد شد. • <video src =‘example.webm’width=‘375’ height =‘280’ poster =“teaser.jpg” controls></video>

  8. خصیصه ی audio • این خصیصه وضعیت فایل صوتی مربوط به عنصر video را کنترل میکند. • <video src =‘example.webm’ width=‘375’height=‘280’ poster=‘teaser.jpg’ controls audio=‘muted’></video>

  9. پشتیبانی از چندین فرمت تصویری مختلف • استفاده از بر چسبsource در میان بر چسب video به شما اجازه میدهد که چند فایل با فرمت های متفاوت را به طور همزمان به صفحه اضافه کنید. • <source src=“example.mp4”type=‘video/mp4’> • <source src=“example.webm” type=‘video/webm’> • <source src=“example.ogv” type=‘video/ogv’>

  10. تکلیف اینترنت اکسپلورر 6 تا 8 چه می شود؟ • سه فرمت نام برده شده تمامی مرورگرهای مدرن را پوشش میدهد. • برای اینکه بتوانیم فایل های تصویریمان را در اختیار اینترنت اکسپلورر 6 تا 8 قرار دهیم،فایل های تصویریمان را با فرمت فلش در برچسب videoقرار می دهیم.

  11. Index.html(excerpt) <video width=‘375’ height=‘280’ poster=‘teaser.jpg’ audio=‘muted’> <source src=“example.mp4”type=‘video/mp4’> <source src=“example.webm” type=‘video/webm’> <source src=“example.ogv” type=‘video/ogv’> <!—fallback to flash:--> <object width=‘375’ height=‘280’ type=‘application/x-shockwave-flash’ data=‘mediaplayer-5.5/player.swf’> . . .

  12. ادامه <param name=‘movie’value =‘mediaplayer-5.5/player.swf’> <param name=‘allowfullscreen’value =‘true’> <param name=‘wmode’value =‘transparent’> <param name=‘flashvars’ Value=‘controlbar=over&amp;image=images/ Teaser.jpg&amp;file=example.mp4’> <!- -fallback image- - >

  13. ادامه <imgsrc=‘teaser.jpg’width=‘375’ height=‘280’ alt=“” title=‘no video playback capabilities’> </object> </video>

  14. تکلیف صوت چیست؟ • همانند عنصرvideo ،خصیصه های loop, autoplay, preload, controls را میتوانید در برچسب audio نیز به کار برید. • برچسب audio نیز میتواند برچسب های source را همانند برچسب video در خود جای دهد. • عناصر چند رسانه ای در html5 به شما اجازه میدهند که از عنصر trackبرای نمایش عنوان یا زیرنویس برای فیلم در حال پخش ،استفاده کنید. • <video src=‘brave.webm’> <track kind=‘subtitles’ src=‘brave.en.vtt’ srclang=‘en’ label=‘english’> <track kind=‘captions ’ src=‘brave.en.vtt’ srclang=‘en’ label=‘english for the hard of hearing’>

  15. ادامه <track kind=‘subtitles’ src=‘brave.fr.vtt’ srclang=‘fr’ label=‘french’> <track kind=‘subtitles’ src=‘brave.de.vtt’ srclang=‘de’ label=‘deutsch’> </video>

  16. فیلم و صوت به طور ذاتی توسط مرورگر پشتیبانی می شوند و دیگر نیازی به افزونه جانبی مانند فلش نیست.به همین دلیل استفاده از قابلیت های صوتی و تصویری در html5 برای طراحان وب مناسب است.

More Related