From 9ea92e001d9e199bd4ab4083301fece54eaabe81 Mon Sep 17 00:00:00 2001 From: hanyujie2002 Date: Mon, 8 Apr 2024 10:08:04 +0800 Subject: [PATCH] zh-cn: revise the translation of "Video and audio content" (#19210) Co-authored-by: A1lo --- .../video_and_audio_content/index.md | 250 ++++++++---------- 1 file changed, 114 insertions(+), 136 deletions(-) diff --git a/files/zh-cn/learn/html/multimedia_and_embedding/video_and_audio_content/index.md b/files/zh-cn/learn/html/multimedia_and_embedding/video_and_audio_content/index.md index c379f3c30afe3e..4155e26a2a52ec 100644 --- a/files/zh-cn/learn/html/multimedia_and_embedding/video_and_audio_content/index.md +++ b/files/zh-cn/learn/html/multimedia_and_embedding/video_and_audio_content/index.md @@ -1,136 +1,137 @@ --- title: 视频和音频内容 slug: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +l10n: + sourceCommit: 4bddde3e2b86234eb4594809082873fc5bf00ee3 --- {{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}} -现在我们可以轻松的为一个网页添加简单的图像，下一步我们开始为 HTML 文档添加音频和视频播放器。在这篇文章中，我们会使用 {{htmlelement("video")}} 和 {{htmlelement("audio")}} 元素来做到这件事；然后我们还会看看如何为你的视频添加字幕。 +现在我们已经可以轻松地为网页添加简单的图像，下一步我们开始为 HTML 文档添加音频和视频播放器。在这篇文章中，我们会使用 {{htmlelement("video")}} 和 {{htmlelement("audio")}} 元素来完成这件事；然后我们还会了解如何为视频添加标题/字幕。 - +
- - + +
前提： - 基础计算机能力，基础的软件安装，基础的已安装基本软件，具备文件处理知识，基础的 HTML 知识 (阅读 - 开始学习 HTML - ) 以及 - HTML 中的图片处理文件的基本知识，熟悉 HTML 基础知识（如在入门 HTML 中介绍的内容）以及 HTML 中的图像。
学习目标：学习如何在一个网页中嵌入音频和视频，以及如何为视频添加字幕。目标： + 学习如何将视频和音频内容嵌入网页，并为视频添加标题/字幕。 +
## web 中的音频和视频 -web 开发者们一直以来想在 Web 中使用音频和视频，自 21 世纪初以来，我们的带宽开始能够支持任意类型的视频（视频文件比文本和图片要大的多）。在早些时候，传统的 web 技术（如 HTML）不能够在 Web 中嵌入音频和视频，所以一些像 [Flash](https://en.wikipedia.org/wiki/Adobe_Flash) (后来有 [Silverlight](https://en.wikipedia.org/wiki/Microsoft_Silverlight) ) 的专利技术在处理这些内容上变得很受欢迎。这些技术能够正常的工作，但是却有着一系列的问题，包括无法很好的支持 HTML/CSS 特性、安全问题，以及可行性问题。 +最早的在线视频和音频的流行得益于专有的基于插件的技术，如 [Flash](https://zh.wikipedia.org/zh-cn/Adobe_Flash) 和 [Silverlight](https://zh.wikipedia.org/zh-cn/Microsoft_Silverlight)。这两种技术存在安全性和无障碍问题，现已过时，取而代之的是原生的 HTML 解决方案，该解决方案包括 {{htmlelement("video")}} 和 {{htmlelement("audio")}} 元素以及用于控制它们的 {{Glossary("JavaScript")}} {{Glossary("API")}}。在这里，我们不讨论有关 JavaScript 的问题，仅仅讲解有关 HTML 的基础。 -传统的解决方案能够解决许多这样的问题，前提是它能够正确的工作。幸运的是，几年之后 {{glossary("HTML5")}} 标准提出，其中有许多的新特性，包括 {{htmlelement("video")}} 和 {{htmlelement("audio")}} 标签，以及一些 {{Glossary("JavaScript")}} 和 {{Glossary("API","APIs")}} 用于对其进行控制。在这里，我们不讨论有关 JavaScript 的问题，仅仅讲解有关 HTML 的基础。 +我们不会教你如何制作音频和视频，因为那需要完全不同的技术。如果你没有音频和视频的话，也没有关系，我们为你提供了[示例音频和视频文件以及示例代码](https://github.com/mdn/learning-area/tree/main/html/multimedia-and-embedding/video-and-audio-content)供你实验。 -我们不会教你如何制作音频和视频，因为那需要完全不同的技术。我们已经为你的试验提供了一些视频和音频的文件（[示例音频和视频文件以及示例代码的链接](https://github.com/mdn/learning-area/tree/main/html/multimedia-and-embedding/video-and-audio-content)），以防止你自己没有。 - -> **备注：** 在你开始之前，你应当了解一些 {{glossary("OVP","OVPs")}} (在线视频提供商) 例如 [YouTube](https://www.youtube.com/) 、[Dailymotion](http://www.dailymotion.com) 、[Vimeo](https://vimeo.com/)、[Bilibili](https://www.bilibili.com)等，以及在线音频提供商例如 [Soundcloud](https://soundcloud.com/)。这些公司提供方便、简单的方式来支持视频，所以你不必担心庞大的带宽消耗。OVPS 甚至提供现成的代码用于为你的 web 网页嵌入视频/音频。如果你使用这样的服务，你便可以避免在这篇文章中我们将讨论的一些难题。在下一篇文章中，我们将会再讨论这样的服务。 +> **备注：** 在开始之前，你应当了解一些在线视频提供商，例如 [YouTube](https://www.youtube.com/) 、[Dailymotion](http://www.dailymotion.com) 、[Vimeo](https://vimeo.com/) 还有 [Bilibili](https://www.bilibili.com)，以及在线音频提供商，例如 [Soundcloud](https://soundcloud.com/)。这些公司可以让你以方便、简单的方式来托管和消费视频，所以你不必担心庞大的带宽消耗。在线视频提供商甚至提供现成的代码用于为你的 web 网页嵌入视频/音频。如果你使用这样的服务，你便可以避免在这篇文章中我们讨论的一些难题。在下一篇文章中，我们将会再讨论这样的服务。 ### \