diff --git a/files/ko/web/accessibility/aria/index.md b/files/ko/web/accessibility/aria/index.md index e9d589b8baa891..f8618587dcd6ee 100644 --- a/files/ko/web/accessibility/aria/index.md +++ b/files/ko/web/accessibility/aria/index.md @@ -12,19 +12,22 @@ ARIA는 HTML을 보충해, 일반적으로 보조 기술이 알 수 없는 상 다음은 진행 표시줄 위젯의 마크업입니다. ```html -
-
+
``` This progress bar is built using a `
`, which has no meaning. Unfortunately, there isn't a more semantic tag available to developers in HTML 4, so we need to include ARIA roles and properties. These are specified by adding attributes to the element. In this example, the `role="progressbar"` attribute informs the browser that this element is actually a JavaScript-powered progress bar widget. The `aria-valuemin` and `aria-valuemax` attributes specify the minimum and maximum values for the progress bar, and the `aria-valuenow` describes the current state of it and therefore must be kept updated with JavaScript. Along with placing them directly in the markup, ARIA attributes can be added to the element and updated dynamically using JavaScript code like this: ```js -`// Find the progress bar
in the DOM. - var progressBar = document.getElementById("percent-loaded");` +// Find the progress bar
in the DOM. +var progressBar = document.getElementById("percent-loaded"); -`// Set its ARIA roles and states, -// so that assistive technologies know what kind of widget it is.` +// Set its ARIA roles and states, +// so that assistive technologies know what kind of widget it is.`; progressBar.setAttribute("role", "progressbar"); progressBar.setAttribute("aria-valuemin", 0); progressBar.setAttribute("aria-valuemax", 100); @@ -32,7 +35,7 @@ progressBar.setAttribute("aria-valuemax", 100); // Create a function that can be called at any time to update // the value of the progress bar. function updateProgress(percentComplete) { -progressBar.setAttribute("aria-valuenow", percentComplete); + progressBar.setAttribute("aria-valuenow", percentComplete); } ``` diff --git a/files/ko/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.md b/files/ko/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.md index b3a92ec89fd4ab..d2338b3faecd32 100644 --- a/files/ko/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.md +++ b/files/ko/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.md @@ -46,11 +46,24 @@ HTML5에서는 {{ htmlelement("track") }}를 이용하여 자막을 특정해서 ```html ``` @@ -66,18 +79,32 @@ In addition to adding the `` elements, we have also added a new button to ```js
- - -
- - - -
- - - - - + + +
+ + + +
+ + + + +
``` @@ -89,14 +116,14 @@ No image is used for the captions button, so it is simply styled as: ```css .controls button[data-state="subtitles"] { - height:85%; - text-indent:0; - font-size:16px; - font-size:1rem; - font-weight:bold; - color:#666; - background:#000; - border-radius:2px; + height: 85%; + text-indent: 0; + font-size: 16px; + font-size: 1rem; + font-weight: bold; + color: #666; + background: #000; + border-radius: 2px; } ``` @@ -113,14 +140,14 @@ Browsers do vary as to what they support, so we will be attempting to bring a mo As with all the other buttons, one of the first things we need to do is store a handle to the subtitles' button: ```js -var subtitles = document.getElementById('subtitles'); +var subtitles = document.getElementById("subtitles"); ``` We also initially turn off all subtitles, in case the browser turns any of them on by default: ```js for (var i = 0; i < video.textTracks.length; i++) { - video.textTracks[i].mode = 'hidden'; + video.textTracks[i].mode = "hidden"; } ``` @@ -139,14 +166,20 @@ All we need to do is to go through the video's `textTracks`, reading their prope ```js var subtitlesMenu; if (video.textTracks) { - var df = document.createDocumentFragment(); - var subtitlesMenu = df.appendChild(document.createElement('ul')); - subtitlesMenu.className = 'subtitles-menu'; - subtitlesMenu.appendChild(createMenuItem('subtitles-off', '', 'Off')); - for (var i = 0; i < video.textTracks.length; i++) { - subtitlesMenu.appendChild(createMenuItem('subtitles-' + video.textTracks[i].language, video.textTracks[i].language, video.textTracks[i].label)); - } - videoContainer.appendChild(subtitlesMenu); + var df = document.createDocumentFragment(); + var subtitlesMenu = df.appendChild(document.createElement("ul")); + subtitlesMenu.className = "subtitles-menu"; + subtitlesMenu.appendChild(createMenuItem("subtitles-off", "", "Off")); + for (var i = 0; i < video.textTracks.length; i++) { + subtitlesMenu.appendChild( + createMenuItem( + "subtitles-" + video.textTracks[i].language, + video.textTracks[i].language, + video.textTracks[i].label, + ), + ); + } + videoContainer.appendChild(subtitlesMenu); } ``` @@ -156,37 +189,36 @@ The creation of each list item and button is done by the `createMenuItem()` func ```js var subtitleMenuButtons = []; -var createMenuItem = function(id, lang, label) { - var listItem = document.createElement('li'); - var button = listItem.appendChild(document.createElement('button')); - button.setAttribute('id', id); - button.className = 'subtitles-button'; - if (lang.length > 0) button.setAttribute('lang', lang); - button.value = label; - button.setAttribute('data-state', 'inactive'); - button.appendChild(document.createTextNode(label)); - button.addEventListener('click', function(e) { - // Set all buttons to inactive - subtitleMenuButtons.map(function(v, i, a) { - subtitleMenuButtons[i].setAttribute('data-state', 'inactive'); - }); - // Find the language to activate - var lang = this.getAttribute('lang'); - for (var i = 0; i < video.textTracks.length; i++) { - // For the 'subtitles-off' button, the first condition will never match so all will subtitles be turned off - if (video.textTracks[i].language == lang) { - video.textTracks[i].mode = 'showing'; - this.setAttribute('data-state', 'active'); - } - else { - video.textTracks[i].mode = 'hidden'; - } +var createMenuItem = function (id, lang, label) { + var listItem = document.createElement("li"); + var button = listItem.appendChild(document.createElement("button")); + button.setAttribute("id", id); + button.className = "subtitles-button"; + if (lang.length > 0) button.setAttribute("lang", lang); + button.value = label; + button.setAttribute("data-state", "inactive"); + button.appendChild(document.createTextNode(label)); + button.addEventListener("click", function (e) { + // Set all buttons to inactive + subtitleMenuButtons.map(function (v, i, a) { + subtitleMenuButtons[i].setAttribute("data-state", "inactive"); + }); + // Find the language to activate + var lang = this.getAttribute("lang"); + for (var i = 0; i < video.textTracks.length; i++) { + // For the 'subtitles-off' button, the first condition will never match so all will subtitles be turned off + if (video.textTracks[i].language == lang) { + video.textTracks[i].mode = "showing"; + this.setAttribute("data-state", "active"); + } else { + video.textTracks[i].mode = "hidden"; } - subtitlesMenu.style.display = 'none'; - }); - subtitleMenuButtons.push(button); - return listItem; -} + } + subtitlesMenu.style.display = "none"; + }); + subtitleMenuButtons.push(button); + return listItem; +}; ``` This function builds the required {{ htmlelement("li") }} and {{ htmlelement("button") }} elements, and returns them so they can be added to the subtitles menu list. It also sets up the required event listeners on the button to toggle the relevant subtitle set on or off. This is done by simply setting the required subtlte's `mode` attribute to `showing`, and setting the others to `hidden`. @@ -196,10 +228,11 @@ Once the menu is built, it is then inserted into the DOM at the bottom of the vi Initially the menu is hidden by default, so an event listener needs to be added to our subtitles button to toggle it: ```js -subtitles.addEventListener('click', function(e) { - if (subtitlesMenu) { - subtitlesMenu.style.display = (subtitlesMenu.style.display == 'block' ? 'none' : 'block'); - } +subtitles.addEventListener("click", function (e) { + if (subtitlesMenu) { + subtitlesMenu.style.display = + subtitlesMenu.style.display == "block" ? "none" : "block"; + } }); ``` @@ -209,31 +242,31 @@ We also added some rudimentary styling for the newly created subtitles menu: ```css .subtitles-menu { - display:none; - position:absolute; - bottom:14.8%; - right:20px; - background:#666; - list-style-type:none; - margin:0; - padding:0; - width:100px; - padding:10px; + display: none; + position: absolute; + bottom: 14.8%; + right: 20px; + background: #666; + list-style-type: none; + margin: 0; + padding: 0; + width: 100px; + padding: 10px; } .subtitles-menu li { - padding:0; - text-align:center; + padding: 0; + text-align: center; } .subtitles-menu li button { - border:none; - background:#000; - color:#fff; - cursor:pointer; - width:90%; - padding:2px 5px; - border-radius:2px; + border: none; + background: #000; + color: #fff; + cursor: pointer; + width: 90%; + padding: 2px 5px; + border-radius: 2px; } ``` @@ -257,7 +290,7 @@ For example, to change the text colour of the text track cues you can write: ```css ::cue { - color:#ccc; + color: #ccc; } ``` @@ -272,9 +305,9 @@ If the WebVTT file uses [voice spans](http://dev.w3.org/html5/webvtt/#dfn-webvtt Then this specific 'voice' will be stylable like so: ```css -::cue(v[voice='Test']) { - color:#fff; - background:#0095dd; +::cue(v[voice="Test"]) { + color: #fff; + background: #0095dd; } ``` diff --git a/files/ko/web/guide/audio_and_video_delivery/index.md b/files/ko/web/guide/audio_and_video_delivery/index.md index 18fc9345425efb..ef8361f78a1df6 100644 --- a/files/ko/web/guide/audio_and_video_delivery/index.md +++ b/files/ko/web/guide/audio_and_video_delivery/index.md @@ -23,10 +23,10 @@ To deliver video and audio, the general workflow is usually something like this: ```html