diff options
Diffstat (limited to 'files/vi/learn/html/multimedia_and_embedding')
| -rw-r--r-- | files/vi/learn/html/multimedia_and_embedding/index.html | 75 | ||||
| -rw-r--r-- | files/vi/learn/html/multimedia_and_embedding/video_and_audio_content/index.html | 274 |
2 files changed, 0 insertions, 349 deletions
diff --git a/files/vi/learn/html/multimedia_and_embedding/index.html b/files/vi/learn/html/multimedia_and_embedding/index.html deleted file mode 100644 index 3b40801d47..0000000000 --- a/files/vi/learn/html/multimedia_and_embedding/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Multimedia and embedding -slug: Learn/HTML/Multimedia_and_embedding -tags: - - Assessment - - Audio - - Beginner - - CodingScripting - - Flash - - Guide - - HTML - - Images - - Landing - - Learn - - NeedsTranslation - - SVG - - TopicStub - - Video - - iframes - - imagemaps - - responsive -translation_of: Learn/HTML/Multimedia_and_embedding ---- -<p>{{LearnSidebar}}</p> - -<p class="summary"></p> - -<p class="summary">Chúng ta đã xem xét rất nhiều văn bản trong khóa học cho đến nay, nhưng một trang web sẽ thực sự nhàm chán nếu chỉ sử dụng văn bản. Cùng bắt đầu tìm hiểu cách làm cho web trở nên sống động với nhiều nội dung thú vị hơn! Mô-dun này khám phá cách sử dụng HTML để đưa các nội dung đa phương tiện vào trong các trang web, bao gồm nhiều cách khác nhau mà hình ảnh có thể được đưa vào và cách thức để nhúng video, âm thanh và thậm chí toàn bộ trang web.</p> - -<h2 id="Điều_kiện_tiên_quyết">Điều kiện tiên quyết</h2> - -<p>Trước khi bắt đầu mô-dun này, bạn nên có kiến thức nhất định về những điều cơ bản của HTML, như đã trình bày trước đây trong phần <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>. Nếu bạn chưa đi qua mô-dun này (hay những phần tương tự), hãy tìm hiểu qua nó trước, sau đó quay lại!</p> - -<div class="note"> -<p><strong>Lưu ý</strong>: Nếu bạn làm việc trên máy tính / máy tính bảng / thiết bị khác mà bạn không có khả năng tạo file của riêng bạn, bạn có thể thử (đa phần) các ví dụ code trong các chương trình code chẳng hạn như <a href="https://jsbin.com/">JSBin</a> hay <a href="https://thimble.mozilla.org/">Thimble</a>.</p> -</div> - -<h2 id="Hướng_dẫn">Hướng dẫn</h2> - -<p>Mô-dun này bao gồm các bài viết sẽ đưa bạn đi qua tất cả những nguyên tắc cơ bản của việc nhúng đa phương tiện trên các trang web.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Hình ảnh trong HTML</a></dt> - <dd>Có nhiều loại hình đa phương tiện cần xem xét, nhưng hợp lý là bắt đầu với phần tử {{htmlelement("img")}} khiêm tốn được sử dụng để nhúng một hình ảnh đơn giản vào trong một trang web. Trong bài viết này chúng ta sẽ xem xét cách sử dụng nó sâu hơn, bao gồm cả những điều cơ bản, chú thích nó bằng cách sử dụng {{htmlelement("figure")}}, và cách nó liên quan đến hình nền CSS.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Nội dung video và âm thanh</a></dt> - <dd>Tiếp theo, chúng ta xem xét làm cách nào để sử dụng các nhân tố HTML5 {{htmlelement("video")}} và {{htmlelement("audio")}} để nhúng video và audio vào các trang web, bao gồm cả những điều cơ bản, cung cấp quyền truy cập vào các định dạng tệp cho các trình duyệt khác nhau , thêm chú thích và phụ đề cũng như cách thêm dự phòng cho các trình duyệt cũ hơn.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">Từ <object> đến <iframe> — các công nghệ nhúng khác</a></dt> - <dd>Tại thời điểm này, chúng tôi muốn thực hiện một số bước khác, xem xét một số yếu tố cho phép bạn nhúng nhiều loại nội dung khác nhau vào các trang web của mình: các nhân tố {{htmlelement("iframe")}},{{htmlelement("embed")}} và {{htmlelement("object")}}. <code><iframe> </code>là để nhúng các trang web khác, hai nhân tố còn lại cho phep bạn nhúng các file PDF, SVG hay thậm chí là Flash - một công nghệ đang được phát triển, nhưng bạn vẫn có thể thấy nó bán thường xuyên.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Thêm đồ họa vector vào web</a></dt> - <dd>Đồ họa vector có thể rất hữu ích trong một số trường hợp nhất định. Không giống như các định dạng thông thường như PNG/JPG, chúng không làm biến dạng/vỡ điểm ảnh khi phóng to - chúng có thể vẫn mượt mà khi thu nhỏ. Bài viết này giới thiệu với bạn về đồ họa vector là gì và cách đưa định dạng {{glossary("SVG")}} phổ biến trong các trang web.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Hình ảnh phản hồi</a></dt> - <dd>Hiện có nhiều các thiết bị khác nhau có thể truy cập vào Web - từ điện thoại di động đến các máy tính để bàn - một khái niệm cần thiết hiện tại đề là chủ được công nghệ web hiện đại đó là thiết kế đáp ứng. Điều này đề cập đến việc tạo ra các trang web có thể tự động thay đổi các tính năng của nó để phù hợp với các loại kích cỡ màn hình khác nhau, các độ phân giải khác nhau, v.v. Vấn đề này sẽ được đề cập chi tiết hơn trong mô đun CSS sau này, nhưng hiện tại chúng ta xem xét các công cụ HTML có sẵn để tạo ra các trang web đáp ứng, bao gồm các phần tử {{htmlelement("picture")}}.</dd> -</dl> - -<h2 id="Đánh_giá">Đánh giá</h2> - -<p>Bài đánh giá sau đây sẽ kiểm tra sự hiểu biết của bạn về các khía niệm cơ bản về HTML được đề cập trong các hướng dẫn ở trên:</p> - -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Trang giật gân Mozilla</a></dt> - <dd>Trong bài đánh giá này, chúng tôi sẽ kiểm tra kiến thức của bạn về các kỹ thuật được thảo luận trong mô đun này, giúp bạn thêm một số hình ảnh và video vào một trang giật gân thú vị về Mozilla!</dd> -</dl> - -<h2 id="Xem_thêm">Xem thêm</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">Thêm một bản đồ trên đầu một hình ảnh</a></dt> - <dd>Bản đồ hình ảnh cung cấp một cơ chế để làm cho các phần khác nhau của hình ảnh liên kết đến các địa điểm khác nhau (hãy nghĩ về một bản đồ liên kết đến thông tin thêm về mỗi quốc gia khác nhau mà bạn click vào). Kỹ thuật này đôi khi có thể hữu ích.</dd> - <dt><a href="https://teach.mozilla.org/activities/web-lit-basics-two/">Kiến thức cơ bản về Web 2</a></dt> - <dd> - <p>Một điều tuyệt vời của khóa học nền tảng này của Modzilla là khám phá và kiểm tra một số kỹ năng được đề cập trong mô đun <em>Đa phương tiện và nhúng </em>này. Tìm hiểu sâu hơn về soạn thảo web, thiết kế khả năng truy cập, chia sẻ tài nguyên, sử dụng phương tiện trực tuyến, và làm việc mở (nghĩa là nội dung của bạn có sẵn và được người khác chia sẻ miễn phí).</p> - - - </dd> -</dl> diff --git a/files/vi/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/vi/learn/html/multimedia_and_embedding/video_and_audio_content/index.html deleted file mode 100644 index 23a21a7731..0000000000 --- a/files/vi/learn/html/multimedia_and_embedding/video_and_audio_content/index.html +++ /dev/null @@ -1,274 +0,0 @@ ---- -title: Video and audio content -slug: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content -translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</div> - -<p class="summary">Một khi đã cảm thấy tự tin làm việc với hình ảnh trên web, bước tiếp theo chúng ta học cách thêm video và audio player vào HTML! Trong bài viết này chúng ta sẽ học cách sử dụng thẻ {{htmlelement("video")}} và {{htmlelement("audio")}} ; cách thêm captions/subtitles vào trong video.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Cần nắm trước:</th> - <td>Kiến thức máy tính căn bản, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">biết cài đặt phần mềm</a>, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">làm việc với file</a>, có nền tảng HTML (đã giới thiệu trong bài <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a>) và <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a>.</td> - </tr> - <tr> - <th scope="row">Mục tiêu:</th> - <td>Học cách chèn video và audio vào web, thêm caption/subtitles.</td> - </tr> - </tbody> -</table> - -<h2 id="Audio_và_video_trên_web">Audio và video trên web</h2> - -<p>Web developer đã muốn sử dụng audio và video từ rất lâu, trước những năm 2000, khi chúng ta bắt đầu có mạng với băng thông lớn hơn, đủ đáp ứng nhiều loại video, (file video thường lớn hơn nhiều so với hình và text.) Trước đây, HTML không thể nhúng video và audio trên Web, trước đây chúng ta sử dụng những plugin như <a href="https://en.wikipedia.org/wiki/Adobe_Flash">Flash</a> (sau đó là <a href="https://en.wikipedia.org/wiki/Microsoft_Silverlight">Silverlight</a>) để xử lý những nội dung dạng này. Các công nghệ này vướng phải nhiều vấn đề, như không tương thích tốt với HTML/CSS, lỗi bảo mật, và các vấn đề với accessibility.</p> - -<p>{{glossary("HTML5")}} specification đã bổ sung element {{htmlelement("video")}} và {{htmlelement("audio")}}, cùng với {{Glossary("JavaScript")}} {{Glossary("API","APIs")}} để làm việc với 2 element này. Chúng ta không bàn về JavaScript ở đây — chỉ những phần cơ bản có thể với HTML.</p> - -<p>Chúng ta sử dụng <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">file audio và video ví dụ </a> để làm.</p> - -<div class="note"> -<p><strong>Ghi chú</strong>: Trước khi bắt đầu, bạn cũng nên biết những trang {{glossary("OVP","OVPs")}} (online video providers) như <a href="https://www.youtube.com/">YouTube</a>, <a href="http://www.dailymotion.com">Dailymotion</a>, và <a href="https://vimeo.com/">Vimeo</a>, và online audio providers như <a href="https://soundcloud.com/">Soundcloud</a>. Dùng các dịch vụ này để host và hiển thijvideo sẽ đơn giản và tiện lợi hơn, không cần lo lắng về vấn đề băng thông, OVPs cũng thường có hổ trợ code để nhúng video/audio vào web.</p> -</div> - -<h3 id="Thẻ_<video>">Thẻ <video></h3> - -<p>Ví dụ cách sử dụng thẻ {{htmlelement("video")}}:</p> - -<pre class="brush: html"><video src="rabbit320.webm" controls> - <p>Trình duyệt không hổ trợ HTML5 video. Đây là <a href="rabbit320.webm">link đến file video</a></p> -</video></pre> - -<p> </p> - -<dl> - <dt>{{htmlattrxref("src","video")}}</dt> - <dd>Tương tự như src của {{htmlelement("img")}}, attribute <code>src</code> chứa đường dẫn đến file video muốn nhúng.</dd> - <dt>{{htmlattrxref("controls","video")}}</dt> - <dd><code>controls</code> cho phép sử dụng giao diện điều khiển trình chiếu video của trình duyệt, hoặc tự build một giao diện bằng <a href="/en-US/docs/Web/API/HTMLMediaElement">JavaScript API</a>. Căn bản nhất, giao diện sẽ có nút start và stop, điều chỉnh âm lượng.</dd> - <dt>Thẻ paragraph trong <code><video></code></dt> - <dd>Gọi là <strong>fallback content</strong> — nó sẽ hiện thị nếu trình duyệt không hổ trợ thẻ <code><video></code> , cho phép chúng ta hiển thị fallback nếu user đang dùng trình duyệt cũ.</dd> -</dl> - -<p>Video nhúng sẽ được hiển thị như sau:</p> - -<p><img alt="A simple video player showing a video of a small white rabbit" src="https://mdn.mozillademos.org/files/12794/simple-video.png" style="display: block; height: 592px; margin: 0px auto; width: 589px;"></p> - -<p>Dùng <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">thử ví dụ trực tiếp</a> ở đây (xem <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">source code</a>.)</p> - -<h3 id="Hổ_trợ_nhiều_loại_formats">Hổ trợ nhiều loại formats</h3> - -<p>Có một vấn đề với ví dụ ở trên, nếu mở bằng Safari hoặc Internet Explorer. Video sẽ không phát! Bởi vì mỗi trình duyệt chỉ hỗ trợ kiểu video và audio nhất định.</p> - -<p>Những định dạng MP3, MP4 và WebM được gọi là <strong>container formats</strong>. nó sẽ chứa nhiều phần khác nhau tạo thành một bài hát hoặc video — chằng hạn như video track, audio track, và metadata để diễn giải nội dung file media.</p> - -<p>Audio và video track cũng có nhiều định dạng khác nhau, ví dụ:</p> - -<ul> - <li>WebM container thường bao gồm Ogg Vorbis audio với VP8/VP9 video. Được hổ trợ chủ yếu bởi Firefox và Chrome.</li> - <li>MP4 container thường bao gồm AAC hoặc MP3 audio với H.264 video. Được hổ trợ chủ yếu bởi Internet Explorer và Safari.</li> - <li>Ogg container (đã cũ) thường có Ogg Vorbis audio và Ogg Theora video. Được hổ trợ chủ yếu bởi Firefox và Chrome, bị xóa sổ bởi định dạng WebM cho chất lượng âm thanh hình ảnh tốt hơn.</li> -</ul> - -<p>Audio player thường phát audio track trực tiếp, e.g. an MP3 hoặc Ogg . Nó không cần container.</p> - -<div class="note"> -<p><strong>Ghi chú</strong>: Vấn đề này không hề đơn giản, nếu bạn xem qua bảng<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility"> audio-video codec compatibility </a>. Thêm nữa, nhiều trình duyệt trên mobile có thể phát unsupported format bằng việc sử dụng trình phát của hệ thống, không thông qua trình duyệt.</p> -</div> - -<p>Trình duyệt sử dụng những bộ <strong>{{Glossary("Codec","Codecs")}} </strong>khác nhau, như Vorbis hoặc H.264. Như đã đề cập ở trên, trình duyệt lại không hổ trợ toàn bộ codec, vì vậy bạn phải cung cấp nhiều định dạng khác nhau. Nếu thiếu bộ codec đúng để giải mã, nó sẽ không phát.</p> - -<p>Xem ví dụ bên dưới để biết cách làm <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">ví dụ được cập nhập ở đây</a> (<a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">thử bản trực tiếp ở đây</a>):</p> - -<pre class="brush: html"><video controls> - <source src="rabbit320.mp4" type="video/mp4"> - <source src="rabbit320.webm" type="video/webm"> - <p>Trình duyệt không hổ trợ HTML5 video. Đây là <a href="rabbit320.webm">link đến file video</a></p> -</video></pre> - -<p>Bằng cách này trình duyệt sẽ tìm đến file mà nó có codec để giả mã trong danh sách file được liệt kê trong thẻ <code>source</code>. WebM và MP4 là có thể xem được ở hầu hết các trình duyệt hiện tại.</p> - -<p>Trên mỗi thẻ <code><source></code> có attribute <code>type</code> . Cái này không bắt buộc, nhưng nên làm — nó chứa thông tin {{glossary("MIME type","MIME types")}} của video, trình duyệt khi đọc qua nó sẽ biết ngay có giải mã được video kiểu này không. Nếu không thêm attribute này, trình duyệt sẽ load và thử phát từng file đến khi nào thấy được, nó sẽ tiêu tốn nhiều thời gian và tài nguyên hơn.</p> - -<h3 id="Các_tính_năng_khác_của_<video>">Các tính năng khác của <video></h3> - -<p>Có một số tính năng khác bao gồm trong thẻ video của HTML5. Xem ví dụ bên dưới:</p> - -<pre class="brush: html"><video controls width="400" height="400" - autoplay loop muted - poster="poster.png"> - <source src="rabbit320.mp4" type="video/mp4"> - <source src="rabbit320.webm" type="video/webm"> - <p>Trình duyệt không hổ trợ HTML5 video. Đây là <a href="rabbit320.webm">link đến file video</a></p> -</video> -</pre> - -<p>Nó sẽ cho ra kết quả như thế này trên trình duyệt:</p> - -<p><img alt="A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!" src="https://mdn.mozillademos.org/files/12796/extra-video-features.png" style="display: block; height: 731px; margin: 0px auto; width: 653px;">Những tính này bao gồm:</p> - -<dl> - <dt>{{htmlattrxref("width","video")}} và {{htmlattrxref("height","video")}}</dt> - <dd>Cho phép tinh chỉnh kích thước bằng atttribute hoặc bằng {{Glossary("CSS")}}. Trong cả 2 trường hợp, video luôn giữ nguyên tỉ lệ chiều cao-chiều rộng của nó — thường gọi là <strong>aspect ratio</strong>. Nếu không đưa đúng giá trị cao và rộng đảm bảo aspect ratio, video sẽ phủ hết chiều ngang, phần chiều rộng bị thiếu hoặc dư sẽ hiển thị bằng màu nền mặc định.</dd> - <dt>{{htmlattrxref("autoplay","video")}}</dt> - <dd>Attribute cho phép audio hoặc video phát ngay lập tức trong khi các phần khác của trang tiếp tục được load. Khuyến khích không nên dùng tính năng này, users sẽ cảm thấy khá khó chịu.</dd> - <dt>{{htmlattrxref("loop","video")}}</dt> - <dd>Cho phép video audio lặp lại khi kết thúc</dd> - <dt>{{htmlattrxref("muted","video")}}</dt> - <dd>Bật mặc định tắt tiếng</dd> - <dt>{{htmlattrxref("poster","video")}}</dt> - <dd>Truyền vào url của hình, được hiển thị thay cho video trước khi phát.</dd> - <dt>{{htmlattrxref("preload","video")}}</dt> - <dd> - <p>Được dùng để bật tính năng buffer nếu file lớn. Truyền vào 1 trong 3 giá trị:</p> - - <ul> - <li><code>"none"</code> tắt buffer</li> - <li><code>"auto"</code> tự động buffer nếu file lớn</li> - <li><code>"metadata"</code> chỉ buffer những thông tin meta data</li> - </ul> - </dd> -</dl> - -<p>Ví dụ này có thể <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">phát trực tiếp trên Github</a> (<a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">xem source code</a>.) Để ý, trong ví dụ không đặt thuộc tính <code>autoplay</code> — nếu video tự động phát ngay khi được load, chúng ta sẽ không thấy poster!</p> - -<h3 id="Thẻ_<audio>">Thẻ <audio></h3> - -<p>Thẻ {{htmlelement("audio")}} hoạt động tương tự như thẻ {{htmlelement("video")}}:</p> - -<pre class="brush: html"><audio controls> - <source src="viper.mp3" type="audio/mp3"> - <source src="viper.ogg" type="audio/ogg"> - <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p> -</audio></pre> - -<p>Kết quả hiển thị trên trình duyệt</p> - -<p><img alt="A simple audio player with a play button, timer, volume control, and progress bar" src="https://mdn.mozillademos.org/files/12798/audio-player.png" style="display: block; height: 413px; margin: 0px auto; width: 626px;"></p> - -<div class="note"> -<p><strong>Ghi chú</strong>: Bạn có thể <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">xem demo trực tiếp</a> trên Github (xem <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">source code</a>.)</p> -</div> - -<p>Một vài điểm khác so với video:</p> - -<ul> - <li>Thẻ {{htmlelement("audio")}} không hổ trợ attribute <code>width</code>/<code>height</code></li> - <li>Cũng không hổ trợ attribute <code>poster</code>.</li> -</ul> - -<h2 id="Hiển_thị_Text_track_cho_video">Hiển thị Text track cho video</h2> - -<p>Chúng ta nói thêm về một khái niệm hơi phức tạp hơn nhưng rất hữu ích. Đa phần user không đủ kiên nhẫn đễ đợi audio/video nếu quá lâu. Và một số trường hợp khác:</p> - -<ul> - <li>Không có thiết bị để phát âm thanh, người khuyết tật không thể nghe được.</li> - <li>Không nghe rõ vì môi trường xung quanh quá ồn, hoặc không muốn gây ra âm thanh ví dụ như đang ngồi trong thư viện</li> - <li>User có thể không hiểu ngôn ngữ đang phát, nhưng họ có thể đọc hiểu được.</li> -</ul> - -<p>Với HTML5 video chúng ta có thể cung cấp đoạn text cho phần âm thanh đang phát, với định dạng <a href="/en-US/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT</a> và thẻ {{htmlelement("track")}} .</p> - -<div class="note"> -<p><strong>Ghi chú</strong>: "Transcribe" và "transcript" nghĩ là viết lại thành văn bản cho phần âm thanh.</p> -</div> - -<p>WebVTT là định dạng cho phép viết text dạng nhiều dòng bên trong metadata, thời gian đoạn text xuất hiện trong video, thậm chí styling/position. Đoạn text này gọi là <strong>cues</strong>, các trường hợp sử dụng thường thấy:</p> - -<dl> - <dt>subtitle</dt> - <dd>Dịch thuật</dd> - <dt>caption</dt> - <dd>Đồng bộ phần transcription với thoại, hoặc diễn giải phần âm thanh đang phát.</dd> - <dt>timed description</dt> - <dd>Hiển thị text cho người không thể nghe được.</dd> -</dl> - -<p>File WebVTT sẽ như thế này:</p> - -<pre class="eval line-numbers language-html"><code class="language-html">WEBVTT - -1 -00:00:22.230 --> 00:00:24.606 -This is the first subtitle. - -2 -00:00:30.739 --> 00:00:34.074 -This is the second. - - ...</code> -</pre> - -<p>Để hiển thị cùng khi đang phát, bạn cần:</p> - -<ol> - <li>Lưu với định dạng <code>.vtt</code>.</li> - <li>Link đến file <code>.vtt</code> bằng thẻ {{htmlelement("track")}}. <code><track></code> phải đặt trong thẻ <code><audio></code> hoặc <code><video></code>, sau tất cả thẻ <code><source></code>. Sử dụng attribute {{htmlattrxref("kind","track")}} để xác định cái cue là <code>subtitles</code>, <code>captions</code>, hay <code>descriptions</code>. Thêm nữa, sử dụng {{htmlattrxref("srclang","track")}} để nói với trình duyệt ngôn ngữ đang sử dụng trong subtitle.</li> -</ol> - -<p>Ví dụ:</p> - -<pre class="brush: html"><video controls> - <source src="example.mp4" type="video/mp4"> - <source src="example.webm" type="video/webm"> - <track kind="subtitles" src="subtitles_en.vtt" srclang="en"> -</video></pre> - -<p>Kết quả sẽ như thế này:</p> - -<p><img alt='Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."' src="https://mdn.mozillademos.org/files/7887/video-player-with-captions.png" style="display: block; height: 365px; margin: 0px auto; width: 593px;"></p> - -<p>Để biết thêm chi tiết, đọc thêm <a href="/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a>. Bạn có thể <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">xem ví dụ</a> dùng trong bài viết này trên Github, tác giả Ian Devlin (xem <a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">source code</a>.). Để ý có thể tắt/mở subtitle bằng cách click nút "CC" và tùy chọn ngôn ngữ — English, Deutsch, hoặc Español.</p> - -<div class="note"> -<p><strong>Ghi chú</strong>: Text track cùng đồng thời hổ trợ {{glossary("SEO")}}, bởi vì các máy tìm kiếm luôn đọc text.</p> -</div> - -<h3 id="Hãy_học_một_cách_chủ_động_tự_nhúng_video_và_audio">Hãy học một cách chủ động: tự nhúng video và audio</h3> - -<p>Bạn có thể dùng <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">file audio/video ví dụ</a> để tự thực hành.</p> - -<p>Chỉ dẫn:</p> - -<ol> - <li>Lưu file audio/video vào một thư mục mới.</li> - <li>Tạo một file HTML mới trong cùng thư mục này, đặt là <code>index.html</code>.</li> - <li>Thêm thẻ <code><audio></code> và <code><video></code> vào trang; để xem kết quả hiển thị bằng trình phát mặc định của trình duyệt.</li> - <li>Đưa đường link vào thẻ <code><source></code>. Nhớ khai báo <code>type</code>.</li> - <li>Với thẻ <code><video></code> khai báo attribute poster.</li> -</ol> - -<h2 id="Xem_thêm_các_tài_liệu_tham_khảo_khác">Xem thêm các tài liệu tham khảo khác</h2> - -<ul> - <li>{{htmlelement("audio")}}</li> - <li>{{htmlelement("video")}}</li> - <li>{{htmlelement("source")}}</li> - <li>{{htmlelement("track")}}</li> - <li><a href="/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a></li> - <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Audio and Video delivery</a>: A LOT of detail about putting audio and video onto web pages using HTML and JavaScript.</li> - <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_manipulation">Audio and Video manipulation</a>: A LOT of detail about manipulating audio and video using JavaScript (for example adding filters.)</li> - <li>Automated options to <a href="http://www.inwhatlanguage.com/blog/translate-video-audio/">translate multimedia</a>.</li> -</ul> - -<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</p> - -<h2 id="Trong_loạt_bài_này">Trong loạt bài này</h2> - -<ul> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></li> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From <object> to <iframe> — other embedding technologies</a></li> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the Web</a></li> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li> -</ul> - -<dl> -</dl> - -<ul> -</ul> |