Lecture 1-19 Embedded: <track> After setting the default value in Japanese, you cannot see the language that gave the default value when you open the cc and check it differently from the lecture video. Why is that?

Hello Hyunjoo :-)

That's a good question! It's a necessary question. Everyone in the class must have experienced the same error, but there was no question.

But Hyunjoo asked me a question. Thank you. :->

"Why? It's the same code, but it doesn't work?"

First, there is nothing wrong with the code you wrote .

<video src="media/video/The%20temperature%20of%20dating.mp4" controls>
  <trackkind="subtitle" src="media/video/vtt/The%20temperature%20of%20dating.ko.vtt" srclang="ko"label="Korean">
  <track defaultkind="subtitle" src="media/video/vtt/The%20temperature%20of%20dating.ja.vtt" srclang="ja"label="Japanese">
  <trackkind="subtitle" src="media/video/vtt/The%20temperature%20of%20dating.en.vtt" srclang="en" label="English">
</video>

But the results were not the same.

Let me tell you why such a result came out. :)

First, let's look at the browser screen where the error occurred. Look at the messages on the DevTool Console panel. You can see there's something wrong.

You failed to read the TextTrack file. Blocked by something. We looked at the reason and found that it was blocked due to security issues because it was not the same source as the current document.

As a security issue, the Web generates this error if it is not the same source (same origin policy) according to the "SOP".

The content must be very difficult yet. :-(

Simply put, if you look at the browser address bar, it is an HTML document that starts with the file:/// protocol. HTML documents currently opened in the browser are not actual web services. You can just say that you opened a document file in your browser. As if you opened a docx extension file with a Word program.

Then what? How do we solve the problem?

In conclusion, you have to run the server, configure it like a real web service, and then test it. Let's look at the image below. :)

If you look at the address bar, it starts with 127.0.0.1:8080, which means that you opened an HTML document on a web server. After you run the server like this, you can test it and normally print subtitles and select multilingual subtitles.

In other words, there is no problem with Hyunjoo's code. However, it was just not tested on the server.

I know the cause of the problem... How does a server work?

It may be very difficult at this stage, but it's a mountain that needs to be crossed once, so let's go over it in advance. :)

Ordinary people or designers are familiar with graphics and use graphical user interfaces (GUI, Graphic User Interface) that are composed of pictures (icon, image, etc.).

Developers, on the other hand, command their computers using English-configured code rather than pictures. It mainly uses an interface (CLI) that consists of a command scheme.

Like the picture below. :(

The figure only shows English and Korean, but commands the computer with these codes. Interpreting the illustration shows that the Web server (http://127.0.0.1:8080) with the "20 HTML Embedded Elements" folder (Folder) as the root is being serviced.

When I asked the computer to do this, the command I used was as follows.

# live-server development module installed globally
$ $ npm install --global live-server

# Move to a folder to run on the server (cd, Change Directory
$ cd ~/folder path

# Live-server drive
$ $ live-server

Ahhhhhhhhh!! It's hard.

Yes, I understand that feeling. At first, it's all difficult.

In order for difficult things to become easier, we have no choice but to look at them over and over and over and over again. There is no royal road to study.

.

.

.

.

Are you ready to overcome the difficulties? Do you want to try it? It's a little early, but if you're going to learn how to run a server, preview the [3-41] video and practice it. This is a video that shows the installation and preparation of necessary things for configuring the server environment.

If you watch this video and practice it repeatedly several times, what was difficult will become familiar. That's the study, the study, the skill. :-)

There is a paper difference between the moment you feel like giving up and the moment you realize.
One step further, you'll be thrilled by the realization. Let's go!