강의1-19 임베디드 : <track> 자막넣기, 일본어에 default값을 설정하고 나면, 강의 동영상과 다르게 cc열어 확인하면 default값을 준 언어가 보이지 않습니다. 왜 그런걸까요?

1-19 임베디드 강의 들으면서 제가 한 것을 브라우저로 보았을 때를 캡처한 것입니다. 일본어에 default값을 설정하고 나면, 강의 동영상과 다르게 cc열어 확인하면 default값을 준 언어가 보이지 않습니다. 왜 그런걸까요?

이미지

아래 이미지는 강의 중 영상을 캡처 한 것입니다. 아래 선생님이 한 것처럼 나와야 맞는 것이지요? 이미지

또 다른 문제는 다른 언어를 클릭하면 레이블 안에서 그 언어명이 사라집니다. (아래 이미지 참고)

이미지

아래는 강의를 들으면서 작성한 코드입니다. 선생님이 한 것을 계속 확인하고 비교해 보았는데, 다를게 없는데 의아합니다.

<video src="media/video/The%20temperature%20of%20dating.mp4" controls>
  <track kind="subtitles" src="media/video/vtt/The%20temperature%20of%20dating.ko.vtt" srclang="ko" label="한국어" >
  <track kind="subtitles" src="media/video/vtt/The%20temperature%20of%20dating.ja.vtt" srclang="ja" label="일본어" default>
    <track kind="subtitles" src="media/video/vtt/The%20temperature%20of%20dating.en.vtt" srclang="en" label="영어">
</video>

1답변

  • 좋아요

    0

    싫어요
    채택취소하기

    안녕하세요 현주님 :-)

    좋은 질문입니다! 꼭 필요한 질문이에요. 수업을 들으신 분들 모두 동일한 오류를 경험 했을텐데 질문이 없었죠.

    하지만 현주님은 질문 주셨습니다. 감사합니다. :->

    "왜? 동일한 코드인데 작동하지 않는 걸까?"

    먼저 작성한 코드에는 아무런 문제가 없습니다.

    <video src="media/video/The%20temperature%20of%20dating.mp4" controls>
      <track kind="subtitles" src="media/video/vtt/The%20temperature%20of%20dating.ko.vtt" srclang="ko" label="한국어">
      <track default kind="subtitles" src="media/video/vtt/The%20temperature%20of%20dating.ja.vtt" srclang="ja" label="일본어">
      <track kind="subtitles" src="media/video/vtt/The%20temperature%20of%20dating.en.vtt" srclang="en" label="영어">
    </video>
    

    하지만 결과는 같지 않았습니다.

    왜 그러한 결과가 나왔는지 이유를 알려드릴께요. :)

    먼저 오류가 발생한 브라우저 화면을 보겠습니다. 개발도구(DevTool) 콘솔(Console) 패널에 출력된 메시지를 살펴보세요. 뭔가 문제가 있음을 알 수 있습니다.

    이미지

    트랙(Text Track) 파일을 읽어들이는데 실패 했군요. 뭔가에 차단(Block) 당했습니다. 이유를 살펴보니 현재 문서(Document)와 동일한 출처(origin)가 아니기에 보안 문제로 차단 당한 것입니다.

    웹은 보안 이슈로 "동일 출처 정책(SOP, Same Origin Policy)"에 따라 동일한 출처(same origin)가 아닐 경우, 이와 같은 오류를 발생시킵니다.

    아직은 내용이 많이 어려울 텐데요.. :-(

    쉽게 말해 브라우저 주소창에 보면 file:/// 프로토콜로 시작하는 HTML 문서라서 발생한 문제입니다. 현재 브라우저에 연 HTML 문서는 실제 웹 서비스 되는 것이 아니거든요. 그냥 브라우저에서 문서 파일을 열었다고 보면 됩니다. 마치 docx 확장자 파일을 Word 프로그램으로 연 것처럼.

    그렇다면? 문제는 어떻게 해결해야 할까요?

    결론부터 이야기 하면 서버(Server)를 구동해서 실제 웹 서비스처럼 구성한 후 테스트 해야 정상 작동 합니다. 아래 이미지를 봅시다. :)

    이미지

    주소창에 보면 127.0.0.1:8080 로 시작하는데 이것은 HTML 문서를 웹 서버에서 열었다는 것을 말하는 겁니다. 이와 같이 서버를 구동한 후, 테스트 하면 정상적으로 자막을 출력하고, 다국어 자막을 선택할 수 있습니다.

    즉, 현주님 코드에 문제는 없습니다. 다만, 서버에서 테스트 하지 않았을 뿐입니다.

    문제 원인은 알았는데... 서버는 어떻게 구동할까요?

    현 단계에서는 많이 어렵겠지만, 한 번은 넘어야 할 산이니 미리 넘어봅시다. :)

    일반 사람 또는 디자이너는 그림(Graphic)에 친숙하고, 그림으로 구성(아이콘, 이미지 등)된 인터페이스(GUI, Graphic User Interface)를 사용합니다.

    반면 개발자는 그림보다는 영어로 구성된 코드를 사용해 컴퓨터에게 명령(Command) 합니다. 명령어 체계로 구성된 인터페이스(CLI, Command Line Interface)를 주로 사용합니다.

    아래 그림처럼 말이죠. :(

    이미지

    그림에는 영어와 한글로 구성된 것만 보이는데 이러한 코드(Code)로 컴퓨터에게 명령합니다. 그림을 해석하면 "20 HTML 임베디드(Embeded) 요소들" 폴더(Folder)를 루트(Root)로 하는 웹 서버(http://127.0.0.1:8080)를 구동 중(Serving)이라고 안내하고 있습니다.

    이러한 동작을 컴퓨터에게 시킬 때, 제가 사용한 명령어는 다음과 같습니다.

    # live-server 개발 모듈을 전역(Global)에 설치
    $ npm install --global live-server
    
    # 서버로 구동할 폴더로 이동(cd, Change Directory)
    $ cd ~/폴더경로
    
    # live-server 구동
    $ live-server
    

    아아아아!!!! ㅠㅡㅠ 어렵습니다...

    네. 그 마음 이해합니다. 충분히 ㅡ,ㅡ; 처음엔 다~ 어렵습니다.

    어려운 것이 쉬워지려면 반복해서 보고 또 보고, 또 보고, 또또 보고 또 보는 수 밖에 없습니다. 공부에 왕도(王道)란 없으니까요.

    .

    .

    .

    .

    아자! 아자! 아자!

    어려움을 극복할 마음가짐이 드시나요? 한 번 해보겠습니까? 조금 이르긴 하지만, 서버 구동 방법을 학습할 생각이라면 [3-41] 영상을 미리 보고 실습해보세요. 서버 환경 구성에 필요한 것들을 설치하고 준비하는 내용이 담겨진 영상입니다.

    이미지

    이 영상을 보고 수차례 반복해서 실습하면 어려웠던 것이 어느새 익숙해 짐으로 바뀌어 있을 겁니다. 그게 공부(工夫, 학문(學問)이나 기술(技術)을 닦는 일)입니다. :-)

    포기할 마음이 드는 순간과 깨닫는 순간은 종이 한 장 차이입니다.
    한 발자욱만 더 나가면 깨달음에 전율할 수 있을 겁니다. 아자!

    • 상세한 답변 감사합니다. 영상을 수차례 반복하고 실습하면 익숙해진다는 말을 요즘 많이 공감합니다. 아무것도 몰라서 엄청 헤메이고 미션하고도 잘 한 건지 몰랐었고, 다음 CSS들으면서 많이 좌절 중이었거든요. 앞 강습 다시 반복 중인데 처음 보다 조금 더 익숙해져서 의문들도 생기더라구요. 포기하지 않아서 다행이란 생각도 듭니다. 알게 되고 익숙해질 때까지 해보려 합니다. 답변 주신 데로 해볼께요!! 한번 더 감사합니다. 체험단_프론트엔드_장현주 2018.4.10 13:27

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

작성한 답변에 다른 개발자들이 댓글을 작성하거나 댓글에 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.