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.0 | 9.0 | 3.5 | 4.0 | 10.5 |
HTML Video Formats
There are three supported video formats: MP4, WebM, and Ogg. The browser support for the different formats is:
Browser | MP4 | WebM | Ogg |
---|---|---|---|
Edge | YES | YES | YES |
Chrome | YES | YES | YES |
Firefox | YES | YES | YES |
Safari | YES | YES | NO |
Opera | YES | YES | YES |
File Format | Media Type |
---|---|
MP4 | video/mp4 |
WebM | video/webm |
Ogg | video/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 ΠΠ»Π΅ΠΌΠ΅Π½Ρ «>ΠΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π°ΠΌ Π²ΡΡΠ°Π²Π»ΡΡΡ Π²ΠΈΠ΄Π΅ΠΎ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ. ΠΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ°ΠΊ:
ΠΡΡΡΠΎΠ΅Π½Π½ΠΎΠ΅ Π²ΠΈΠ΄Π΅ΠΎ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΠΊ:
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΠΎΡΠΌΠ°ΡΠΎΠ²
ΠΡΠΈΡΡΡΡΡΠ²ΡΠ΅Ρ ΠΎΠ΄Π½Π° ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Ρ ΠΏΡΠΈΠ²Π΅Π΄ΡΠ½Π½ΡΠΌ Π²ΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠΌ, ΠΊΠΎΡΠΎΡΡΡ Π²Ρ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΡΠΆΠ΅ Π·Π°ΠΌΠ΅ΡΠΈΠ»ΠΈ, Π΅ΡΠ»ΠΈ ΠΏΡΡΠ°Π»ΠΈΡΡ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π΄ΠΎΡΡΡΠΏ ΠΊ ΠΏΡΡΠΌΠΎΠΉ ΡΡΡΠ»ΠΊΠ΅ Π²ΡΡΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΊΠ°ΠΊ 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 ΠΡΡΠ³ΠΈΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ «>ΠΡΡΠ³ΠΈΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ
ΠΠ° Π²ΡΡ ΠΎΠ΄Π΅ ΠΏΠΎΠ»ΡΡΠΈΠΌ Π½Π΅ΡΡΠΎ, ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅ ΡΡΠΎΠΌΡ:
ΠΠΎΠ²ΡΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ:
width and height ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ Π²ΠΈΠ΄Π΅ΠΎ Π»ΠΈΠ±ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΈΡ Π°ΡΡΠΈΠ±ΡΡΠΎΠ², Π»ΠΈΠ±ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS. Π ΠΎΠ±ΠΎΠΈΡ ΡΠ»ΡΡΠ°ΡΡ Π²ΠΈΠ΄Π΅ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ β ΠΈΠ·Π²Π΅ΡΡΠ½ΠΎΠ΅ ΠΊΠ°ΠΊ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½. ΠΡΠ»ΠΈ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠΌΠΈ Π²Π°ΠΌΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ, Π²ΠΈΠ΄Π΅ΠΎ Π±ΡΠ΄Π΅Ρ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡΡΡ, ΡΡΠΎΠ±Ρ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΡ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ, Π° Π·Π°ΠΏΠΎΠ»Π½Π΅Π½Π½ΠΎΠΌΡ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π±ΡΠ΄Π΅Ρ Π·Π°Π΄Π°Π½ ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΡΠ²Π΅Ρ ΡΠΎΠ½Π°. autoplay ΠΡΠΎΡ Π°ΡΡΠΈΠ±ΡΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΡΠ°Π·Ρ Π½Π°ΡΠ°ΡΡ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π·Π²ΡΠΊΠ° ΠΈΠ»ΠΈ Π²ΠΈΠ΄Π΅ΠΎ, ΠΏΠΎΠΊΠ° ΠΎΡΡΠ°Π»ΡΠ½Π°Ρ ΡΠ°ΡΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΡΡ. ΠΠ°ΠΌ Π½Π΅ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π°Π²ΡΠΎΠ²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π²ΠΈΠ΄Π΅ΠΎ (ΠΈΠ»ΠΈ Π°ΡΠ΄ΠΈΠΎ) Π½Π° Π²Π°ΡΠΈΡ ΡΠ°ΠΉΡΠ°Ρ , ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΌΠΎΠ³ΡΡ Π½Π°ΠΉΡΠΈ ΡΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ°Π·Π΄ΡΠ°ΠΆΠ°ΡΡΠΈΠΌ. loop ΠΡΠΎΡ Π°ΡΡΠΈΠ±ΡΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡ Π²ΠΈΠ΄Π΅ΠΎ (ΠΈΠ»ΠΈ Π°ΡΠ΄ΠΈΠΎ) ΡΠ½ΠΎΠ²Π°, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ Π·Π°ΠΊΠ°Π½ΡΠΈΠ²Π°Π΅ΡΡΡ. ΠΡΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΡΠ°Π·Π΄ΡΠ°ΠΆΠ°ΡΡ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° ΡΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ. muted ΠΡΠΎΡ Π°ΡΡΠΈΠ±ΡΡ Π·Π°ΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΏΡΠΎΠΈΠ³ΡΡΠ²Π°ΡΠ΅Π»Ρ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡ Π·Π²ΡΠΊ, ΠΎΡΠΊΠ»ΡΡΡΠ½Π½ΡΠΉ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. poster ΠΡΠΎΡ Π°ΡΡΠΈΠ±ΡΡ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ URL-Π°Π΄ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π΄ΠΎ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΡ Π²ΠΈΠ΄Π΅ΠΎ. ΠΠ½ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ Π·Π°ΡΡΠ°Π²ΠΊΠΈ ΠΊ Π²ΠΈΠ΄Π΅ΠΎ ΠΈΠ»ΠΈ ΡΠ΅ΠΊΠ»Π°ΠΌΡ. preload
ΡΡΠΎΡ Π°ΡΡΠΈΠ±ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ Π΄Π»Ρ Π±ΡΡΠ΅ΡΠΈΠ·Π°ΡΠΈΠΈ Π±ΠΎΠ»ΡΡΠΈΡ ΡΠ°ΠΉΠ»ΠΎΠ². ΠΠ½ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΡΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ:
» title=»Permalink to ΠΠ»Π΅ΠΌΠ΅Π½Ρ «>ΠΠ»Π΅ΠΌΠ΅Π½Ρ
Π Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ ΡΡΠΎ Π²ΡΠ·ΡΠ²Π°Π΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅:
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°ΠΏΡΡΡΠΈΡΡ Π°ΡΠ΄ΠΈΠΎ-Π΄Π΅ΠΌΠΎ Π² Github (ΡΠΌ. ΡΠ°ΠΊΠΆΠ΅ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄ Π°ΡΠ΄ΠΈΠΎΠΏΠ»Π΅Π΅ΡΠ°.)
ΠΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΡ Π΄ΠΎΡΠΎΠΆΠ΅ΠΊ ΠΊ Π²ΠΈΠ΄Π΅ΠΎ
Π’Π΅ΠΏΠ΅ΡΡ ΠΌΡ ΠΎΠ±ΡΡΠ΄ΠΈΠΌ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ, ΠΎ ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Π·Π½Π°ΡΡ. ΠΠ½ΠΎΠ³ΠΈΠ΅ Π»ΡΠ΄ΠΈ Π½Π΅ ΠΌΠΎΠ³ΡΡ ΠΈΠ»ΠΈ Π½Π΅ Ρ ΠΎΡΡΡ ΡΠ»ΡΡΠ°ΡΡ Π°ΡΠ΄ΠΈΠΎ ΠΈΠ»ΠΈ Π²ΠΈΠ΄Π΅ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ½ΠΈ Π½Π°Ρ ΠΎΠ΄ΡΡ Π² ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅, ΠΏΠΎ ΠΊΡΠ°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅ΡΠ΅, Π² ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΠΎΠ΅ Π²ΡΠ΅ΠΌΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ:
ΠΠ°ΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: «Π’ΡΠ°Π½ΡΠΊΡΠΈΠ±ΠΈΡΠΎΠ²Π°ΡΡ» Π·Π½Π°ΡΠΈΡ Π·Π°ΠΏΠΈΡΡΠ²Π°ΡΡ ΡΡΡΠ½ΡΡ ΡΠ΅ΡΡ Π² Π²ΠΈΠ΄Π΅ ΡΠ΅ΠΊΡΡΠ°. ΠΠΎΠ»ΡΡΠ΅Π½Π½ΡΠΉ ΡΠ΅ΠΊΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ Β«ΡΡΠ΅Π½ΠΎΠ³ΡΠ°ΠΌΠΌΡΒ».
ΡΡΠ±ΡΠΈΡΡΡ ΠΠ΅ΡΠ΅Π²ΠΎΠ΄Ρ ΠΈΠ½ΠΎΡΡΡΠ°Π½Π½ΠΎΠ³ΠΎ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π°, Π΄Π»Ρ Π»ΡΠ΄Π΅ΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ ΡΠ»ΠΎΠ², ΠΏΡΠΎΠΈΠ·Π½Π΅ΡΡΠ½Π½ΡΡ Π² Π°ΡΠ΄ΠΈΠΎ. ΡΠΈΡΡΡ Π‘ΠΈΠ½Ρ ΡΠΎΠ½ΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΡΠ°Π½ΡΠΊΡΠΈΠΏΡΠΈΠΈ Π΄ΠΈΠ°Π»ΠΎΠ³Π° ΠΈΠ»ΠΈ ΠΎΠΏΠΈΡΠ°Π½ΠΈΡ Π·Π½Π°ΡΠΈΠΌΡΡ Π·Π²ΡΠΊΠΎΠ², ΡΡΠΎΠ±Ρ Π»ΡΠ΄ΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ ΠΌΠΎΠ³ΡΡ ΡΠ»ΡΡΠ°ΡΡ Π·Π²ΡΠΊ, ΠΏΠΎΠ½ΡΠ»ΠΈ ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ. ΡΠ°ΡΡΡΠΈΡΠ°Π½Π½ΡΠ΅ ΠΎΠΏΠΈΡΠ°Π½ΠΈΡ Π’Π΅ΠΊΡΡ Π΄Π»Ρ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΡ Π² Π°ΡΠ΄ΠΈΠΎ, ΡΡΠΎΠ±Ρ ΠΎΠ±ΡΠ»ΡΠΆΠΈΠ²Π°ΡΡ Π»ΡΠ΄Π΅ΠΉ Ρ Π½Π°ΡΡΡΠ΅Π½ΠΈΡΠΌΠΈ Π·ΡΠ΅Π½ΠΈΡ.
Π’ΠΈΠΏΠΈΡΠ½ΡΠΉ ΡΠ°ΠΉΠ» WebVTT Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΠΊ:
Π§ΡΠΎΠ±Ρ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ ΡΡΠΎ Π²ΠΌΠ΅ΡΡΠ΅ Ρ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ° 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
Attribute | Value | Description |
---|---|---|
autoplay | autoplay | When the page is loaded. It specifies to play audio as soon as possible. |
controls | controls | It displays audio control. |
loop | loop | It will start the audio again when it is finished. |
muted | muted | When the page is loaded audio will be automatically muted. |
preload | It specifies how the author thinks the audio will be loaded when the page is ready. | |
src | URL | It 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-Π²ΠΈΠ΄Π΅ΠΎ
Π Π°Π½ΡΡΠ΅, Π΅ΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠ΅Π»ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π²ΠΈΠ΄Π΅ΠΎ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ, Π²Π°ΠΌ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΠ»ΠΎΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΡΡΠΈΠ±ΡΡ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅, ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅ΠΌΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ |
---|---|
autoplay | ΠΠ²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π²ΠΈΠ΄Π΅ΠΎΠΎΡΠ°ΠΉΠ»Π° ΡΡΠ°Π·Ρ ΠΆΠ΅ ΠΏΠΎΡΠ»Π΅ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ. |
controls | Π£ΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΡ, ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ Π±Π°Π·ΠΎΠ²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ (Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΠ΅, ΠΏΠ°ΡΠ·Π°, Π³ΡΠΎΠΌΠΊΠΎΡΡΡ). |
height | ΠΠ°Π΄Π°Π΅Ρ Π²ΡΡΠΎΡΡ ΠΎΠΊΠ½Π° Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²ΠΈΠ΄Π΅ΠΎΠ΄Π°Π½Π½ΡΡ , Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ: px ΠΈΠ»ΠΈ % |
loop | Π¦ΠΈΠΊΠ»ΠΈΡΠ΅ΡΠΊΠΎΠ΅ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π²ΠΈΠ΄Π΅ΠΎΡΠ°ΠΉΠ»Π°. |
muted | ΠΡΠΊΠ»ΡΡΠ°Π΅Ρ Π·Π²ΡΠΊ ΠΏΡΠΈ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π²ΠΈΠ΄Π΅ΠΎΡΠ°ΠΉΠ»Π°. |
poster | URL ΡΠ°ΠΉΠ»Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π²ΠΎ Π²ΡΠ΅ΠΌΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ Π²ΠΈΠ΄Π΅ΠΎΡΠ°ΠΉΠ»Π° ΠΈΠ»ΠΈ Π΄ΠΎ ΡΠ΅Ρ ΠΏΠΎΡ, ΠΏΠΎΠΊΠ° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π΅ Π½Π°ΠΆΠΌΠ΅Ρ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ 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. ΠΠΈΠ΄Π΅ΠΎΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ
ΠΡΠ±ΠΎΠΉ Π²ΠΈΠ΄Π΅ΠΎΡΠ°ΠΉΠ» ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ°ΠΉΠ»ΠΎΠ²ΡΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠΌ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Ρ ΡΠ°Π½ΡΡΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ°ΠΉΠ»Ρ. ΠΡΠ΄ΠΈΠΎ- ΠΈ Π²ΠΈΠ΄Π΅ΠΎΠ΄ΠΎΡΠΎΠΆΠΊΠΈ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΡΡΡΡ Π΄Π»Ρ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΡ Π²ΠΈΠ΄Π΅ΠΎΡΠΎΠ»ΠΈΠΊΠ°. ΠΠ΅ΡΠ°Π΄Π°Π½Π½ΡΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ Π΄Π°Π½Π½ΠΎΠΌ Π²ΠΈΠ΄Π΅ΠΎΡΠΎΠ»ΠΈΠΊΠ΅ β ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠ±Π»ΠΎΠΆΠΊΠΈ, ΡΡΠ±ΡΠΈΡΡΡ ΠΈ ΠΏΡ. Π ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠΌ ΡΠΎΡΠΌΠ°ΡΠ°ΠΌ Π²ΠΈΠ΄Π΅ΠΎΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠ² ΠΎΡΠ½ΠΎΡΡΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅:
ΠΠ° Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΡΠΈ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ Π²ΠΈΠ΄Π΅ΠΎ ΡΠΎΡΠΌΠ°ΡΠ°:
Π€ΠΎΡΠΌΠ°Ρ | ΠΠΈΠ΄Π΅ΠΎΠΊΠΎΠ΄Π΅ΠΊ | ΠΡΠ΄ΠΈΠΎΠΊΠΎΠ΄Π΅ΠΊ |
---|---|---|
.mp4 | H.264 | AAC |
.ogg/.ogv | Theora | Vorbis |
.webm | VP8 | Vorbis |
5. ΠΠ»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠ΅ ΠΌΠ΅Π΄ΠΈΠ°-ΡΠ΅ΡΡΡΡΡ
ΠΡΡΠΈΠ±ΡΡ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅, ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅ΠΌΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ |
---|---|
media | ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠΈΠΏ ΠΌΠ΅Π΄ΠΈΠ°-ΡΡΡΡΠΎΠΉΡΡΠ²Π° (Ρ.Π΅. Π΄Π»Ρ ΠΊΠ°ΠΊΠΈΡ ΡΡΡΡΠΎΠΉΡΡΠ² ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°Π½ ΡΠ°ΠΉΠ»). |
src | Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΉ ΠΈΠ»ΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ URL-Π°Π΄ΡΠ΅Ρ ΠΌΠ΅Π΄ΠΈΠ°ΡΠ°ΠΉΠ»Π°. |
type | ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ MIME-ΡΠΈΠΏ ΠΌΠ΅Π΄ΠΈΠ°ΡΠ°ΠΉΠ»Π°. |
6. ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΡΠ±ΡΠΈΡΡΠΎΠ² ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ²
7. ΠΡΠΈΠΌΠ΅Ρ: ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΠΌ Π²ΠΈΠ΄Π΅ΠΎ Π½Π° ΡΠ°ΠΉΡΠ΅
Π Π°Π·ΠΌΠ΅ΡΠ°Π΅ΠΌ ΠΊΠΎΠ΄ Π΄Π»Ρ Π²ΡΡΠ°Π²ΠΊΠΈ Π²ΠΈΠ΄Π΅ΠΎ Π½Π° ΡΠ°ΠΉΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ HTML5-ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π°ΡΡΠΈΠ±ΡΡΡ Π΄Π»Ρ Π·Π°Π΄Π°Π½ΠΈΡ Π²ΠΈΠ΄Π΅ΠΎ ΡΡΠ΅Π±ΡΠ΅ΠΌΡΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ²:
ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ Π²ΡΡΠΎΠ²Π½ΡΡΡ Π²ΠΈΠ΄Π΅ΠΎΠΏΠ»Π΅Π΅Ρ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅, Π½ΡΠΆΠ½ΠΎ ΠΎΠ±Π΅ΡΠ½ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ
8. ΠΠΈΠ΄Π΅ΠΎΠΊΠΎΠ½Π²Π΅ΡΡΠ΅ΡΡ
Movavi β ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΊΠΎΠ½Π²Π΅ΡΡΠΈΡΠΎΠ²Π°ΡΡ Π²ΠΈΠ΄Π΅ΠΎ ΠΈ Π°ΡΠ΄ΠΈΠΎ Π² Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠΉ Π²Π°ΠΌ ΡΠΎΡΠΌΠ°Ρ. Π‘ΠΎΡ ΡΠ°Π½ΡΠ΅Ρ ΠΌΠ΅Π΄ΠΈΠ°ΡΠ°ΠΉΠ»Ρ Π΄Π»Ρ ΠΏΡΠΎΠΈΠ³ΡΡΠ²Π°Π½ΠΈΡ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ . Β«Π£ΠΌΠ½ΡΠ΅Β» Π³ΠΎΡΠΎΠ²ΡΠ΅ ΠΏΡΠΎΡΠΈΠ»ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π΄ΠΎΠ±ΠΈΠ²Π°ΡΡΡΡ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΊΠ°ΡΠ΅ΡΡΠ²Π°.
ONLINE-CONVERT β Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠΉ ΠΎΠ½Π»Π°ΠΉΠ½-ΠΊΠΎΠ½Π²Π΅ΡΡΠ΅Ρ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠΈΠΉ ΠΊΠΎΠ½Π²Π΅ΡΡΠΈΡΠΎΠ²Π°ΡΡ Π»ΡΠ±ΡΠ΅ ΠΌΠ΅Π΄ΠΈΠ°-ΡΠ°ΠΉΠ»Ρ ΠΈΠ· ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠΎΡΠΌΠ°ΡΠ° Π² Π΄ΡΡΠ³ΠΎΠΉ.
Firefogg β ΠΌΠΎΠ΄ΡΠ»Ρ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΡ Π΄Π»Ρ Firefox, ΠΌΠΎΠΆΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π²ΠΈΠ΄Π΅ΠΎΡΠ°ΠΉΠ»Ρ Theora ΠΈ WebM. Π Π°Π±ΠΎΡΠ°Π΅Ρ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅, Π½ΠΎ Π²ΡΡ ΡΠ°Π±ΠΎΡΠ° Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎ Π±Π΅Π· ΠΎΠ±ΡΠ°ΡΠ΅Π½ΠΈΡ ΠΊ Π²Π΅Π±-ΡΠ΅ΡΠ²Π΅ΡΡ.
CloudConvert β ΠΎΠ½Π»Π°ΠΉΠ½-ΠΊΠΎΠ½Π²Π΅ΡΡΠ΅Ρ ΡΠ°ΠΉΠ»ΠΎΠ². ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π»ΡΠ±ΠΎΠΉ ΡΠΎΡΠΌΠ°Ρ Π°ΡΠ΄ΠΈΠΎ, Π²ΠΈΠ΄Π΅ΠΎ, Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ², ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΡΡ ΠΊΠ½ΠΈΠ³, Π°ΡΡ ΠΈΠ²ΠΎΠ², ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΡΡ ΡΠ°Π±Π»ΠΈΡ ΠΈΠ»ΠΈ ΠΏΡΠ΅Π·Π΅Π½ΡΠ°ΡΠΈΠΉ.