Thẻ video trong html5

     

The HTML element embeds a truyền thông media player which supports Clip playback into the document. You can use for audio content as well, but the element may provide a more appropriate user experience.

Bạn đang xem: Thẻ video trong html5


The above sầu example shows simple usage of the element. In a similar manner to the

*
source src="https://bommobile.vn/myVideo.webm" type="video/webm"> p>Your browser doesn"t tư vấn HTML5 đoạn phim. Here is a a href="https://bomthiết bị di động.vn/the-video-trong-html5/imager_1_102225_700.jpg">liên kết lớn the videoa> instead.p>video>We offer a substantive và thorough guide to truyền thông tệp tin types & the guide to lớn the codecs supported for video. Also available is a guide lớn audio codecs that can be used with them.

Other usage notes:

To demo the fallbaông chồng content on browsers that support the element, you can replace with a non-existing element like .

A good general source of information on using HTML is the Video và audio nội dung beginner"s tutorial.


The element is a replaced element — its display value is inline by mặc định, but its mặc định width & height in the viewport is defined by the video being embedded.

There are no special considerations for styling ; a common strategy is lớn give it a display value of bloông chồng to make it easier to position, kích cỡ, etc., & then provide styling & layout information as required. Video player styling basics provides some useful styling techniques.


You can detect when tracks are added khổng lồ and removed from a element using the addtraông chồng và removetrachồng events. However, these events aren"t sent directly lớn the element itself. Instead, they"re sent lớn the traông chồng danh mục object within the element"s HTMLMediaElement that corresponds lớn the type of trachồng that was added to lớn the element:

HTMLMediaElement.audioTracks An AudioTrackList containing all of the truyền thông media element"s audio tracks. You can add a listener for addtraông chồng to this object to lớn be alerted when new audio tracks are added lớn the element. HTMLMediaElement.videoTracks Add an addtraông chồng listener lớn this VideoTrackList object to be informed when video tracks are added to lớn the element. HTMLMediaElement.textTracks Add an addtraông chồng event listener khổng lồ this TextTrackList to be notified when new text tracks are added to lớn the element.

For example, lớn detect when audio tracks are added to or removed from a element, you can use code like this:

var elem = document.querySelector("video");elem.audioTrackList.onaddtrack = function(event) trackEditor.addTrack(sự kiện.track);;elem.audioTrackList.onremovetraông chồng = function(event) trackEditor.removeTrack(sự kiện.track);;This code watches for audio tracks to be added khổng lồ and removed from the element, và calls a hypothetical function on a trachồng editor to lớn register and remove sầu the traông chồng from the editor"s list of available tracks.

You can also use addEventListener() to listen for the addtraông xã and removetrachồng events.


This example plays a đoạn phim when activated, providing the user with the browser"s mặc định Clip controls lớn control playbaông xã.

video controls src="https://archive sầu.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217" width="620">Sorry, your browser doesn"t tư vấn embedded videos,but don"t worry, you can a href="https://archive sầu.org/details/BigBuckBunny_124">tải về ita>và watch it with your favorite video player!video>

Until the video clip starts playing, the image provided in the poster attribute is displayed in its place. If the browser doesn"t support đoạn phim playback, the fallbaông xã text is displayed.


This example builds on the last one, offering three different sources for the media; this allows the đoạn Clip lớn be watched regardless of which đoạn phim codecs are supported by the browser.

đoạn Clip width="620" controls poster="https://upload.wikitruyền thông media.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg" > source src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4" type="video/mp4"> source src="https://archive sầu.org/download/ElephantsDream/ed_hd.ogv" type="video/ogg"> source src="https://archive.org/download/ElephantsDream/ed_hd.avi" type="video/avi"> Your browser doesn"t tư vấn HTML5 đoạn Clip tag.video>

First WebM is tried. If that can"t be played, then MP4 is tried. Finally, Ogg is tried. A fallback message is displayed if the đoạn phim element isn"t supported, but not if all sources fail.

Xem thêm: Những Món Ngon Nổi Tiếng Miền Tây Nam Bộ Ngon "Miễn Chê", Những Món Ngon Nổi Tiếng Miền Tây

Some truyền thông media tệp tin types let you provide more specific information using the codecs parameter as part of the file"s type string. A relatively simple example is video/webm; codecs="vp8, vorbis", which says that the tệp tin is a WebM đoạn Clip using VP8 for its video và Vorbis for audio.


If the MIME type for the video is not phối correctly on the hệ thống, the đoạn phim may not show or show a gray box containing an X (if JavaScript is enabled).

If you use Apabịt Web Server to lớn serve Ogg Theora videos, you can fix this problem by adding the đoạn phim file type extensions to lớn "video/ogg" MIME type. The most comtháng video file type extensions are ".ogm", ".ogv", or ".ogg". To bởi vì this, edit the "mime.types" file in "/etc/apache" or use the "AddType" configuration directive in httpd.conf.

AddType video/ogg .ogmAddType video/ogg .ogvAddType video/ogg .oggIf you serve sầu your videos as WebM, you can fix this problem for the Apabịt Web Server by adding the extension used by your video clip files (".webm" is the most comtháng one) lớn the MIME type "video/webm" via the "mime.types" file in "/etc/apache" or via the "AddType" configuration directive in httpd.conf.

AddType video/webm .webmYour website host may provide an easy interface to MIME type configuration changes for new technologies until a global update naturally occurs.


Videos should provide both captions & transcripts that accurately describe its nội dung (see Adding captions and subtitles to HTML5 video clip for more information on how to lớn implement these). Captions allow people who are experiencing hearing loss lớn underst& a video"s audio content as the video clip is being played, while transcripts allow people who need additional time lớn be able to Reviews audio nội dung at a pace và format that is comfortable for them.

It"s worth noting that while you can caption audio-only truyền thông, you can only do so when playing audio in a element, since the đoạn Clip region of the element is used lớn present the captions. This is one of the special scenarios in which it"s useful to lớn play audio in a Clip element.

If automatic captioning services are used, it is important to lớn Đánh Giá the generated nội dung to lớn ensure it accurately represents the source video.

In addition to lớn spoken dialog, subtitles và transcripts should also identify music & sound effects that communicate important information. This includes emotion and tone:

1400:03:14 --> 00:03:181500:03:19 --> 00:03:21 What"s that off in the distance?1600:03:22 --> 00:03:24It"s… it"s a…16 00:03:25 --> 00:03:32Captions should not obstruct the main subject of the đoạn phim. They can be positioned using the align VTT cue setting.


Content categories Permitted content Tag omission Permitted parents Implicit ARIA role Permitted ARIA roles DOM interface
Flow content, phrasing nội dung, embedded content. If it has a controls attribute: interactive nội dung và palpable nội dung.

If the element has a src attribute: zero or more elements, followed by transparent content that contains no truyền thông elements–that is no or

Else: zero or more elements, followed by zero or more elements, followed by transparent nội dung that contains no truyền thông media elements–that is no or .

None, both the starting and ending tag are mandatory.
Any element that accepts embedded content.
No corresponding role
application
HTMLVideoElement


Chuyên mục: Tin Tức