Notice: Undefined variable: this in /home/dimarini/public_html/libraries/src/Application/CMSApplication.php on line 441

Код за HTML5 видео и аудио

С използване на HTML5 елемента <video> се инсталира видео в уеб сайта. Когато браузъра поддържа HTML5 се използва елемента <video>. Няма Flash - няма проблеми. Когато HTML5 елемента <video> не се поддържа от браузъра се превключва автоматично към Adobe Flash. За случаите когато нищо не сработва се използва заместващо изображение, като потребителя може да свали видеото с използване на предоставените линкове. Когато потребителят няма инсталиран Flash, не се появява съобщение за неговото инсталиране. Това прави използването на HTML5 видео коренно различно от инсталираните Flash видео файлове. Всичко това се прави без JavaScript и изисква два видео файла с различен декодер, един ogg файл и един mp4 файл. Като опция, може да се използва и webm файл.

Безплатен инструмент за преобразуване на видео файлове е Any Video Converter.

За правилното възпроизвеждане на медиата е необходимо използването на съответния вид MIME (Multipurpose Internet Mail Extensions). Това е интернет стандарт, чрез който се разширява формата на email.

Firefox няма да може да възпроизведе видео с формат ogg ако типа на MIME е грешен. За да се избегне това е необходимо в .htaccess файла да се запишат инструкциите, които са дадени по-долу:


           AddType video/ogg.ogv 
AddType video/mp4.mp4
AddType video/webm .webm

По-долу ще разгледаме пълният сорс код за представяне на видео в уеб страници с използване на HTML5 елемента <video>.


<!DOCTYPE html>
<html>
   <body>

        <video width="512" height="314" controls>
	<source src="/html5/giggle-bellies.mp4"  type="video/mp4" />
	<source src="/html5/giggle-bellies.ogv"  type="video/ogg" />
	<object width="512" height="314" type="application/x-shockwave-flash" data="flash.swf">
		<param name="movie" value="flash.swf" />
		<param name="flashvars" value="controlbar=over&image=/lessons/html5/poster-image.jpg&file=video.mp4" />
		<img src="/lessons/html5/poster-image.jpg" width="512" height="314" alt="--Заглавие--"
		title="Няма възможност за възпроизвеждане, моля свалете видео файла чрез линковете по-долу!" />
	</object>
        </video>
<p>	<strong>Свалете видеото:</strong>
Затворен формат:
<a href="/video_mp4.zip">"mp4"</a> Отворен формат:
<a href="/video_ogv.zip">"ogg"</a> </p> </body> </html>

Свалете видеото: Затворен формат: "mp4" Отворен формат: "ogg"


Опростеният вариант на програмата е:


<!DOCTYPE html> 
<html> 
<body> 
<div align="center"> 
  <video width="600" height="368" controls>
    <source src="/lessons/html5/giggle-bellies.mp4" type="video/mp4" />
    <source src="/lessons/html5/giggle-bellies.ogv"  type="video/ogg" />
    Вашият браузър не поддържа елемента HTML5 video!
  </video>
</div> 
</body> 
</html> 

В браузъра горния пример ще изглежда така:



До настоящият момент не съществуваше стандарт за възпроизвеждане на аудио файлове в уеб страница, като за целта се използват плагини, примерно на основата на flash. Освен това, различните браузъри могат да използват различни плагини. В езика HTML5 се дефинира нов елемент, с който се определя стандартен начин за въвеждане на аудио файлове в уеб страница с използване на елемента <audio>.За възпроизвеждане на аудио файл в уеб страница чрез HTML5 е необходима следната програмка:


<!DOCTYPE html>
<html>
<body>
<div align="center">
<audio controls="controls">
  <source src="/giggle-bellies.ogg" type="audio/ogg" />
  <source src="/giggle-bellies.mp3" type="audio/mpeg" />
Вашият браузър не поддържа елемента HTML 5 <audio>!
</audio>
</div>
</body>
</html>

В браузъра горната програмка ще изглежда така: