How to put video in html

How to put video in html

HTML Video

The HTML element is used to show a video on a web page.

Example

The HTML Element

To show a video in HTML, use the element:

Example

How it Works

The controls attribute adds video controls, like play, pause, and volume.

It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the video loads.

The element allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format.

The text between the and tags will only be displayed in browsers that do not support the element.

HTML Autoplay

To start a video automatically, use the autoplay attribute:

Example

Note: Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.

Add muted after autoplay to let your video start playing automatically (but muted):

Example

Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Element
4.09.03.54.010.5

HTML Video Formats

There are three supported video formats: MP4, WebM, and Ogg. The browser support for the different formats is:

BrowserMP4WebMOgg
EdgeYESYESYES
ChromeYESYESYES
FirefoxYESYESYES
SafariYESYESNO
OperaYESYESYES
File FormatMedia Type
MP4video/mp4
WebMvideo/webm
Oggvideo/ogg

The HTML DOM defines methods, properties, and events for the element.

This allows you to load, play, and pause videos, as well as setting duration and volume.

There are also DOM events that can notify you when a video begins to play, is paused, etc.

Example: Using JavaScript

Play/Pause Big Small Normal

Your browser does not support HTML5 video.

For a full DOM reference, go to our HTML Audio/Video DOM Reference.

HTML5 Video β€” ΠΎΡ‚ А Π΄ΠΎ Π―

ПишСм код

video >
source src =»movie.mp4″ type =’video/mp4; codecs=»avc1.42E01E, mp4a.40.2″‘ />
source src =»movie.webm» type =’video/webm; codecs=»vp8, vorbis»‘ />
video > >

Π‘Π°ΠΌΠΎ собой Π΅ΡΡ‚ΡŒ ΠΈ Π±ΠΎΠ»Π΅Π΅ простой Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ вставки Π²ΠΈΠ΄Π΅ΠΎ:

ΠžΡΡ‚Π°Π΅Ρ‚ΡΡ надССтся, Ρ‡Ρ‚ΠΎ Π² блиТайшСм Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΌ для всСх Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² Π±ΡƒΠ΄Π΅Ρ‚ достаточно ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚Π°ΠΊΠΎΠ³ΠΎ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π°.

Если ΠΆΠ΅ Π²Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с Google App Engine, Ρ‚ΠΎ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π²ΠΈΠ΄Π΅ΠΎ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° Π² Ρ„Π°ΠΉΠ» app.yaml Π²Π°ΠΌ Π½Π°Π΄ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ запись Π²ΠΈΠ΄Π°:
— url: /(.*\.ogv)
static_files: videos_folder/\1
mime_type: video/ogg
upload: videos_folder/(.*\.ogv)

И Π΅Ρ‰Π΅ ΠΎΠ΄Π½Π° ΠΎΡ‡Π΅Π½ΡŒ ваТная Π²Π΅Ρ‰ΡŒ, ΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ стоит ΡƒΠΏΠΎΠΌΡΠ½ΡƒΡ‚ΡŒ. Надо ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ значСния ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° type Π² тэгС source, для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ автоматичСски смог Ρ€Π°ΡΠΏΠΎΠ·Π½Π°Ρ‚ΡŒ Π½ΡƒΠΆΠ½Ρ‹ΠΉ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ ΠΈ ΠΏΠΎΠ΄Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ΠΈΠΌΠ΅Π½Π½ΠΎ Π΅Π³ΠΎ, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ.

Π€ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Π²ΠΈΠ΄Π΅ΠΎ

На ΠΌΠΎΠΌΠ΅Π½Ρ‚ написания ΡΡ‚Π°Ρ‚ΡŒΠΈ (август 2010) Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΌ ΠΈ ΠΏΠΎΠ»Π½Ρ‹ΠΌ ΠΊΠΎΠ΄ΠΎΠΌ, для вставки Π²ΠΈΠ΄Π΅ΠΎ являСтся ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ:

Буря восторга ΠΏΡ€ΠΎΠ½Π΅ΡΠ»Π°ΡΡŒ ΠΏΠΎ ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Ρƒ, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ΡˆΠ΅Π» Π½ΠΎΠ²Ρ‹ΠΉ IE 9. Однако ΠΏΠΎΠΊΠ° Π΅ΡΡ‚ΡŒ счастливыС ΠΎΠ±Π»Π°Π΄Π°Ρ‚Π΅Π»ΠΈ IE 6, ΠΏΡ€ΠΈΡ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ ΠΈΠ·ΠΎΡ‰Ρ€ΡΡ‚ΡŒΡΡ. ΠŸΠ°Ρ€Π° Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Ρ… Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ.

Chrome Frame

ΠŸΡ€Π΅ΠΈΠΌΡƒΡ‰Π΅ΡΡ‚Π²ΠΎ использования ΠΏΠ»Π°Π³ΠΈΠ½Π° Chrome Frame состоит Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½ Ρ€Π°Π·, Π° всС Π½ΠΎΠ²Ρ‹Π΅ Ρ„ΠΈΡˆΠΊΠΈ HTML, JavaScript ΠΈ CSS Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒΡΡ Π±Π΅Π· ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π»ΠΈΠ±ΠΎ обновлСния. Π­Ρ‚ΠΎΡ‚ ΠΏΠ»Π°Π³ΠΈΠ½ являСтся спасСниСм для Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Π·Π°ΠΌΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΈ Ρ‚Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ врСмя Π½Π° написаниС IE-совмСстимой вСрсии сайта. (НСмного спорноС заявлСниС, особСнно Ссли Π²ΡΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠΉ ΡˆΡƒΠΌ Π±Ρ‹Π» Π² сСти, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ΡˆΠ΅Π» этот ΠΏΠ»Π°Π³ΠΈΠ½.)

Назад к Flash

ШифруСмся, ΠΈΠ»ΠΈ Π½Π°Π΄ΠΎ ΠΏΠ΅Ρ€Π΅ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π²ΠΈΠ΄Π΅ΠΎ

Плюшки

Π’Π°ΠΊ ΠΊΠ°ΠΊ Π²ΠΈΠ΄Π΅ΠΎ ΠΌΡ‹ встраиваСм ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½Ρ‹ΠΌ html способом, Ρ‚ΠΎ Π·Π½Π°Ρ‡ΠΈΡ‚ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ всю ΠΌΠΎΡ‰ΡŒ Π²Π΅Π±Π° для Π½Π°ΡˆΠΈΡ… Ρ†Π΅Π»Π΅ΠΉ. НиТС ΠΎΠΏΠΈΡˆΡƒ Π² Ρ‡Π΅ΠΌ это ΠΌΠΎΡ‰ΡŒ состоит. (К соТалСнию ΠΎΠΏΡΡ‚ΡŒ Π±Π΅Π· наглядных ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ², Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ ΠΈΠ΄Π΅ΠΌ Π½Π° сайт ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»Π°)

Video + HTML

Для Π½Π°Ρ‡Π°Π»Π°, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ HTML Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹. К ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ tabindex ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Π·Π°Π΄Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. Π•ΡΡ‚ΡŒ ΠΏΠ°Ρ€Π° ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΅ΡΡ‚ΡŒ ΠΈ Π² Π°ΡƒΠ΄ΠΈΠΎ, это loop ΠΈ autoplay. Π’ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π΅ poster ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ, которая Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π²ΠΎ врСмя Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Π²ΠΈΠ΄Π΅ΠΎ. Π£ΠΊΠ°Π·Π°Π² controls ΠΌΡ‹ скаТСм Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ β€” Β«Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉ Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Ρ‹, ΠΌΡ‹ Ρ‚ΡƒΡ‚ Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ ΠΏΡ€ΠΈΠ΄ΡƒΠΌΠ°Π»ΠΈΒ». Ну ΠΈ Π΅Ρ‰Π΅ Π΅ΡΡ‚ΡŒ preload, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт ΠΏΠΎΠ΄Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ Π²ΠΈΠ΄Π΅ΠΎ Ρ„ΠΎΠ½ΠΎΠΌ. Π’ ΠΈΡ‚ΠΎΠ³Π΅ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ Π½Π΅Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅:

video poster =»star.png» autoplay loop controls tabindex =»0″ >
source src =»movie.webm» type =’video/webm; codecs=»vp8, vorbis»‘ />
source src =»movie.ogv» type =’video/ogg; codecs=»theora, vorbis»‘ />
video >

video poster =»star.png» autoplay =»autoplay» loop =»loop» controls =»controls» tabindex =»0″ >
source src =»movie.webm» type =’video/webm; codecs=»vp8, vorbis»‘ />
source src =»movie.ogv» type =’video/ogg; codecs=»theora, vorbis»‘ />
video >

Video + JS

Вэг video ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ‚ рядом ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ², ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ ΠΌΠΎΠΆΠ½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ яваскрипта. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π½Π° сайтС W3.

Для Π½Π°Ρ‡Π°Π»Π°, ΠΊΠ°ΠΊ ΠΈ любой html ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚, Π²ΠΈΠ΄Π΅ΠΎ Ρ€Π΅Π°Π³ΠΈΡ€ΡƒΠ΅Ρ‚ Π½Π° всС стандартныС события, ΠΊΠ°ΠΊ Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΌΡ‹ΡˆΠΈ, пСрСтаскиваниС ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅. Но ΠΏΠΎΠΌΠΈΠΌΠΎ Π½ΠΈΡ… ΠΎΠ½ΠΎ ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ‚ рядом собствСнных, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΡ… ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ, ΠΊΠΎΠ³Π΄Π° Π²ΠΈΠ΄Π΅ΠΎ Π±Ρ‹Π»ΠΎ Π·Π°ΠΏΡƒΡ‰Π΅Π½ΠΎ, остановлСно ΠΈ ΠΏΡ€ΠΎΡ‡Π΅Π΅. Π£ΠΆΠ΅ с ΠΌΠΎΠΌΠ΅Π½Ρ‚Π° Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Π²ΠΈΠ΄Π΅ΠΎ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ†Π΅Π»Ρ‹ΠΉ ряд событий, связанных ΠΊΠ°ΠΊ с Ρ€Π°Π±ΠΎΡ‚ΠΎΠΉ ΠΏΠΎ сСти (loadstart, progress, suspend, abort, error, emptied, stalled), Ρ‚Π°ΠΊ ΠΈ с Π±ΡƒΡ„Π΅Ρ€ΠΈΠ·Π°Ρ†ΠΈΠ΅ΠΉ (loadedmetadata, loadeddata, waiting, playing, canplay, canplaythrough). ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ воспроизвСдСниС Π²ΠΈΠ΄Π΅ΠΎ Π² Ρ‚ΠΎΡ‚ ΠΌΠΎΠΌΠ΅Π½Ρ‚, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΎ Π³ΠΎΡ‚ΠΎΠ²ΠΎ ΠΊ ΠΏΡ€ΠΎΠΈΠ³Ρ€Ρ‹Π²Π°Π½ΠΈΡŽ:

Π’ сСти Π²Ρ‹Π»ΠΎΠΆΠ΅Π½Π° ΡƒΠΆΠ΅ появились ΡƒΠΆΠ΅ ΠΈ кастомныС настройки, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠ΅ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒΡŽ воспроизвСдСния ΠΈΠ»ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ взаимодСйствиС ΠΌΠ΅ΠΆΠ΄Ρƒ 2 Π²ΠΈΠ΄Π΅ΠΎ.

Video + CSS

Π’ΡƒΡ‚ практичСски Π±Π΅Π· ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠ΅Π² β€” Π²ΠΈΠ΄Π΅ΠΎ ΠΊΠ°ΠΊ элСмСнт Π²Π΅Π±-страницы воспринимаСт всСвозмоТныС css ΡˆΡ‚ΡƒΠΊΠΈ β€” начиная ΠΎΡ‚ border, opacity ΠΈ заканчивая masks, gradients, transforms, transitions ΠΈ animations. Π’ΡƒΡ‚ всС ΡƒΠΆΠ΅ зависит ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΡ‚ вашСй Ρ„Π°Π½Ρ‚Π°Π·ΠΈΠΈ.

Video + canvas

HTML5 принСс Π² этом ΠΌΠΈΡ€ Π΅Ρ‰Π΅ ΠΎΠ΄Π½Ρƒ ΠΌΠΎΡ‰Π½ΡƒΡŽ Π²Π΅Ρ‰ΡŒ β€” canvas. И Ρ‡Ρ‚ΠΎ ΠΆΠ΅ ΠΌΠ΅ΡˆΠ°Π΅Ρ‚ Π½Π°ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΄Π²Π° этих нововвСдСния вмСстС? ΠŸΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ β€” Π½ΠΈΡ‡Π΅Π³ΠΎ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ совмСстного использования canvas ΠΈ video ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ β€” ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½ΠΈΠ΅ ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚ΠΎΠ² ΠΈΠ· ΠΏΡ€ΠΎΠΈΠ³Ρ€Ρ‹Π²Π°Π΅ΠΌΠΎΠ³ΠΎ Π²ΠΈΠ΄Π΅ΠΎ. Π£ canvas Π΅ΡΡ‚ΡŒ ΠΌΠ΅Ρ‚ΠΎΠ΄ drawImage, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠΉ ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚ΡŒ Π²ΠΈΠ΄Π΅ΠΎ ΠΈΠ· 3Ρ… источников: ΠΈΠ· изобраТСния ΠΊΠ°ΠΊ Ρ‚Π°ΠΊΠΎΠ²ΠΎΠ³ΠΎ, ΠΈΠ· Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ canvas ΠΈ ΠΈΠ· video! А с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ ΠΌΠ΅Ρ‚ΠΎΠ΄Π° β€” toDataURL ΠΌΡ‹ ΡƒΠΆΠ΅ экспортируСм ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² Π½ΡƒΠΆΠ½ΠΎ Π½Π°ΠΌ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅. Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ листинг ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΊΠ°ΠΊ ΡΠ½ΠΈΠΌΠ°Ρ‚ΡŒ ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚Ρ‹ ΠΈΠ· Π²ΠΈΠ΄Π΅ΠΎ ΠΊΠ°ΠΆΠ΄Ρ‹Π΅ 1,5 сСкунды:

Π― Π΄ΡƒΠΌΠ°ΡŽ люди с Π±ΠΎΠ³Π°Ρ‚ΠΎΠΉ Ρ„Π°Π½Ρ‚Π°Π·ΠΈΠ΅ΠΉ ΡƒΠΆΠ΅ прСдставили, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚ΡƒΡ‚ ΠΏΡ€ΠΈΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ. Для Π½ΠΈΡ… ΠΈ всС ΠΊΠΎΠ³ΠΎ интСрСсуСт Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ получСния Ρ„Ρ€Π΅ΠΉΠΌΠΎΠ² Π²ΠΈΠ΄Π΅ΠΎ Π΅ΡΡ‚ΡŒ интСрСсная Π²Π΅Ρ‰ΡŒ β€” WebGL.

Video + SVG

SVG прСдоставляСт Π½Π°ΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ управлСния отобраТСния Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ. Но ΠΏΠΎΠΌΠΈΠΌΠΎ этого Π΅ΡΡ‚ΡŒ такая Π·Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Π°Ρ ΡˆΡ‚ΡƒΠΊΠ° ΠΊΠ°ΠΊ SVG filter effects. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этих Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ΠΎΠ² ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΊΠ»Π°Π΄Ρ‹Π²Π°Ρ‚ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ эффСкты Π½Π° ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ элСмСнты Π²Π΅Π±-страницы. Выглядит это ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

svg id =’image’ version =»1.1″ xmlns =»http://www.w3.org/2000/svg» >
defs >
filter id =»myblur» >
feGaussianBlur stdDeviation =»1″ />
filter >
defs >
svg >
style >
video < filter:url(#myblur); border: 2px solid red; >
style >

ΠŸΠΎΠ΄ΠΎΠ±Π½Ρ‹ΠΉ inline-Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π² Firefox 4 ΠΈ IE9, для ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² ΡƒΠΆΠ΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌ яваскрипт ΠΈ css.

Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

Π‘Π΅Π· сомнСния ΡƒΠΆΠ΅ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ сумСли ΠΎΡ†Π΅Π½ΠΈΡ‚ΡŒ ΠΏΠ»ΡŽΡΡ‹ ΠΎΡ‚ Π½ΠΎΠ²ΠΎΠ³ΠΎ html ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°. Π’ ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ (ΠΈ Π½Π° Ρ…Π°Π±Ρ€Π΅ β€” ΠΏΡ€ΠΈΠΌ. ΠΏΠ΅Ρ€.) Π²Ρ‹Π»ΠΎΠΆΠ΅Π½Π° ΡƒΠΆΠ΅ масса ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² (1, 2, 3, 4, 5, 6)

Π Π°Π΄ΡƒΠ΅Ρ‚ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π½Π° достигнутом Π½ΠΈΠΊΡ‚ΠΎ Π½Π΅ собираСтся ΠΎΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π² Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΌ нас ΠΆΠ΄Π΅Ρ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρ‹ с ΠΌΠΈΠΊΡ€ΠΎΡ„ΠΎΠ½ΠΎΠΌ ΠΈ ΠΊΠ°ΠΌΠ΅Ρ€ΠΎΠΉ ΠΈ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° вСщания.

Π’ΠΈΠ΄Π΅ΠΎ ΠΈ Π°ΡƒΠ΄ΠΈΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚

Π’Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ спокойно добавляСм простыС изобраТСния Π½Π° Π²Π΅Π±-страницу, сдСлаСм ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ шаг β€” Π½Π°Ρ‡Π½Ρ‘ΠΌ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Π²ΠΈΠ΄Π΅ΠΎ ΠΈ Π°ΡƒΠ΄ΠΈΠΎΠΏΠ»Π΅Π΅Ρ€Ρ‹ Π² ваши HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Ρ‹! Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅, ΠΊΠ°ΠΊ это Π΄Π΅Π»Π°Ρ‚ΡŒ с элСмСнтами ΠΈ ; Π° Π² Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΠ΅ посмотритС, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΈΡ‚Ρ€Ρ‹ ΠΈ субтитры ΠΊ вашим Π²ΠΈΠ΄Π΅ΠΎ.

ΠŸΡ€Π΅Π΄ΠΏΠΎΡΡ‹Π»ΠΊΠΈ:Базовая ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π½Π°Ρ Π³Ρ€Π°ΠΌΠΎΡ‚Π½ΠΎΡΡ‚ΡŒ, установка Π±Π°Π·ΠΎΠ²ΠΎΠ³ΠΎ ПО, Π±Π°Π·ΠΎΠ²Ρ‹Π΅ знания Ρ€Π°Π±ΠΎΡ‚Π° с Ρ„Π°ΠΉΠ»Π°ΠΌΠΈ, знакомство с основами HTML (ΠΊΠ°ΠΊ описано Π² Начало Ρ€Π°Π±ΠΎΡ‚Ρ‹ с HTML) ΠΈ Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ Π² HTML.
Π—Π°Π΄Π°Ρ‡Π°:Π£Π·Π½Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ Π²ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ Π²ΠΈΠ΄Π΅ΠΎ ΠΈ Π°ΡƒΠ΄ΠΈΠΎΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π² Π²Π΅Π±-страницу, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Ρ‚ΠΈΡ‚Ρ€Ρ‹ ΠΈΠ»ΠΈ субтитры ΠΊ Π²ΠΈΠ΄Π΅ΠΎ.

Аудио ΠΈ Π²ΠΈΠ΄Π΅ΠΎ Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅

Π’Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ Ρ…ΠΎΡ‚Π΅Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²ΠΈΠ΄Π΅ΠΎ ΠΈ Π°ΡƒΠ΄ΠΈΠΎ Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ Π² Ρ‚Π΅Ρ‡Π΅Π½ΠΈΠ΅ Π΄Π»ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, начиная с Π½Π°Ρ‡Π°Π»Π° 2000-Ρ… Π³ΠΎΠ΄ΠΎΠ², ΠΊΠΎΠ³Π΄Π° пропускная ΡΠΏΠΎΡΠΎΠ±Π½ΠΎΡΡ‚ΡŒ сСти стала достаточной, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ любоС Π²ΠΈΠ΄Π΅ΠΎ (Π²ΠΈΠ΄Π΅ΠΎΡ„Π°ΠΉΠ»Ρ‹ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ большС, Ρ‡Π΅ΠΌ тСкст, ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ изобраТСния). На Ρ€Π°Π½Π½Π΅ΠΌ этапС Π±Π°Π·ΠΎΠ²Ρ‹Π΅ Π²Π΅Π±-Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ HTML, Π½Π΅ ΠΈΠΌΠ΅Π»ΠΈ возмоТности размСщСния Π½Π° сайтах Π²ΠΈΠ΄Π΅ΠΎ ΠΈ Π°ΡƒΠ΄ΠΈΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, поэтому Π·Π°ΠΏΠ°Ρ‚Π΅Π½Ρ‚ΠΎΠ²Π°Π½Π½Ρ‹Π΅ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ (ΠΈΠ»ΠΈ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹), Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Flash (Π° Π·Π°Ρ‚Π΅ΠΌ ΠΈ Silverlight), стали популярными для ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Ρ‚Π°ΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°. Π­Ρ‚ΠΈ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΈ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎ, Π½ΠΎ Ρƒ Π½ΠΈΡ… Π±Ρ‹Π»ΠΎ ΠΌΠ½ΠΎΠ³ΠΎ нСдостатков, Π² числС ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… плохая ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° возмоТностСй HTML ΠΈ CSS, ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ бСзопасности ΠΈ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ доступности.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: ΠŸΡ€Π΅ΠΆΠ΄Π΅ всСго, Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π·Π½Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Π½Π΅ΠΌΠ°Π»ΠΎ OVPs (ΠΏΡ€ΠΎΠ²Π°ΠΉΠ΄Π΅Ρ€ΠΎΠ² ΠΎΠ½Π»Π°ΠΉΠ½-Π²ΠΈΠ΄Π΅ΠΎ) Π²Ρ€ΠΎΠ΄Π΅ YouTube, Dailymotion ΠΈ Vimeo, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΠ½Π»Π°ΠΉΠ½ Π°ΡƒΠ΄ΠΈΠΎ-ΠΏΡ€ΠΎΠ²Π°ΠΉΠ΄Π΅Ρ€ΠΎΠ² Π²Ρ€ΠΎΠ΄Π΅ Soundcloud. Π’Π°ΠΊΠΈΠ΅ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽΡ‚ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ ΠΈ простой способ размСщСния ΠΈ потрСблСния Π²ΠΈΠ΄Π΅ΠΎ, поэтому Π²Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ Π±Π΅ΡΠΏΠΎΠΊΠΎΠΈΡ‚ΡŒΡΡ ΠΎΠ± ΠΎΠ³Ρ€ΠΎΠΌΠ½ΠΎΠΌ ΠΏΠΎΡ‚Ρ€Π΅Π±Π»Π΅Π½ΠΈΠΈ Ρ‚Ρ€Π°Ρ„ΠΈΠΊΠ°. OVP Π΄Π°ΠΆΠ΅ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽΡ‚ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΉ ΠΊΠΎΠ΄ для встраивания Π²ΠΈΠ΄Π΅ΠΎ ΠΈ Π°ΡƒΠ΄ΠΈΠΎ Π² ваши Π²Π΅Π±-страницы. Если Π²Ρ‹ ΠΏΠΎΠΉΠ΄Ρ‘Ρ‚Π΅ ΠΏΠΎ этому ΠΏΡƒΡ‚ΠΈ, Ρ‚ΠΎ смоТСтС ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… трудностСй, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ обсуТдаСм Π² этой ΡΡ‚Π°Ρ‚ΡŒΠ΅.

«>» title=»Permalink to Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ «>Π­Π»Π΅ΠΌΠ΅Π½Ρ‚

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ позволяСт Π²Π°ΠΌ Π²ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ Π²ΠΈΠ΄Π΅ΠΎ достаточно Π»Π΅Π³ΠΊΠΎ. ΠžΡ‡Π΅Π½ΡŒ простой ΠΏΡ€ΠΈΠΌΠ΅Ρ€ выглядит Ρ‚Π°ΠΊ:

ВстроСнноС Π²ΠΈΠ΄Π΅ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Ρ‚Π°ΠΊ:

How to put video in html. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ How to put video in html. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ How to put video in html. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ How to put video in html. Π€ΠΎΡ‚ΠΎ How to put video in html

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠ²

ΠŸΡ€ΠΈΡΡƒΡ‚ΡΡ‚Π²ΡƒΠ΅Ρ‚ ΠΎΠ΄Π½Π° ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° с ΠΏΡ€ΠΈΠ²Π΅Π΄Ρ‘Π½Π½Ρ‹ΠΌ Π²Ρ‹ΡˆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π²Ρ‹, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΡƒΠΆΠ΅ Π·Π°ΠΌΠ΅Ρ‚ΠΈΠ»ΠΈ, Ссли ΠΏΡ‹Ρ‚Π°Π»ΠΈΡΡŒ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ доступ ΠΊ прямой ссылкС Π²Ρ‹ΡˆΠ΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, Ρ‚Π°ΠΊΠΎΠ³ΠΎ ΠΊΠ°ΠΊ Safari ΠΈΠ»ΠΈ Internet Explorer. Π’ΠΈΠ΄Π΅ΠΎ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Π²ΠΎΡΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ!

Π”Π°Π²Π°ΠΉΡ‚Π΅ ΠΊΡ€Π°Ρ‚ΠΊΠΎ рассмотрим Ρ‚Π΅Ρ€ΠΌΠΈΠ½ΠΎΠ»ΠΎΠ³ΠΈΡŽ. Π€ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ MP3, MP4 ΠΈ WebM, Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°ΠΌΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠ². Они содСрТат Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ части, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ всю пСсню ΠΈΠ»ΠΈ Π²ΠΈΠ΄Π΅ΠΎ β€” Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π·Π²ΡƒΠΊΠΎΠ²ΡƒΡŽ Π΄ΠΎΡ€ΠΎΠΆΠΊΡƒ, Π²ΠΈΠ΄Π΅ΠΎΠ΄ΠΎΡ€ΠΎΠΆΠΊΡƒ (Π² случаС Π²ΠΈΠ΄Π΅ΠΎ) ΠΈ ΠΌΠ΅Ρ‚Π°Π΄Π°Π½Π½Ρ‹Π΅ для описания прСдставлСнного носитСля.

НапримСр, Ρ„Π°ΠΉΠ» WebM, содСрТащий Ρ„ΠΈΠ»ΡŒΠΌ, ΠΈΠΌΠ΅Π΅Ρ‚ ΠΎΡΠ½ΠΎΠ²Π½ΡƒΡŽ Π²ΠΈΠ΄Π΅ΠΎΠ΄ΠΎΡ€ΠΎΠΆΠΊΡƒ ΠΈ ΠΎΠ΄Π½Ρƒ Π΄ΠΎΡ€ΠΎΠΆΠΊΡƒ с Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΌ ракурсом, плюс Π°ΡƒΠ΄ΠΈΠΎ для английского ΠΈ испанского языков, Π² Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ Π°ΡƒΠ΄ΠΈΠΎ для Π΄ΠΎΡ€ΠΎΠΆΠΊΠΈ с коммСнтариями Π½Π° английском языкС. Π’Π°ΠΊΠΆΠ΅ Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Ρ‹ тСкстовыС Π΄ΠΎΡ€ΠΎΠΆΠΊΠΈ, содСрТащиС Π·Π°ΠΊΡ€Ρ‹Ρ‚Ρ‹Π΅ субтитры для худоТСствСнного Ρ„ΠΈΠ»ΡŒΠΌΠ°, испанскиС субтитры для Ρ„ΠΈΠ»ΡŒΠΌΠ° ΠΈ английскиС субтитры для ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠ΅Π².

Аудио ΠΈ Π²ΠΈΠ΄Π΅ΠΎ Ρ‚Ρ€Π΅ΠΊΠΈ Ρ‚Π°ΠΊΠΆΠ΅ находятся Π² Ρ€Π°Π·Π½Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°Ρ…, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

Π•ΡΡ‚ΡŒ нСсколько особых случаСв. НапримСр, для Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Ρ‚ΠΈΠΏΠΎΠ² Π°ΡƒΠ΄ΠΈΠΎ Π΄Π°Π½Π½Ρ‹Π΅ ΠΊΠΎΠ΄Π΅ΠΊΠ° часто хранятся Π±Π΅Π· ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° ΠΈΠ»ΠΈ с ΡƒΠΏΡ€ΠΎΡ‰Ρ‘Π½Π½Ρ‹ΠΌ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠΌ. Одним ΠΈΠ· Ρ‚Π°ΠΊΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² являСтся ΠΊΠΎΠ΄Π΅ΠΊ FLAC, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ‡Π°Ρ‰Π΅ всСго хранится Π² Ρ„Π°ΠΉΠ»Π°Ρ… FLAC, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ собой просто Π½Π΅ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Π°Π½Π½Ρ‹Π΅ Π΄ΠΎΡ€ΠΎΠΆΠΊΠΈ FLAC.

АудиоплССр ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ воспроизводит Π°ΡƒΠ΄ΠΈΠΎΠ΄ΠΎΡ€ΠΎΠΆΠΊΡƒ Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ„Π°ΠΉΠ» MP3 ΠΈΠ»ΠΈ Ogg. Для этого Π½Π΅ Π½ΡƒΠΆΠ½Ρ‹ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹.

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° ΠΌΠ΅Π΄ΠΈΠ°Ρ„Π°ΠΉΠ»ΠΎΠ² Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…

Π’Ρ‹ΡˆΠ΅ΡƒΠΏΠΎΠΌΡΠ½ΡƒΡ‚Ρ‹Π΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ для сТатия Π²ΠΈΠ΄Π΅ΠΎ ΠΈ Π°ΡƒΠ΄ΠΈΠΎ Π² управляСмыС Ρ„Π°ΠΉΠ»Ρ‹ (Π½Π΅ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Π°Π½Π½Ρ‹Π΅ Π²ΠΈΠ΄Π΅ΠΎ ΠΈ Π°ΡƒΠ΄ΠΈΠΎ ΠΎΡ‡Π΅Π½ΡŒ большиС). Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ содСрТат Ρ€Π°Π·Π½Ρ‹Π΅ ΠΊΠΎΠ΄Π΅ΠΊΠΈ, Π²Ρ€ΠΎΠ΄Π΅ Vorbis ΠΈΠ»ΠΈ H.264, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для прСобразования сТатого Π·Π²ΡƒΠΊΠ° ΠΈ Π²ΠΈΠ΄Π΅ΠΎ Π² Π±ΠΈΠ½Π°Ρ€Π½Ρ‹Π΅ Π΄Π°Π½Π½Ρ‹Π΅ ΠΈ ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎ. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΊΠΎΠ΄Π΅ΠΊ ΠΈΠΌΠ΅Π΅Ρ‚ свои прСимущСства ΠΈ нСдостатки, ΠΈ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ ΠΌΠΎΠΆΠ΅Ρ‚ Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Ρ‚ΡŒ свои собствСнныС ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΈ ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ особСнности, Π²Π»ΠΈΡΡŽΡ‰ΠΈΠ΅ Π½Π° вашС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊΠΎΠΉ ΠΈΠ· Π½ΠΈΡ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ. Как ΡƒΠΊΠ°Π·Π°Π½ΠΎ Π²Ρ‹ΡˆΠ΅, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹, ΠΊ соТалСнию, Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ ΠΎΠ΄Π½ΠΈ ΠΈ Ρ‚Π΅ ΠΆΠ΅ ΠΊΠΎΠ΄Π΅ΠΊΠΈ, поэтому Π²Π°ΠΌ придётся ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ нСсколько Ρ„Π°ΠΉΠ»ΠΎΠ² для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΌΠ΅Π΄ΠΈΠ°-ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°. Если Π²Π°ΠΌ Π½Π΅ Ρ…Π²Π°Ρ‚Π°Π΅Ρ‚ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π΅ΠΊΠ° для дСкодирования ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, ΠΎΠ½ просто Π½Π΅ смоТСт Π²ΠΎΡΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Π°ΠΌ интСрСсно, ΠΊΠ°ΠΊ слоТилась такая ситуация. MP3 (для Π°ΡƒΠ΄ΠΈΠΎ) ΠΈ MP4/H.264 (для Π²ΠΈΠ΄Π΅ΠΎ) ΡˆΠΈΡ€ΠΎΠΊΠΎ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ ΠΈ ΠΈΠΌΠ΅ΡŽΡ‚ высокоС качСство. Π’ Ρ‚ΠΎ ΠΆΠ΅ врСмя, ΠΎΠ½ΠΈ Π·Π°Ρ‰ΠΈΡ‰Π΅Π½Ρ‹ ΠΏΠ°Ρ‚Π΅Π½Ρ‚Π°ΠΌΠΈ β€” амСриканскиС ΠΏΠ°Ρ‚Π΅Π½Ρ‚Ρ‹ ΠΎΡ…Π²Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‚ MP3 ΠΏΠΎ ΠΊΡ€Π°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅Ρ€Π΅ Π΄ΠΎ 2017 Π³ΠΎΠ΄Π° ΠΈ H.264 самоС мСньшСС Π΄ΠΎ 2027 Π³ΠΎΠ΄Π°, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ ΡΠ²Π»ΡΡŽΡ‚ΡΡ дСрТатСлями этих ΠΏΠ°Ρ‚Π΅Π½Ρ‚ΠΎΠ², Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΠ»Π°Ρ‚ΠΈΡ‚ΡŒ ΠΎΠ³Ρ€ΠΎΠΌΠ½Ρ‹Π΅ суммы Π΄Π΅Π½Π΅Π³ для ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ этих Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠ². ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΌΠ½ΠΎΠ³ΠΈΠ΅ люди ΠΈΠ·Π±Π΅Π³Π°ΡŽΡ‚ нСсвободного ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ обСспСчСния Π² ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ΅, прСдпочитая ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹Π΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹. Π’ΠΎΡ‚ ΠΏΠΎΡ‡Π΅ΠΌΡƒ ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ нСсколько Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠ² для Ρ€Π°Π·Π½Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ².

ВсС становится Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ слоТнСС, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ свой Π½Π°Π±ΠΎΡ€ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠ² Ρ„Π°ΠΉΠ»ΠΎΠ²-ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠ², Π½ΠΎ ΠΈ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· Π½ΠΈΡ… ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ свой Π²Ρ‹Π±ΠΎΡ€ ΠΊΠΎΠ΄Π΅ΠΊΠΎΠ². Π§Ρ‚ΠΎΠ±Ρ‹ ΠΌΠ°ΠΊΡΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π²Π΅Ρ€ΠΎΡΡ‚Π½ΠΎΡΡ‚ΡŒ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ ваш Π²Π΅Π±-сайт ΠΈΠ»ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, Π²Π°ΠΌ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΡ‚Ρ€Π΅Π±ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΌΠ΅Π΄ΠΈΠ°Ρ„Π°ΠΉΠ», ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅, Π² Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°Ρ…. Если ваш сайт ΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ ΠΎΠ±Ρ‰ΠΈΠΉ ΠΌΠ΅Π΄ΠΈΠ°Ρ„ΠΎΡ€ΠΌΠ°Ρ‚, ваши ΠΌΠ΅Π΄ΠΈΠ° просто Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Π²ΠΎΡΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ.

Из-Π·Π° слоТности обСспСчСния возмоТности просмотра ΠΌΡƒΠ»ΡŒΡ‚ΠΈΠΌΠ΅Π΄ΠΈΠΉΠ½Ρ‹Ρ… Ρ„Π°ΠΉΠ»ΠΎΠ² вашСго прилоТСния Π² любой ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ², ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌ ΠΈ устройств, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ, Π²Ρ‹Π±ΠΎΡ€ Π½Π°ΠΈΠ»ΡƒΡ‡ΡˆΠ΅Π³ΠΎ сочСтания ΠΊΠΎΠ΄Π΅ΠΊΠΎΠ² ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ слоТной Π·Π°Π΄Π°Ρ‡Π΅ΠΉ. Π‘ΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ Π²Ρ‹Π±ΠΎΡ€ подходящСго ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° для получСния ΠΏΠΎΠΌΠΎΡ‰ΠΈ ΠΏΠΎ Π²Ρ‹Π±ΠΎΡ€Ρƒ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° Ρ„Π°ΠΉΠ»Π° ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°, Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ подходящСго для Π²Π°ΡˆΠΈΡ… Π½ΡƒΠΆΠ΄; Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹ΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ смотритС Π²Ρ‹Π±ΠΎΡ€ Π²ΠΈΠ΄Π΅ΠΎΠΊΠΎΠ΄Π΅ΠΊΠ° ΠΈ Π²Ρ‹Π±ΠΎΡ€ Π°ΡƒΠ΄ΠΈΠΎΠΊΠΎΠ΄Π΅ΠΊΠ° для ΠΏΠΎΠΌΠΎΡ‰ΠΈ Π² Π²Ρ‹Π±ΠΎΡ€Π΅ ΠΏΠ΅Ρ€Π²Ρ‹Ρ… ΠΌΠ΅Π΄ΠΈΠ°ΠΊΠΎΠ΄Π΅ΠΊΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ для вашСго ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΈ вашСй Ρ†Π΅Π»Π΅Π²ΠΎΠΉ Π°ΡƒΠ΄ΠΈΡ‚ΠΎΡ€ΠΈΠΈ.

Π•Ρ‰Ρ‘ ΠΎΠ΄Π½Π° Π²Π΅Ρ‰ΡŒ, ΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ слСдуСт ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ: ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹, Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌΡ‹Π΅ ΠΈΡ… Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹ΠΌΠΈ эквивалСнтами, Ρ‚ΠΎΡ‡Π½ΠΎ Ρ‚Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ всС Ρ‚Π΅ ΠΆΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹, Ρ‡Ρ‚ΠΎ ΠΈ Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Π°Ρ вСрсия. Π’Π΄ΠΎΠ±Π°Π²ΠΎΠΊ ΠΊΠΎ всСму, ΠΊΠ°ΠΊ Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹Π΅, Ρ‚Π°ΠΊ ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ спроСктированы Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π·Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ воспроизвСдСния ΠΌΡƒΠ»ΡŒΡ‚ΠΈΠΌΠ΅Π΄ΠΈΠ° (Π»ΠΈΠ±ΠΎ для всСх ΠΌΡƒΠ»ΡŒΡ‚ΠΈΠΌΠ΅Π΄ΠΈΠ°, Π»ΠΈΠ±ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½Ρ‹Ρ… Ρ‚ΠΈΠΏΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ½ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅). Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° ΠΌΡƒΠ»ΡŒΡ‚ΠΈΠΌΠ΅Π΄ΠΈΠ° частично зависит ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊΠΎΠ΅ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ΅ обСспСчСниС установил ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ.

Π’Π°ΠΊ ΠΊΠ°ΠΊ ΠΌΡ‹ это сдСлаСм? ВзглянитС Π½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΎΠ±Π½ΠΎΠ²Π»Ρ‘Π½Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ (ΠΈ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ ΠΆΠΈΠ²ΠΎΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€):

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Наша ΡΡ‚Π°Ρ‚ΡŒΡ ΠΎ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌΡ‹Ρ… ΠΌΠ΅Π΄ΠΈΠ°Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°Ρ… описываСт Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ распространённыС MIME types.

«>» title=»Permalink to Π”Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ «>Π”Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹

На Π²Ρ‹Ρ…ΠΎΠ΄Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠΌ Π½Π΅Ρ‡Ρ‚ΠΎ, ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅ этому:

How to put video in html. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ How to put video in html. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ How to put video in html. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ How to put video in html. Π€ΠΎΡ‚ΠΎ How to put video in htmlНовыС ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹:

width and height Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ Π²ΠΈΠ΄Π΅ΠΎ Π»ΠΈΠ±ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этих Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ², Π»ΠΈΠ±ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS. Π’ ΠΎΠ±ΠΎΠΈΡ… случаях Π²ΠΈΠ΄Π΅ΠΎ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ собствСнноС ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΈ высоты β€” извСстноС ΠΊΠ°ΠΊ ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ сторон. Если ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ сторон Π½Π΅ поддСрТиваСтся установлСнными Π²Π°ΠΌΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌΠΈ, Π²ΠΈΠ΄Π΅ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Ρ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ пространство ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ, Π° Π·Π°ΠΏΠΎΠ»Π½Π΅Π½Π½ΠΎΠΌΡƒ пространству ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π΄Π°Π½ сплошной Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°. autoplay Π­Ρ‚ΠΎΡ‚ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ позволяСт сразу Π½Π°Ρ‡Π°Ρ‚ΡŒ воспроизвСдСниС Π·Π²ΡƒΠΊΠ° ΠΈΠ»ΠΈ Π²ΠΈΠ΄Π΅ΠΎ, ΠΏΠΎΠΊΠ° ΠΎΡΡ‚Π°Π»ΡŒΠ½Π°Ρ Ρ‡Π°ΡΡ‚ΡŒ страницы загруТаСтся. Π’Π°ΠΌ Π½Π΅ рСкомСндуСтся ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ автовоспроизвСдСниС Π²ΠΈΠ΄Π΅ΠΎ (ΠΈΠ»ΠΈ Π°ΡƒΠ΄ΠΈΠΎ) Π½Π° Π²Π°ΡˆΠΈΡ… сайтах, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π½Π°ΠΉΡ‚ΠΈ это Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€Π°Π·Π΄Ρ€Π°ΠΆΠ°ΡŽΡ‰ΠΈΠΌ. loop Π­Ρ‚ΠΎΡ‚ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ позволяСт Π²ΠΎΡΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ΡŒ Π²ΠΈΠ΄Π΅ΠΎ (ΠΈΠ»ΠΈ Π°ΡƒΠ΄ΠΈΠΎ) снова, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ заканчиваСтся. Π­Ρ‚ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π°Π·Π΄Ρ€Π°ΠΆΠ°Ρ‚ΡŒ, поэтому ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Ρ‚ΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° это Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ. muted Π­Ρ‚ΠΎΡ‚ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ заставляСт ΠΏΡ€ΠΎΠΈΠ³Ρ€Ρ‹Π²Π°Ρ‚Π΅Π»ΡŒ Π²ΠΎΡΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ΡŒ Π·Π²ΡƒΠΊ, ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Ρ‘Π½Π½Ρ‹ΠΉ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ. poster Π­Ρ‚ΠΎΡ‚ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ Π² качСствС значСния URL-адрСс изобраТСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π΄ΠΎ воспроизвСдСния Π²ΠΈΠ΄Π΅ΠΎ. Он ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ для заставки ΠΊ Π²ΠΈΠ΄Π΅ΠΎ ΠΈΠ»ΠΈ Ρ€Π΅ΠΊΠ»Π°ΠΌΡ‹. preload

этот Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² элСмСнтС для Π±ΡƒΡ„Π΅Ρ€ΠΈΠ·Π°Ρ†ΠΈΠΈ Π±ΠΎΠ»ΡŒΡˆΠΈΡ… Ρ„Π°ΠΉΠ»ΠΎΠ². Он ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ ΠΎΠ΄Π½ΠΎ ΠΈΠ· Ρ‚Ρ€Ρ‘Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ:

» title=»Permalink to Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ «>Π­Π»Π΅ΠΌΠ΅Π½Ρ‚

Π’ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ это Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:

How to put video in html. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ How to put video in html. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ How to put video in html. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ How to put video in html. Π€ΠΎΡ‚ΠΎ How to put video in html

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ Π°ΡƒΠ΄ΠΈΠΎ-Π΄Π΅ΠΌΠΎ Π² Github (см. Ρ‚Π°ΠΊΠΆΠ΅ исходный ΠΊΠΎΠ΄ Π°ΡƒΠ΄ΠΈΠΎΠΏΠ»Π΅Π΅Ρ€Π°.)

ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ тСкстовых Π΄ΠΎΡ€ΠΎΠΆΠ΅ΠΊ ΠΊ Π²ΠΈΠ΄Π΅ΠΎ

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΡ‹ обсудим Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚ΡƒΡŽ ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΡŽ, ΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Π·Π½Π°Ρ‚ΡŒ. МногиС люди Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΠ»ΠΈ Π½Π΅ хотят ΡΠ»Ρ‹ΡˆΠ°Ρ‚ΡŒ Π°ΡƒΠ΄ΠΈΠΎ ΠΈΠ»ΠΈ Π²ΠΈΠ΄Π΅ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΎΠ½ΠΈ находят Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅, ΠΏΠΎ ΠΊΡ€Π°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅Ρ€Π΅, Π² ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½ΠΎΠ΅ врСмя. НапримСр:

Π—Π°ΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: «Π’Ρ€Π°Π½ΡΠΊΡ€ΠΈΠ±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ» Π·Π½Π°Ρ‡ΠΈΡ‚ Π·Π°ΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ ΡƒΡΡ‚Π½ΡƒΡŽ Ρ€Π΅Ρ‡ΡŒ Π² Π²ΠΈΠ΄Π΅ тСкста. ΠŸΠΎΠ»ΡƒΡ‡Π΅Π½Π½Ρ‹ΠΉ тСкст прСдставляСт собой «стСнограмму».

субтитры ΠŸΠ΅Ρ€Π΅Π²ΠΎΠ΄Ρ‹ иностранного ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π°, для людСй, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡŽΡ‚ слов, произнСсённых Π² Π°ΡƒΠ΄ΠΈΠΎ. Ρ‚ΠΈΡ‚Ρ€Ρ‹ Π‘ΠΈΠ½Ρ…Ρ€ΠΎΠ½ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ транскрипции Π΄ΠΈΠ°Π»ΠΎΠ³Π° ΠΈΠ»ΠΈ описания Π·Π½Π°Ρ‡ΠΈΠΌΡ‹Ρ… Π·Π²ΡƒΠΊΠΎΠ², Ρ‡Ρ‚ΠΎΠ±Ρ‹ люди, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΡΠ»Ρ‹ΡˆΠ°Ρ‚ΡŒ Π·Π²ΡƒΠΊ, поняли Ρ‡Ρ‚ΠΎ происходит. рассчитанныС описания ВСкст для прСобразования Π² Π°ΡƒΠ΄ΠΈΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±ΡΠ»ΡƒΠΆΠΈΠ²Π°Ρ‚ΡŒ людСй с Π½Π°Ρ€ΡƒΡˆΠ΅Π½ΠΈΡΠΌΠΈ зрСния.

Π’ΠΈΠΏΠΈΡ‡Π½Ρ‹ΠΉ Ρ„Π°ΠΉΠ» WebVTT Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Ρ‚Π°ΠΊ:

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ это вмСстС с воспроизвСдСниСм ΠΌΡƒΠ»ΡŒΡ‚ΠΈΠΌΠ΅Π΄ΠΈΠ° HTML, Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ:

Π­Ρ‚ΠΎ ΠΏΡ€ΠΈΠ²Π΅Π΄Ρ‘Ρ‚ ΠΊ просмотру Π²ΠΈΠ΄Π΅ΠΎ с субтитрами, Ρ‚Π°ΠΊΠΈΠΌ ΠΊΠ°ΠΊ:

How to put video in html. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ How to put video in html. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ How to put video in html. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ How to put video in html. Π€ΠΎΡ‚ΠΎ How to put video in html

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: ВСкстовыС Ρ‚Ρ€Π΅ΠΊΠΈ Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Π²Π°ΠΌ с SEO, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ поисковыС систСмы особСнно ΠΏΡ€Π΅ΡƒΡΠΏΠ΅Π²Π°ΡŽΡ‚ Π² Ρ€Π°Π±ΠΎΡ‚Π΅ с тСкстом. ВСкстовыС Ρ‚Ρ€Π΅ΠΊΠΈ Π΄Π°ΠΆΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ поисковым систСмам Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ ΡΠ²ΡΠ·Ρ‹Π²Π°Ρ‚ΡŒΡΡ с мСстом, происходящим Π² Π²ΠΈΠ΄Π΅ΠΎ.

АктивноС ΠΎΠ±ΡƒΡ‡Π΅Π½ΠΈΠ΅: Π’Π½Π΅Π΄Ρ€Π΅Π½ΠΈΠ΅ собствСнного Π°ΡƒΠ΄ΠΈΠΎ ΠΈ Π²ΠΈΠ΄Π΅ΠΎ

Для этого Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ обучСния ΠΌΡ‹ (Π² ΠΈΠ΄Π΅Π°Π»Π΅) Ρ…ΠΎΡ‚Π΅Π»ΠΈ Π±Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ Π²Ρ‹ΡˆΠ»ΠΈ Π½Π° ΡƒΠ»ΠΈΡ†Ρƒ ΠΈ записали Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠ· Π²Π°ΡˆΠΈΡ… собствСнных Π²ΠΈΠ΄Π΅ΠΎ ΠΈ Π°ΡƒΠ΄ΠΈΠΎ. Π‘ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½ΠΎΠ² Π² наши Π΄Π½ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΠΎΡ‡Π΅Π½ΡŒ Π»Π΅Π³ΠΊΠΎ Π·Π°ΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ Π°ΡƒΠ΄ΠΈΠΎ ΠΈ Π²ΠΈΠ΄Π΅ΠΎ, ΠΈ, Ссли Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ пСрСнСсти ΠΈΡ… Π½Π° свой ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ. Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Π°ΠΌ придётся ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π² ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΌ ΠΈΡ‚ΠΎΠ³Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ WebM ΠΈ MP4 Π² случаС Π²ΠΈΠ΄Π΅ΠΎ, Π° Ρ‚Π°ΠΊΠΆΠ΅ MP3 ΠΈ Ogg Π² случаС Π°ΡƒΠ΄ΠΈΠΎ, Π½ΠΎ Π΅ΡΡ‚ΡŒ достаточно ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это Π±Π΅Π· особых ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ Miro Video Converter ΠΈ Audacity. ΠœΡ‹ Ρ…ΠΎΡ‚Π΅Π»ΠΈ Π±Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Π»ΠΈ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это!

Если Ρƒ вас Π½Π΅Ρ‚ ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π»ΠΈΠ±ΠΎ Π²ΠΈΠ΄Π΅ΠΎ ΠΈΠ»ΠΈ Π°ΡƒΠ΄ΠΈΠΎ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ свободно ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ нашими ΠΎΠ±Ρ€Π°Π·Ρ†Π°ΠΌΠΈ Π°ΡƒΠ΄ΠΈΠΎ ΠΈ Π²ΠΈΠ΄Π΅ΠΎ Ρ„Π°ΠΉΠ»ΠΎΠ² для выполнСния этого упраТнСния. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ наш ΠΎΠ±Ρ€Π°Π·Π΅Ρ† ΠΊΠΎΠ΄Π° для справки.

ΠœΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ сдСлали ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ дСйствия:

Для Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ бонуса Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ тСкстовыС Ρ‚Ρ€Π΅ΠΊΠΈ ΠΈ Π²Ρ‹ΡΡΠ½ΠΈΡ‚ΡŒ, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ‚ΠΈΡ‚Ρ€Ρ‹ ΠΊ Π²Π°ΡˆΠ΅ΠΌΡƒ Π²ΠΈΠ΄Π΅ΠΎ.

ΠšΡ€Π°Ρ‚ΠΊΠΎΠ΅ ΠΈΠ·Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅

ΠœΡ‹ надССмся, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ ΠΏΠΎΠ½Ρ€Π°Π²ΠΈΠ»ΠΎΡΡŒ ΠΈΠ³Ρ€Π°Ρ‚ΡŒ с Π²ΠΈΠ΄Π΅ΠΎ ΠΈ Π°ΡƒΠ΄ΠΈΠΎ Π½Π° Π²Π΅Π±-страницах! Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ рассмотрим Π΄Ρ€ΡƒΠ³ΠΈΠ΅ способы встраивания ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π² Web, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Ρ‚Π°ΠΊΠΈΠ΅ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ, ΠΊΠ°ΠΊ (en-US) ΠΈ (en-US).

How to Embed Audio and Video in HTML?

HTML stands for HyperText Markup Language. It is used to design web pages using a markup language. It is a combination of Hypertext and Markup language. HTML uses predefined tags and elements that tell the browser how to properly display the content on the screen. So, in this article, we will learn how to embed audio and video in HTML. In order to insert multimedia files on web pages, we already know how to insert images in HTML.

How to embed audio in HTML?

Syntax:

Attributes of tag

AttributeValueDescription
autoplayautoplayWhen the page is loaded. It specifies to play audio as soon as possible.
controlscontrolsIt displays audio control.
looploopIt will start the audio again when it is finished.
mutedmutedWhen the page is loaded audio will be automatically muted.
preloadIt specifies how the author thinks the audio will be loaded when the page is ready.
srcURLIt specifies the URL of the audio file.

Example:

In this example, we will add an audio file to a webpage. To add audio files on the webpage, we need a notepad or another text editor.

Step 1: Open your notepad by searching notepad in your application list.

Step 3: Once the HTML file is saved, you can write HTML code inside this file. In this example, we have to embed an audio file so first keep ready an audio file and save it in the same directory where your HTML is saved. Then we write HTML code as shown below code snippet following by HTML code format.

Output:

Note: Before adding an audio source must be sure that the audio file is in the same directory and specified name.

How to embed video in HTML?

To embed video in HTML, we use the tag. It contains one or more video sources at a time using tag. It supports MP4, WebM, and Ogg in all modern browsers. Only Ogg video format doesn’t support in Safari browser.

1.13. HTML5-Π²ΠΈΠ΄Π΅ΠΎ

How to put video in html. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ How to put video in html. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ How to put video in html. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ How to put video in html. Π€ΠΎΡ‚ΠΎ How to put video in html

РаньшС, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚Π΅Π»ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π²ΠΈΠ΄Π΅ΠΎ Π½Π° Π²Π΅Π±-страницу, Π²Π°ΠΌ ΠΏΡ€ΠΈΡ…ΠΎΠ΄ΠΈΠ»ΠΎΡΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ элСмСнт

Π’Π°Π±Π»ΠΈΡ†Π° 1. Атрибуты Ρ‚Π΅Π³Π°

ΠΡ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠžΠΏΠΈΡΠ°Π½ΠΈΠ΅, ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅ΠΌΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅
autoplayАвтоматичСскоС воспроизвСдСниС Π²ΠΈΠ΄Π΅ΠΎΠΎΡ„Π°ΠΉΠ»Π° сразу ΠΆΠ΅ послС Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ страницы.
controlsΠ£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ, Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ Π±Π°Π·ΠΎΠ²Ρ‹Π΅ элСмСнты управлСния воспроизвСдСниСм (воспроизвСдСниС, ΠΏΠ°ΡƒΠ·Π°, Π³Ρ€ΠΎΠΌΠΊΠΎΡΡ‚ΡŒ).
heightΠ—Π°Π΄Π°Π΅Ρ‚ высоту ΠΎΠΊΠ½Π° для отобраТСния Π²ΠΈΠ΄Π΅ΠΎΠ΄Π°Π½Π½Ρ‹Ρ…, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ значСния: px ΠΈΠ»ΠΈ %
loopЦикличСскоС воспроизвСдСниС Π²ΠΈΠ΄Π΅ΠΎΡ„Π°ΠΉΠ»Π°.
mutedΠ’Ρ‹ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π·Π²ΡƒΠΊ ΠΏΡ€ΠΈ воспроизвСдСнии Π²ΠΈΠ΄Π΅ΠΎΡ„Π°ΠΉΠ»Π°.
posterURL Ρ„Π°ΠΉΠ»Π° изобраТСния, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π²ΠΎ врСмя Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Π²ΠΈΠ΄Π΅ΠΎΡ„Π°ΠΉΠ»Π° ΠΈΠ»ΠΈ Π΄ΠΎ Ρ‚Π΅Ρ… ΠΏΠΎΡ€, ΠΏΠΎΠΊΠ° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π΅ Π½Π°ΠΆΠΌΠ΅Ρ‚ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ PLAY. Если Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Π½Π΅ Π·Π°Π΄Π°Π½, Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ ΠΊΠ°Π΄Ρ€ Π²ΠΈΠ΄Π΅ΠΎΡ„Π°ΠΉΠ»Π°.
preloadАтрибут, ΠΎΡ‚Π²Π΅Ρ‡Π°ΡŽΡ‰ΠΈΠΉ Π·Π° ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ Π²ΠΈΠ΄Π΅ΠΎΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°. НС являСтся ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ, Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΡƒΡŽΡ‚ Π΅Π³ΠΎ. Π’ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ значСния:
auto β€” Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π·Π°Π³Ρ€ΡƒΠΆΠ°Π΅Ρ‚ Π²ΠΈΠ΄Π΅ΠΎΡ„Π°ΠΉΠ» ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ Π±Ρ‹Π» доступСн, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°Ρ‡Π½Π΅Ρ‚ Π΅Π³ΠΎ воспроизвСдСниС.
metadata β€” Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π·Π°Π³Ρ€ΡƒΠΆΠ°Π΅Ρ‚ ΠΏΠ΅Ρ€Π²ΡƒΡŽ Π½Π΅Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ Π²ΠΈΠ΄Π΅ΠΎΡ„Π°ΠΉΠ»Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Π΅Π³ΠΎ основныС характСристики.
none β€” отсутствиС автоматичСской Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Π²ΠΈΠ΄Π΅ΠΎΡ„Π°ΠΉΠ»Π°.
srcΠ‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΡ‚ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹ΠΉ ΠΈΠ»ΠΈ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ URL-адрСс Π²ΠΈΠ΄Π΅ΠΎΡ„Π°ΠΉΠ»Π°.
widthΠ—Π°Π΄Π°Π΅Ρ‚ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΎΠΊΠ½Π° для отобраТСния Π²ΠΈΠ΄Π΅ΠΎΠ΄Π°Π½Π½Ρ‹Ρ…, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ значСния: px ΠΈΠ»ΠΈ %

2. ВстраиваСмый ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ опрСдСляСт ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ для внСшнСго прилоТСния ΠΈΠ»ΠΈ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ содСрТимого (Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ словами, ΠΏΠ»Π°Π³ΠΈΠ½Π°). Π‘ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π»ΠΎ Π΄Π°Π½Π½Ρ‹ΠΉ элСмСнт Π½Π° протяТСнии Π΄ΠΎΠ»Π³ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, Π΄Π°Π½Π½Ρ‹ΠΉ Ρ‚Π΅Π³ Π½Π΅ Π±Ρ‹Π» Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ Π² ΡΠΏΠ΅Ρ†ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΡŽ HTML4, Π΅Π³ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ Π² ΡΠΏΠ΅Ρ†ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΡŽ HTML5. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π½Π° Π²Π΅Π±-страницы ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²ΠΈΠ΄Π΅ΠΎΡ„Π°ΠΉΠ»Ρ‹, Π½ΠΎ ΠΈ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Π΅ изобраТСния Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ swf :

3. Π’ΠΈΠ΄Π΅ΠΎΠΊΠΎΠ΄Π΅ΠΊΠΈ

ΠŸΡ€ΠΈ просмотрС Π²ΠΈΠ΄Π΅ΠΎ ΠΏΡ€ΠΎΠΈΠ³Ρ€Ρ‹Π²Π°Ρ‚Π΅Π»ΡŒ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π΅Π³ΠΎ Π΄Π΅ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Одни ΠΏΡ€ΠΎΠΈΠ³Ρ€Ρ‹Π²Π°Ρ‚Π΅Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ΅ Π΄Π΅ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π²ΠΈΠ΄Π΅ΠΎΠΏΠΎΡ‚ΠΎΠΊΠ°, Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Π°ΠΏΠΏΠ°Ρ€Π°Ρ‚Π½ΠΎΠ΅ Π΄Π΅ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅.

Π’Π°ΠΆΠ½ΠΎ! ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ ΠΊΠΎΠ΄Π΅ΠΊ, поэтому, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ воспроизвСдСниС Π²ΠΈΠ΄Π΅ΠΎ-ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π²ΠΎ всСх Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…, Π²ΠΈΠ΄Π΅ΠΎ-Ρ„Π°ΠΉΠ» Π½ΡƒΠΆΠ½ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ Π² Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°Ρ….

H.264 β€” высококачСствСнный ΠΊΠΎΠ΄Π΅ΠΊ ΠΎΡ‚ Ρ„ΠΈΡ€ΠΌΡ‹ MPEG, дСлится Π½Π° ΠΏΡ€ΠΎΡ„ΠΈΠ»ΠΈ для ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ ΠΊΠ°ΠΊ устройств с ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΌΠΈ возмоТностями, Ρ‚Π°ΠΊ ΠΈ устройств высокого Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ.

Ogg Theora β€” ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΉ бСсплатный стандарт для Π²ΠΈΠ΄Π΅ΠΎ, качСство ΠΈ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ нСсколько Π½ΠΈΠΆΠ΅ стандарта H.264.

VP8 β€” ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΉ бСсплатный ΠΊΠΎΠ΄Π΅ΠΊ, сходный ΠΏΠΎ качСству с H.264. ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ΡΡ Π² Firefox, Chrome ΠΈ Opera.

4. Π’ΠΈΠ΄Π΅ΠΎΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹

Π›ΡŽΠ±ΠΎΠΉ Π²ΠΈΠ΄Π΅ΠΎΡ„Π°ΠΉΠ» являСтся Ρ„Π°ΠΉΠ»ΠΎΠ²Ρ‹ΠΌ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠΌ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ хранятся Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ„Π°ΠΉΠ»Ρ‹. Аудио- ΠΈ Π²ΠΈΠ΄Π΅ΠΎΠ΄ΠΎΡ€ΠΎΠΆΠΊΠΈ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΡŽΡ‚ΡΡ для воспроизвСдСния Π²ΠΈΠ΄Π΅ΠΎΡ€ΠΎΠ»ΠΈΠΊΠ°. ΠœΠ΅Ρ‚Π°Π΄Π°Π½Π½Ρ‹Π΅ содСрТат ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ Π΄Π°Π½Π½ΠΎΠΌ Π²ΠΈΠ΄Π΅ΠΎΡ€ΠΎΠ»ΠΈΠΊΠ΅ β€” ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠ±Π»ΠΎΠΆΠΊΠΈ, субтитры ΠΈ ΠΏΡ€. К популярным Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°ΠΌ Π²ΠΈΠ΄Π΅ΠΎΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠ² относятся ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅:

На Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ Ρ‚Ρ€ΠΈ основных Π²ΠΈΠ΄Π΅ΠΎ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°:

ЀорматВидСокодСкАудиокодСк
.mp4H.264AAC
.ogg/.ogvTheoraVorbis
.webmVP8Vorbis

5. ΠΠ»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΌΠ΅Π΄ΠΈΠ°-рСсурсы

Π’Π°Π±Π»ΠΈΡ†Π° 3. Атрибуты Ρ‚Π΅Π³Π°

ΠΡ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠžΠΏΠΈΡΠ°Π½ΠΈΠ΅, ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅ΠΌΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅
mediaΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ Ρ‚ΠΈΠΏ ΠΌΠ΅Π΄ΠΈΠ°-устройства (Ρ‚.Π΅. для ΠΊΠ°ΠΊΠΈΡ… устройств ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½ Ρ„Π°ΠΉΠ»).
srcΠ‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΡ‚ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹ΠΉ ΠΈΠ»ΠΈ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ URL-адрСс ΠΌΠ΅Π΄ΠΈΠ°Ρ„Π°ΠΉΠ»Π°.
typeΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ MIME-Ρ‚ΠΈΠΏ ΠΌΠ΅Π΄ΠΈΠ°Ρ„Π°ΠΉΠ»Π°.

6. Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ субтитров ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ²

Π’Π°Π±Π»ΠΈΡ†Π° 4. Атрибуты Ρ‚Π΅Π³Π°
ΠΡ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠžΠΏΠΈΡΠ°Π½ΠΈΠ΅, ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅ΠΌΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅
defaultΠ£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ данная Π΄ΠΎΡ€ΠΎΠΆΠΊΠ° воспроизводится ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ. Волько ΠΎΠ΄ΠΈΠ½ элСмСнтмоТСт ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ Π΄Π°Π½Π½Ρ‹ΠΉ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚.
kindΠ£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Ρ‚ΠΈΠΏ тСкстовой Π΄ΠΎΡ€ΠΎΠΆΠΊΠΈ, ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ выводятся субтитры ( subtitles ). ΠŸΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅ΠΌΡ‹Π΅ значСния:
captions β€” ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ² ΠΈ Π·Π²ΡƒΠΊΠΎΠ²Ρ‹Ρ… эффСктов, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΡ‹ΠΉ Π² Π²ΠΈΠ΄Π΅ тСкста ΠΏΠΎΠ²Π΅Ρ€Ρ… Π²ΠΈΠ΄Π΅ΠΎ (для Π³Π»ΡƒΡ…ΠΈΡ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ).
chapters β€” добавляСт названия Π³Π»Π°Π² Π² Π²ΠΈΠ΄Π΅ списка для Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΏΠΎ ΠΌΠ΅Π΄ΠΈΠ°Ρ„Π°ΠΉΠ»Ρƒ.
descriptions β€” добавляСт Π·Π²ΡƒΠΊΠΎΠ²ΠΎΠ΅ описаниС происходящСго Π² Π²ΠΈΠ΄Π΅ΠΎ (для нСвидящих ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ).
metadata β€” ΠΌΠ΅Ρ‚Π°Π΄Π°Π½Π½Ρ‹Π΅, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ скриптами, Π½Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ.
subtitles β€” тСкстовоС Π΄ΡƒΠ±Π»ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π·Π²ΡƒΠΊΠΎΠ²ΠΎΠΉ Π΄ΠΎΡ€ΠΎΠΆΠΊΠΈ Π²ΠΈΠ΄Π΅ΠΎ, отобраТаСтся Π² Π²ΠΈΠ΄Π΅ субтитров ΠΊ Π²ΠΈΠ΄Π΅ΠΎ.
labelДобавляСт Π½Π°Π·Π²Π°Π½ΠΈΠ΅ Π΄ΠΎΡ€ΠΎΠΆΠΊΠΈ. Если этот Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Π½Π΅ Π·Π°Π΄Π°Π½, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.
srcΠ‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΡ‚ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹ΠΉ ΠΈΠ»ΠΈ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ URL-адрСс Π°ΡƒΠ΄ΠΈΠΎ- ΠΈΠ»ΠΈ Π²ΠΈΠ΄Π΅ΠΎΡ„Π°ΠΉΠ»Π°.
srclangΠ―Π·Ρ‹ΠΊ воспроизводимой Π΄ΠΎΡ€ΠΎΠΆΠΊΠΈ.

7. ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Π΅ΠΌ Π²ΠΈΠ΄Π΅ΠΎ Π½Π° сайтС

Π Π°Π·ΠΌΠ΅Ρ‰Π°Π΅ΠΌ ΠΊΠΎΠ΄ для вставки Π²ΠΈΠ΄Π΅ΠΎ Π½Π° сайт с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ HTML5-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ для задания Π²ΠΈΠ΄Π΅ΠΎ Ρ‚Ρ€Π΅Π±ΡƒΠ΅ΠΌΡ‹Ρ… ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ²:

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ Π²ΠΈΠ΄Π΅ΠΎΠΏΠ»Π΅Π΅Ρ€ Π½Π° страницС, Π½ΡƒΠΆΠ½ΠΎ ΠΎΠ±Π΅Ρ€Π½ΡƒΡ‚ΡŒ элСмСнт Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€

8. Π’ΠΈΠ΄Π΅ΠΎΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚Π΅Ρ€Ρ‹

Movavi β€” позволяСт ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π²ΠΈΠ΄Π΅ΠΎ ΠΈ Π°ΡƒΠ΄ΠΈΠΎ Π² Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ΠΉ Π²Π°ΠΌ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚. БохраняСт ΠΌΠ΅Π΄ΠΈΠ°Ρ„Π°ΠΉΠ»Ρ‹ для проигрывания Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах. Β«Π£ΠΌΠ½Ρ‹Π΅Β» Π³ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ ΠΏΡ€ΠΎΡ„ΠΈΠ»ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π΄ΠΎΠ±ΠΈΠ²Π°Ρ‚ΡŒΡΡ максимального качСства.

How to put video in html. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ How to put video in html. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ How to put video in html. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ How to put video in html. Π€ΠΎΡ‚ΠΎ How to put video in html

ONLINE-CONVERT β€” бСсплатный ΠΎΠ½Π»Π°ΠΉΠ½-ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚Π΅Ρ€, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π»ΡŽΠ±Ρ‹Π΅ ΠΌΠ΅Π΄ΠΈΠ°-Ρ„Π°ΠΉΠ»Ρ‹ ΠΈΠ· ΠΎΠ΄Π½ΠΎΠ³ΠΎ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° Π² Π΄Ρ€ΡƒΠ³ΠΎΠΉ.

How to put video in html. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ How to put video in html. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ How to put video in html. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ How to put video in html. Π€ΠΎΡ‚ΠΎ How to put video in html

Firefogg β€” ΠΌΠΎΠ΄ΡƒΠ»ΡŒ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ для Firefox, ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π²ΠΈΠ΄Π΅ΠΎΡ„Π°ΠΉΠ»Ρ‹ Theora ΠΈ WebM. Π Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ нСпосрСдствСнно Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, Π½ΠΎ вся Ρ€Π°Π±ΠΎΡ‚Π° выполняСтся локально Π±Π΅Π· обращСния ΠΊ Π²Π΅Π±-сСрвСру.

How to put video in html. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ How to put video in html. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ How to put video in html. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ How to put video in html. Π€ΠΎΡ‚ΠΎ How to put video in html

CloudConvert β€” ΠΎΠ½Π»Π°ΠΉΠ½-ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚Π΅Ρ€ Ρ„Π°ΠΉΠ»ΠΎΠ². ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ практичСски любой Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ Π°ΡƒΠ΄ΠΈΠΎ, Π²ΠΈΠ΄Π΅ΠΎ, Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠ², элСктронных ΠΊΠ½ΠΈΠ³, Π°Ρ€Ρ…ΠΈΠ²ΠΎΠ², ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, элСктронных Ρ‚Π°Π±Π»ΠΈΡ† ΠΈΠ»ΠΈ ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΠΉ.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊΠΈ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ:

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *