در این آموزش به صورت مختصر در مورد قرار دادن تگ video و تگ audio در فایل های HTML توضیح می دهیم.
قبل از HTML5 هیچ استانداردی برای اجرای فایل های صوتی و ویدئویی در صفحات وب وجود نداشت. برای اجرای این فایل ها از ابزارهایی مثل real palyer و falsh player استفاده می شد.
استفاده از این گونه ابزارها چندین مشکل داشت، اصلی ترین مشکل این روش این بود که باید پلاگین flash player بر روی مرورگر شما نصب شده باشد و ورژن آن به روز باشد تا فایل صوتی را اجرا کند.
بعدها برای قرار دادن فایل های صوتی و ویدئویی در html5 استانداردهایی به وجود آمد و با استفاده از تگ audio و تگ video قابلیت پخش صوت و ویدئو امکان پذیر شد.
تگ audio
المان <audio> در HTML5 این امکان را به ما می دهد که فایل های صوتی را در موقعیت های مورد نظر خود در صفحه جایگذاری کنیم. دو روش برای این کار وجود دارد:
۱) در روش اول از ویژگی src استفاده می شود:
<audio src="audio1.mp3" controls> Audio element not supported by your browser </audio>
متنی که بین تگ <audio> و <audio/> نوشته می شود، در صورتی که فایل صوتی توسط مرورگر پشتیبانی نشود، نمایش داده می شود.
۲) در روش دوم از المان <source> درون تگ audio استفاده می شود:
<audio controls> <source src="audio1.mp3" type="audio/mpeg"> <source src="audio1.ogg" type="audio/ogg"> </audio>
چندین المان <source> می توانند به فایل های متفاوت صوتی لینک شوند. مرورگر از اولین فرمتی که شناسایی کند، استفاده می کند.
یک تگ audio می تواند یک پخش کننده صوت را در مرورگر ایجاد نماید.
خصوصیات المان <audio>
controls: تعیین می کند که کنترل های پخش کننده صوت باید نمایش داده شوند. (مانند دکمه های Play / Pause)
autoplay: زمانی که این ویژگی استفاده می شود، صوت به محض بارگذاری شدن صفحه به صورت خودکار پخش می شود.
<audio controls autoplay>
loop: در صورت استفاده از این خصوصیت، فایل صوتی هر بار پس از اتمام به صورت خودکار دوباره پخش می شود.
<audio controls autoplay loop>
سه فرمت پشتیبانی شده از فایل های صوتی، MP3، WAV و OGG می باشند.
تگ video
تگ <video> شبیه تگ <audio> می باشد. شما می توانید URL منبع ویدئو را درون تگ video قرار داده و یا با استفاده از ویژگی <source> درون تگ ویدئو بگذارید:
<video controls> <source src="video1.mp4" type="video/mp4"> <source src="video1.ogg" type="video/ogg"> video is not supported by your browser </video>
شباهت دیگری که در قرار دادن فایل های صوتی و ویدئویی در html5 وجود دارد، این است که فرمت های مختلف آن ها توسط تمام مرورگرهای اصلی پشتیبانی نمی شود و اولین فرمتی که توسط مرورگر پشتیبانی شود، اجرا می شود.
در تگ<video>نیز ویژگی های controls، autoplay و loop استفاده می شود؛ دقیقاْ به همان منظوری که در تگ<audio> مورد استفاده قرار می گیرند.
سه فرمت پشتیبانی شده از فایل های ویدئویی MP4، WebM و OGG می باشند.
دیدگاه بگذارید