KR102482201B1 - Html 영역을 포함하는 웹 컨텐츠를 제공하는 서버 - Google Patents

Html 영역을 포함하는 웹 컨텐츠를 제공하는 서버 Download PDF

Info

Publication number
KR102482201B1
KR102482201B1 KR1020210128916A KR20210128916A KR102482201B1 KR 102482201 B1 KR102482201 B1 KR 102482201B1 KR 1020210128916 A KR1020210128916 A KR 1020210128916A KR 20210128916 A KR20210128916 A KR 20210128916A KR 102482201 B1 KR102482201 B1 KR 102482201B1
Authority
KR
South Korea
Prior art keywords
web content
html
data
video
area
Prior art date
Application number
KR1020210128916A
Other languages
English (en)
Other versions
KR20220124071A (ko
Inventor
이준정
Original Assignee
주식회사 레이팝
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 주식회사 레이팝 filed Critical 주식회사 레이팝
Priority to KR1020210128916A priority Critical patent/KR102482201B1/ko
Publication of KR20220124071A publication Critical patent/KR20220124071A/ko
Application granted granted Critical
Publication of KR102482201B1 publication Critical patent/KR102482201B1/ko

Links

Images

Classifications

    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/47—End-user applications
    • H04N21/478—Supplemental services, e.g. displaying phone caller identification, shopping application
    • H04N21/4782—Web browsing, e.g. WebTV
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/14—Digital output to display device ; Cooperation and interconnection of the display device with other functional units
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G06F40/14—Tree-structured documents
    • G06F40/143—Markup, e.g. Standard Generalized Markup Language [SGML] or Document Type Definition [DTD]
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G06F40/149—Adaptation of the text data for streaming purposes, e.g. Efficient XML Interchange [EXI] format
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06Q—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES; SYSTEMS OR METHODS SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES, NOT OTHERWISE PROVIDED FOR
    • G06Q50/00—Information and communication technology [ICT] specially adapted for implementation of business processes of specific business sectors, e.g. utilities or tourism
    • G06Q50/10—Services
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06Q—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES; SYSTEMS OR METHODS SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES, NOT OTHERWISE PROVIDED FOR
    • G06Q50/00—Information and communication technology [ICT] specially adapted for implementation of business processes of specific business sectors, e.g. utilities or tourism
    • G06Q50/10—Services
    • G06Q50/20—Education
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/20—Servers specifically adapted for the distribution of content, e.g. VOD servers; Operations thereof
    • H04N21/21—Server components or server architectures
    • H04N21/218—Source of audio or video content, e.g. local disk arrays
    • H04N21/21805—Source of audio or video content, e.g. local disk arrays enabling multiple viewpoints, e.g. using a plurality of cameras
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/80—Generation or processing of content or additional data by content creator independently of the distribution process; Content per se
    • H04N21/81—Monomedia components thereof
    • H04N21/816—Monomedia components thereof involving special video data, e.g 3D video
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/80—Generation or processing of content or additional data by content creator independently of the distribution process; Content per se
    • H04N21/81—Monomedia components thereof
    • H04N21/8166—Monomedia components thereof involving executable data, e.g. software
    • H04N21/8173—End-user applications, e.g. Web browser, game
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/80—Generation or processing of content or additional data by content creator independently of the distribution process; Content per se
    • H04N21/85—Assembly of content; Generation of multimedia applications
    • H04N21/854—Content authoring
    • H04N21/8543—Content authoring using a description language, e.g. Multimedia and Hypermedia information coding Expert Group [MHEG], eXtensible Markup Language [XML]

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Business, Economics & Management (AREA)
  • Multimedia (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Signal Processing (AREA)
  • General Engineering & Computer Science (AREA)
  • Health & Medical Sciences (AREA)
  • Tourism & Hospitality (AREA)
  • General Health & Medical Sciences (AREA)
  • Databases & Information Systems (AREA)
  • Economics (AREA)
  • Artificial Intelligence (AREA)
  • General Business, Economics & Management (AREA)
  • Strategic Management (AREA)
  • Primary Health Care (AREA)
  • Computational Linguistics (AREA)
  • Marketing (AREA)
  • Human Resources & Organizations (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Data Mining & Analysis (AREA)
  • Educational Technology (AREA)
  • Educational Administration (AREA)
  • Computer Security & Cryptography (AREA)
  • Human Computer Interaction (AREA)
  • Software Systems (AREA)
  • Information Transfer Between Computers (AREA)
  • Medicines Containing Material From Animals Or Micro-Organisms (AREA)

Abstract

본 발명은 HTML 영역을 포함하는 웹 컨텐츠를 제공하는 서버에 관한 것이다.
실시예들에 따른 360도 멀티미디어 디바이스를 위한 웹 컨텐츠 수신 방법 및 그 장치는 영상 데이터에 HTML5를 결합함으로써 사용자와 상호작용이 가능한 웹 컨텐츠를 제공할 수 있다.
실시예들에 따른 360도 멀티미디어 디바이스를 위한 웹 컨텐츠 수신 방법 및 그 장치는 영상 데이터에 HTML5를 결합함으로써 사용자의 단말 장치가 별도의 프로그램 등의 설치 없이 웹 브라우저만을 이용하여 적은 메모리의 양으로도 웹 컨텐츠를 소비할 수 있다.

Description

HTML 영역을 포함하는 웹 컨텐츠를 제공하는 서버 {server for providing web content including HTML regions}
본 발명은 HTML 영역을 포함하는 웹 컨텐츠를 제공하는 서버에 관한 것이다.
기존에는 PC(personal computer) 상에서 플래시(flash)를 이용하여 동영상을 재생하는 구현예가 많이 있다. 웹 브라우저(web browser) 상에서 동영상을 재생하고 앞으로 재생, 뒤로 재생 그리고 원하는 시간대의 재생 등 다양한 기능이 구현된다.
또한, 동영상과 관련된 내용의 자료를 웹 브라우저에 동기화하여 표시할 수도 있다. 그렇지만, 이러한 플래시 콘텐츠는 모바일 단말에서는 적용되지 않아 모바일 단말에서 교육용 동영상 콘텐츠를 재생하면서 관련 학습 자료까지 표시하거나 문제 풀이 또는 메모 등을 하는 기능은 구현할 수 없다.
즉, 모바일 단말 상에서는 교육용 동영상 콘텐츠를 단지 하나의 화면 상에 재생만 할 수 있을 뿐, 교육용 동영상 콘텐츠를 보면서 이와 연계된 학습 자료를 표시할 수도 없고 사용자가 메모를 하거나 문제를 풀 수도 없다.
최신 규약인 HTML5(hypertext mark-up language 5)는 액티브 X(active X)를 설치하지 않아도 플래시와 같은 동영상이나 음악 재생은 물론 화려한 그래픽 효과까지도 웹 브라우저(web browser) 상에 구현할 수 있는 장점이 있다.
그러나, 모바일 단말의 웹 브라우저 상의 웹 페이지를 구현하는 HTML5에 의해서도 이러한 동시 출력과 동기화의 구현은 불가하다. 이에, 기존 HTML5의 규약만으로는 불가하며, HTML5의 규약에 대한 변경이나 새로운 구성의 추가가 있어야 가능하다.
제10-2013-0082732호 (2013.07.22)
상기와 같은 문제점을 해결하기 위한 본 발명의 목적은, 360도 멀티미디어 디바이스를 위한 웹 컨텐츠 수신 방법 및 그 장치를 제공하는데 있다.
본 발명에서 이루고자 하는 기술적 과제들은 이상에서 언급한 기술적 과제들로 제한되지 않으며, 언급하지 않은 또 다른 기술적 과제들은 아래의 기재로부터 본 발명이 속하는 기술분야에서 통상의 지식을 가진 자에게 명확하게 이해될 수 있을 것이다.
상술한 과제를 해결하기 위하여, 실시예들에 따른 360도 멀티미디어 디바이스를 위한 웹 컨텐츠 수신 방법은 웹 컨텐츠를 위한 데이터를 수신하는 단계, 상기 웹 컨텐츠를 위한 데이터는 360도 영상 데이터, 하나 또는 그 이상의 HTML 파일들, 각 HTML 파일에 대응하는 상기 시간 정보를 나타내는 XML(eXtensible Markup Language) 데이터, 및 상기 XML 데이터를 파싱(parsing)하기 위한 자바스크립트(JavaScript) 소스를 포함하는 데이터를 포함함; 상기 웹 컨텐츠를 위한 데이터를 파싱하는 단계; 상기 웹 컨텐츠를 사용자의 뷰포트(viewport)의 위치에 기반하여 렌더링하는 단계; 를 포함할 수 있고, 상기 웹 컨텐츠는 상기 자바스크립트 소스에 기초하여 상기 360도 영상 데이터를 재생하도록 구성될 수 있다.
나아가 웹 컨텐츠는 상기 자바스크립트 소스에 기초하여, 현재 시간 정보를 추출함으로써 각 시간 정보에 대응하는 HTML 파일을 구동하도록 구성되고, 상기 웹 컨텐츠는 상기 XML 데이터를 파싱하는데 사용되는 DTD (Document Type Definition) 데이터를 더 포함할 수 있다.
더 나아가 실시예들에 따른 360도 멀티미디어 디바이스를 위한 웹 컨텐츠 수신 방법은 상기 웹 컨텐츠를 위한 데이터는 하나 또는 그 이상의 위젯(widget)들을 포함하고, 상기 하나 또는 그 이상의 위젯들은 상기 하나 또는 그 이상의 HTML 파일들에 의해 상기 360도 영상 데이터에 매핑(mapping)될 수 있다.
더 나아가 실시예들에 따른 360도 멀티미디어 디바이스를 위한 웹 컨텐츠 수신 방법은 상기 각 HTML 파일은 상기 HTML 파일에 의해 매핑되는 적어도 하나의 위젯의 상기 360도 영상 데이터 내의 위치를 나타내는 위치 정보를 더 포함할 수 있다.
더 나아가 실시예들에 따른 360도 멀티미디어 디바이스를 위한 웹 컨텐츠 수신 방법에서, 상기 위치 정보는 구면 상의 상기 적어도 하나의 위젯의 최좌측의 위치를 나타내는 제1 아지무스 정보, 상기 적어도 하나의 위젯의 최우측의 위치를 나타내는 제2 아지무스 정보, 상기 적어도 하나의 위젯의 최상측의 위치를 나타내는 제1 엘리베이션 정보, 및 상기 적어도 하나의 위젯의 최하측의 위치를 나타내는 제2 엘리베이션 정보를 포함할 수 있다.
더 나아가 상기 각 HTML 파일은 상기 적어도 하나의 위젯의 회전(rotation)의 정도를 나타내는 회전 정보를 더 포함할 수 있다.
실시예들에 따른 360도 멀티미디어 디바이스를 위한 웹 컨텐츠 수신 방법 및 그 장치는 HTML5을 이용함으로써 모바일, PC 등 범용적인 사용자의 단말 장치에서 사용자와 상호작용이 가능한 웹 컨텐츠를 생성할 수 있다.
실시예들에 따른 360도 멀티미디어 디바이스를 위한 웹 컨텐츠 수신 방법 및 그 장치는 영상 데이터에 HTML5를 결합함으로써 사용자와 상호작용이 가능한 웹 컨텐츠를 제공할 수 있다.
실시예들에 따른 360도 멀티미디어 디바이스를 위한 웹 컨텐츠 수신 방법 및 그 장치는 영상 데이터에 HTML5를 결합함으로써 사용자의 단말 장치가 별도의 프로그램 등의 설치 없이 웹 브라우저만을 이용하여 적은 메모리의 양으로도 웹 컨텐츠를 소비할 수 있다.
본 발명에서 얻을 수 있는 효과는 이상에서 언급한 효과들로 제한되지 않으며, 언급하지 않은 또 다른 효과들은 아래의 기재로부터 본 발명이 속하는 기술분야에서 통상의 지식을 가진 자에게 명확하게 이해될 수 있을 것이다.
본 발명의 특정한 바람직한 실시예들의 상기에서 설명한 바와 같은 또한 다른 측면들과, 특징들 및 이득들은 첨부 도면들과 함께 처리되는 하기의 설명으로부터 보다 명백하게 될 것이다.
도 1은 실시예들에 따른 상호작용이 가능한 웹 컨텐츠를 생성하는 시스템을 나타낸 것이다.
도 2는 본 발명의 일 실시예에 따른 모바일 단말에서 HTML5를 이용하여 학습 영역과 동영상 영역의 상호 작용이 가능하게 하는 학습 장치의 구현 예시도이다.
도 3은 실시예들에 따른 웹 컨텐츠 및 웹 컨텐츠의 재생 방법을 나타낸다.
도 4는 실시예들에 따른 웹 컨텐츠의 예시를 나타낸다.
도 5는 실시예들에 따른 360도 멀티미디어 디바이스(50)의 구조의 예시를 나타낸다.
도 6은 실시예들에 따른 360도 컨텐츠(contents)를 나타낸다.
도 7은 실시예들에 따른 360도 멀티미디어 디바이스를 위한 웹 컨텐츠의 예시를 나타낸다.
도 8은 실시예들에 따른 360도 멀티미디어 디바이스를 위한 웹 컨텐츠에서 위젯(widget)의 위치를 나타내는 방법을 나타낸다.
도 9는 실시예들에 따른 웹 컨텐츠의 구조를 나타낸다.
도 10은 실시예들에 따른 360도 멀티미디어 디바이스를 위한 웹 컨텐츠 수신 방법을 나타내는 흐름도이다.
상기 도면들을 통해, 유사 참조 번호들은 동일한 혹은 유사한 엘리먼트들과, 특징들 및 구조들을 도시하기 위해 사용된다는 것에 유의해야만 한다.
본 발명은 다양한 변경을 가할 수 있고 여러 가지 실시예를 가질 수 있는 바, 특정 실시예들을 도면에 예시하고 상세한 설명에 상세하게 설명하고자 한다. 그러나, 이는 본 발명을 특정한 실시 형태에 대해 한정하려는 것이 아니며, 본 발명의 사상 및 기술 범위에 포함되는 모든 변경, 균등물 내지 대체물을 포함하는 것으로 이해되어야 한다. 각 도면을 설명하면서 유사한 참조부호를 유사한 구성요소에 대해 사용하였다.
제1, 제2, A, B 등의 용어는 다양한 구성요소들을 설명하는데 사용될 수 있지만, 구성요소들은 용어들에 의해 한정되어서는 안 된다. 용어들은 하나의 구성요소를 다른 구성요소로부터 구별하는 목적으로만 사용된다. 예를 들어, 본 발명의 권리 범위를 벗어나지 않으면서 제1 구성요소는 제2 구성요소로 명명될 수 있고, 유사하게 제2 구성요소도 제1 구성요소로 명명될 수 있다. 및/또는 이라는 용어는 복수의 관련된 기재된 항목들의 조합 또는 복수의 관련된 기재된 항목들 중의 어느 항목을 포함한다.
어떤 구성요소가 다른 구성요소에 "연결되어" 있다거나 "접속되어" 있다고 언급된 때에는, 그 다른 구성요소에 직접적으로 연결되어 있거나 또는 접속되어 있을 수도 있지만, 중간에 다른 구성요소가 존재할 수도 있다고 이해되어야 할 것이다. 반면에, 어떤 구성요소가 다른 구성요소에 "직접 연결되어" 있다거나 "직접 접속되어" 있다고 언급된 때에는, 중간에 다른 구성요소가 존재하지 않는 것으로 이해되어야 할 것이다.
본 출원에서 사용한 용어는 단지 특정한 실시예를 설명하기 위해 사용된 것으로, 본 발명을 한정하려는 의도가 아니다. 단수의 표현은 문맥상 명백하게 다르게 뜻하지 않는 한, 복수의 표현을 포함한다. 본 출원에서, "포함하다" 또는 "가지다" 등의 용어는 명세서상에 기재된 특징, 숫자, 단계, 동작, 구성요소, 부품 또는 이들을 조합한 것이 존재함을 지정하려는 것이지, 하나 또는 그 이상의 다른 특징들이나 숫자, 단계, 동작, 구성요소, 부품 또는 이들을 조합한 것들의 존재 또는 부가 가능성을 미리 배제하지 않는 것으로 이해되어야 한다.
다르게 정의되지 않는 한, 기술적이거나 과학적인 용어를 포함해서 여기서 사용되는 모든 용어들은 본 발명이 속하는 기술 분야에서 통상의 지식을 가진 자에 의해 일반적으로 이해되는 것과 동일한 의미를 가지고 있다. 일반적으로 사용되는 사전에 정의되어 있는 것과 같은 용어들은 관련 기술의 문맥 상 가지는 의미와 일치하는 의미를 가지는 것으로 해석되어야 하며, 본 출원에서 명백하게 정의하지 않는 한, 이상적이거나 과도하게 형식적인 의미로 해석되지 않는다.
이하, 본 발명에 따른 바람직한 실시예를 첨부된 도면을 참조하여 상세하게 설명한다.
도 1은 실시예들에 따른 상호작용이 가능한 웹 컨텐츠를 생성하는 시스템을 나타낸 것이다.
실시예들에 따른 상호작용이 가능한 웹 컨텐츠를 생성하는 시스템은 실시예들에 따른 상호작용이 가능한 웹 컨텐츠를 생성하는 생성 장치(또는 그 서버) (100)에 의해 수행될 수 있다. 생성 장치(100)는 실시예들에 따른 상호작용이 가능한 웹 컨텐츠를 생성하는 방법을 수행한다.
생성 장치(100)는 실시예들에 따른 웹 컨텐츠를 사용자들에게 제공할 수 있다. 생성 장치(100)는 예를 들어, 사용자의 요청(request)에 따라 사용자가 원하는 웹 컨텐츠를 사용자의 단말 장치 등(101)에 제공할 수 있다.
생성 장치(100)는 예를 들어, 사용자의 요청(10a)에 따라 사용자가 제작하려고 하는 웹 컨텐츠의 완성물을 사용자에게 전송(10b)할 수 있다. 웹 컨텐츠(10d)는 예를 들어, 사용자와 상호작용이 가능한 웹 기반 컨텐츠를 의미할 수 있다. 웹 컨텐츠(10d)는 예를 들어, 웹 브라우저(web browser)에서 구동되는 프로그램 또는 명령어들의 집합으로 구성될 수 있다.
웹 컨텐츠(10d)는 HTML5 (HyperText Markup Language 5)에 의해 구동되는 웹 기반 컨텐츠일 수 있다. 웹 컨텐츠(10d)는 예를 들어 HTML5에 의해 구동되며, 동영상, 음악, 사진 중 하나 또는 그 이상이 포함되어 사용자에게 제공되는 학습 컨텐츠일 수 있다. 기존에는 모바일 단말 상에서는 플래시(flash)가 구현되지 않기 때문에 교육 동영상 콘텐츠의 경우 교육 동영상 콘텐츠의 재생만 가능할 뿐 별도의 학습 영역을 동시에 구현할 수 없었다. 그러나, 실시예들에 따른 웹 컨텐츠(10d)는 동영상 영역의 동영상 콘텐츠와 학습 영역의 학습 자료를 HTML5의 규약 상에서 시간에 따라 동기화하여 표시하도록 구성할 수 있다.
즉, 다시 말하면 사용자는 사용자의 단말 장치(101)를 이용하여 사용자가 제작하고자 하는 웹 컨텐츠(예를 들어, 학습 컨텐츠 등)를 제작할 수 있다. 사용자의 단말 장치(101)는 실시예들에 따른 생성 장치(101)로 사용자가 제작하고자 하는 웹 컨텐츠에 대한 정보를 전송(10a)한다. 생성 장치(101)는 웹 컨텐츠에 대한 정보를 수신하고, 이에 기초하여 사용자가 제작하고자 하는 웹 컨텐츠(10d)를 생성한다. 생성 장치(100)는 생성된 웹 컨텐츠(10d)를 사용자의 단말 장치(101)에게 전송한다.
실시예들에 따른 사용자의 단말 장치(101)는 360도 영상 데이터(이미지 데이터)를 수신하고, 이들을 디코딩 처리 및 파싱하여 사용자의 뷰포트를 렌더링(rendering)하는 360도 멀티미디어 디바이스(multimedia device)일 수 있다. 예를 들어, 실시예들에 따른 사용자의 단말 장치(101)는 헤드-마운트(head mount) 디스플레이를 의미할 수 있다. 실시예들에 따른 사용자의 단말 장치(101)는 360도 이미지/영상 데이터를 수신하고 이들을 처리하여 사용자에게 VR 환경으로 웹 컨텐츠를 소비할 수 있도록 하는 장치일 수 있다.
이러한 구성으로 인해 실시예들에 따른 상호작용이 가능한 웹 컨텐츠를 생성하는 시스템은 PC에서 구동되는 브라우저 환경이 아닌 다른 환경에서 HTML5를 이용하여 학습 영역과 동영상 영역의 상호 작용이 가능하게 하는 학습 컨텐츠를 생성할 수 있다.
실시예들에 따른 상호작용이 가능한 웹 컨텐츠를 생성하는 방법 및 그 장치는 HTML5을 이용함으로써 모바일, PC 등 범용적인 사용자의 단말 장치에서 사용자와 상호작용이 가능한 웹 컨텐츠를 생성할 수 있다.
실시예들에 따른 상호작용이 가능한 웹 컨텐츠를 생성하는 방법 및 그 장치는 영상 데이터에 HTML5를 결합함으로써 사용자와 상호작용이 가능한 웹 컨텐츠를 제공할 수 있다.
실시예들에 따른 상호작용이 가능한 웹 컨텐츠를 생성하는 방법 및 그 장치는 영상 데이터에 HTML5를 결합함으로써 사용자의 단말 장치가 별도의 프로그램 등의 설치 없이 웹 브라우저만을 이용하여 적은 메모리의 양으로도 웹 컨텐츠를 소비할 수 있다.
도 2는 실시예들에 따른 웹 컨텐츠의 예시를 나타낸다.
도 2에 나타난 웹 컨텐츠(20)는 도 1에서 설명한 웹 컨텐츠(10d)의 일부 또는 전부를 의미할 수 있다.
도 2를 참조하면, 실시예들에 따른 웹 컨텐츠(20)는 HTML5 영역(21A) 및/또는 영상 영역(21B)를 포함할 수 있다. 웹 컨텐츠(20)는 HTML5 영역(21A) 및/또는 영상 영역(21B) 모두 포함할 수도 있고, 그 중 하나만 포함할 수도 있다. 또한, 영역은 웹 컨텐츠(20)상의 일부 영역을 점유할 수도 있지만, 특정 영역을 점유하지 않을 수도 있다.
웹 컨텐츠(20)는 시간의 흐름에 따라 그 내용이 변화하는 영상일 수 있다. 예를 들어, 제1 시간에 나타나는 웹 컨텐츠(20)의 내용과 제2 시간에 나타나는 웹 컨텐츠(20)의 내용은 다를 수 있다. 웹 컨텐츠(20)는 사용자의 조작 또는 입력 등에 따라 그 내용이 변화하는 영상일 수 있다. 예를 들어, 사용자의 조작에 따라 웹 컨텐츠(20)의 내용이 변화할 수 있다.
웹 컨텐츠(20) 내에서 사용자의 조작에 따라 변화하는 구성은 HTML5 또는 HTML5를 참조하는 CSS, 자바스크립트 등의 파일에 의해 명시될 수 있다.
HTML5 영역(21A)은 HTML5에 의해 구동될 수 있다. HTML5 영역은 HTML5에 의해 구동될 수도 있지만, HTML5를 참조하는 CSS 파일, 자바스크립트 파일 등에 의해 구동될 수도 있다.
영상 영역(21B)은 영상 파일에 의해 구동되는 영역일 수 있다. 영상 파일은 예를 들어, 동영상을 포함하는 파일일 수도 있고, 음악(음성)을 포함하는 파일일 수도 있고, 이미지 파일일 수도 있고, 텍스트를 포함하는 파일일 수도 있다.
실시예들에 따른 웹 컨텐츠(20)는 영상 영역의 영상 콘텐츠 및 HTML5 영역에서 HTML5 등에 의해 구동되는 영역을 연결(22)하는 구성을 포함할 수 있다. 이러한 연결(22)는 시간(time)을 기준으로 이루어질 수 있고, 사용자로부터 수신하는 신호에 의해 이루어질 수도 있다. 즉, 웹 컨텐츠(20)는 영상 영역의 영상 콘텐츠 및 HTML5 영역에서 HTML5 등에 의해 구동되는 영역이 시간에 따라 동기화되어(22) 표시하도록 구성하고 있다.
예를 들어, 실시예들에 따른 웹 컨텐츠(20)는 제1 시간에서, 영상 영역(21B)의 특정 시간과 HTML5 영역(21A)의 특정 동작(또는 변화)가 동시에 발생하도록 구성할 수 있다. 예를 들어, 실시예들에 따른 웹 컨텐츠(20)는 영상 영역(21B)에 나타난 강사가 오른손으로 특정 지점을 가리키면, HTML 영역에서 특정 지점을 나타내는 부분에 변화가 일어나도록 구성될 수 있다. HTML 영역은 iframe 기반으로 구성되는 영역을 의미할 수 있다.
예를 들어, 실시예들에 따른 웹 컨텐츠(20)는 동영상 콘텐츠의 각각의 영상 프레임에 대응되는 학습 자료의 페이지(page)를 일일이 대응시켜 동영상 콘텐츠의 어느 장면을 보든지 간에 이와 연계되는 학습 자료 페이지가 동시에 출력되도록 구성될 수 있다.
또한 예를 들어, 학습 자료 페이지에는 사용자가 학습 중에 직접 줄긋기를 하거나 메모를 적거나 문제풀이를 하거나 자동 채점 등이 되도록 구성되어 사용자가 본인의 메모나 표기, 오답 문제 등을 다시 복습하고 반복할 수 있도록 구성될 수도 있다.
실시예들에 따른 웹 컨텐츠(20)는 사용자로부터 신호를 입력받기 위한 컴포넌트(component) (21C)를 포함할 수 있다. 사용자로부터 신호를 입력받기 위한 컴포넌트(component) (21C)는 예를 들어, 사용자가 웹 컨텐츠를 재생/일시정지/중지할 것을 요청(request)하기 위한 아이콘(icon)을 포함하는 컴포넌트일 수 있다. 사용자로부터 신호를 입력받기 위한 컴포넌트(component) (21C)는 예를 들어, 웹 컨텐츠의 현재 재생 시간 정보 및/또는 웹 컨텐츠의 전체 재생 시간 정보를 나타내기 위한 프로그래스 바(progress bar)를 나타내는 컴포넌트일 수 있다. 사용자로부터 신호를 입력받기 위한 컴포넌트(component) (21C)는 웹 컨텐츠의 전체 음량(volume), 배속, 페이지(슬라이드)를 나타내는 컴포넌트를 포함할 수 있다.
실시예들에 따른 웹 컨텐츠는 사용자로부터 신호를 입력받기 위한 컴포넌트(component) (21C)에 기초하여 사용자로부터 입력 신호를 수신할 수 있다. 웹 컨텐츠는 사용자로부터 수신한 신호를 자바스크립트 소스에 기초하여 각 시간 정보에 대응하는 HTML 파일을 구동하도록 구성될 수 있다. 예를 들어, 사용자가 컴포넌트(21C)를 이용하여 제1 시간의 웹 컨텐츠를 재생한 경우, 웹 컨텐츠는 제1 시간에 대응하는 HTML 파일들을 구동할 수 있다.
도 3은 실시예들에 따른 웹 컨텐츠 및 웹 컨텐츠의 재생 방법을 나타낸다.
도 3에 나타난 실시예들에 따른 웹 컨텐츠는 도 1 내지 도 2에 나타난 실시예들에 따른 웹 컨텐츠를 의미한다. 도 3에 나타난 생성 장치는 도 1 내지 도 2에 설명한 생성 장치(100)에서 생성될 수 있다.
도 3에 나타난 실시예들에 따른 웹 컨텐츠는 사용자의 단말 장치에서 재생될 수 있다. 예를 들어, 사용자의 단말 장치는 웹 컨텐츠를 구성하는 파일들(예를 들어, 영상 파일들, HTML 파일들 및/또는 기타 자바스크립트 파일, CSS파일 등)을 웹 브라우저를 통해 다운로드한다. 사용자의 단말 장치는 웹 컨텐츠를 구성하는 파일들을 이용하여 웹 컨텐츠를 재생(구동)한다.
실시예들에 따른 웹 컨텐츠는 멀티미디어 컨텐츠(30) 및/또는 적어도 하나의 HTML 소스(31)를 포함할 수 있다. 멀티미디어 컨텐츠(30)는 도 2의 영상 영역의 영상 콘텐츠를 의미할 수 있다. 멀티미디어 컨텐츠(30)는 예를 들어, 영상 컨텐츠 등으로 호칭될 수 있다. HTML 소스(31)는 HTML5 영역에서 HTML5 등에 의해 구동되는 영역을 기술하는 소스를 의미할 수 있다. HTML 소스(31)는 HTML5기반의 소스코드로 구성될 수 있다. 예를 들어 HTML 소스(31)는 iframe 태그로 구성된 소스코드를 의미할 수도 있다. HTML 소스(31)는 HTML5로 구성된 소스코드일 수도 있고, CSS 및/또는 자바스크립트 등이 포함될 수도 있다.
멀티미디어 컨텐츠(30)는 시간(time)의 흐름에 따른 이미지 및/또는 소리 등으로 표현될 수 있다. 멀티미디어 컨텐츠(30)는 시간 단위로 복수의 프레임(frame)들을 포함할 수 있다.
멀티미디어 컨텐츠(30)는 적어도 하나의 HTML 소스(31)와 시간(time)을 매개로 결합될 수 있다. 예를 들어, 도 3을 참조하면, 멀티미디어 컨텐츠(30)의 4번 시간단위에는 HTML5 01의 HTML 소스(31)과 결합될 수 있다. 예를 들어, 도 3을 참조하면, 멀티미디어 컨텐츠(30)의 13번 시간단위에는 HTML5 03의 HTML 소스(31)과 결합될 수 있다. 예를 들어, 멀티미디어 컨텐츠(30)는 특정 시간에 HTML 소스(31)에 나타난 바에 따른 동작을 수행하도록 구성될 수 있다.
실시예들에 따른 HTML5 통합 플레이어(32)에 대하여 설명한다.
HTML5 통합 플레이어(32)는 실시예들에 따른 웹 컨텐츠를 재생한다. HTML5 통합 플레이어(32)는 도 1의 사용자의 단말 장치(101) 내에 포함될 수 있다. HTML5 통합 플레이어(32)는 사용자의 단말 장치에 설치된 프로그램일 수도 있고, 사용자의 단말 장치에서 지원하는 웹 브라우저일 수도 있다.
HTML5 통합 플레이어(32)는 상술한 웹 컨텐츠를 시간 값에 기초하여 재생한다. 실시예들에 따른 웹 컨텐츠는, 웹 컨텐츠의 재생 시작 시점부터 시간값 데이터를 발생시킨다. 시간값 데이터는 통합 플레이어에 주기적으로 입력된다. 입력된 정보는 다시 HTML5 컨테이너로 전달된다. 사전에 HTML5 컨테이너에 입력된 시간값 정보와 멀티미디어에서 발생된 시간값 정보가 동일한 경우 HTML 소스(31)로 그에 해당하는 HTML5 단위 페이지 문서를 호출한다.
HTML5 통합 플레이어(32)는 멀티미디어와 같이 시간값 정보를 발생시키는 구성 요소 중 하나이다. 예를 들어, 사용자의 플레이어 조작으로 임의의 시간 값 데이터의 변동이 발생될 경우, 플레이어는 변경된 시간값 정보를 멀티미디어 콘텐츠와 HTML5 컨테이너로 전달한다. 멀티미디어로 전달된 시간값은 해당 시점부터 영상이 재생되도록 동기화 한다. HTML5 컨테이너로 전달된 시간값은 순차 재생 시와 동일한 방법으로 HTML5 단위페이지를 호출한다.
여기서 실시예들에 따른 멀티미디어 컨텐츠(30)는 VR/AR 환경에서 수행되는 360도 이미지 및/또는 영상 데이터일 수 있다. 예를 들어 실시예들에 따른 멀티미디어 컨텐츠(30)는 파노라마(panorama) 이미지/영상일 수도 있고, 전방향(omnidirectional) 이미지/영상일 수도 있고, 포인트 클라우드 데이터(point cloud data)일 수도 있다. 실시예들에 따른 멀티미디어 컨텐츠(30)는 ISOBMFF 형태의 파일(file)로 이루어진 데이터일 수도 있다.
도 4는 실시예들에 따른 웹 컨텐츠의 예시를 나타낸다.
도 4에 나타난 실시예들에 따른 웹 컨텐츠는 예를 들어 전체 영상형, 혼합형 및/또는 음성형 등으로 구분될 수 있다. 도 3에 나타난 실시예들에 따른 웹 컨텐츠는 도 1 내지 도 3에 나타난 웹 컨텐츠를 의미할 수 있다.
전체 영상형은 HTML로 구성된 HTML 영역과 영상 영역이 전부 오버랩(overlap)되는 웹 컨텐츠의 유형일 수 있다. 예를 들어, 전체 영상형은 영상 영역이 전체 화면(또는 웹 컨텐츠의 전체 영역 부분)으로 구성되고, HTML에 의해 구동되는 영역이 일부 또는 전부 화면의 영역으로 구성될 수 있다.
예를 들어, 전체 영상형은 지정된 콘텐츠 화면 전체에 영상 영역을 배치하고 영상 레이아웃 상위에 동영상 영역과 동일한 사이즈의 iframe을 배치한 형태일 수 있다. 전체 영상형에서, HTML5 단위 페이지는 투명 배경을 설정하여 하위에서 재생되고 있는 영상 화면이 함께 노출될 수 있다. 전체 영상 유형의 웹 컨텐츠는 영상의 내용에 따라 화면에 제시되는 부가 정보를 다양한 그래픽 효과와 함께 제공할 수 있다.
혼합형은 HTML로 구성된 HTML 영역 및/또는 영상 영역이 전체 화면(또는 웹 컨텐츠의 전체 영역 부분) 중 각각 일부 영역에만 포함되는 경우를 의미할 수 있다. 여기서 HTML 영역 및/또는 영상 영역은 서로 겹칠 수도 있고 겹치치 않게 배치될 수 있다.
예를 들어, 혼합형은 콘텐츠의 화면을 분할하여 iframe과 동영상을 각각 배치하는 형식일 수 있다. 예를 들어, 도 4의 중앙에 나타난 도면을 참조하면, 웹 컨텐츠의 왼쪽에 iframe을 오른쪽에 설명 동영상을 배치한 형식의 웹 컨텐츠가 혼합형일 수 있다. 이 유형에서, 영상 영역 및/또는 HTML 영역은 그 배치 방식이나 크기는 자유롭게 조정할 수 있다. 부분 영상 유형의 예시 콘텐츠는 크로마키 기법으로 영상을 촬영하여 iframe의 HTML5 단위 페이지의 배경과 동일 배경으로 편집하여 시각적으로 하나의 콘텐츠로 보이게 하였다. 크로마키 촬영이 어려울 경우 iframe과 영상 영역을 분리된 형태로 구성하여도 무방하다. 영상의 시간값에 따라 iframe의 부가 정보가 상시 노출되는 형식이다.
음성형은 영상 파일이 음성 파일이며, HTML 영역만으로 구성되며 음성 파일의 시간값을 이용하여 전체 화면을 구성하는 웹 컨텐츠의 유형일 수 있다. 음성형의 웹 컨텐츠는 이미지 및/또는 텍스트로 구성된 화면을 제공한다. HTML5 멀티미디어 융합 콘텐츠의 유형을 선정함에 있어 구성 방식은 전적으로 화면 설계의 외형적인 기준과 사용하는 멀티미디어 리소스의 종류에 따랐으며, 내용적인 효과성은 고려하지 않았다. 다만 플래시 기반으로 개발되었던 콘텐츠 유형들은 모두 표현이 가능할 수 있도록 고려하였다.
도 5는 실시예들에 따른 360도 멀티미디어 디바이스(50)의 구조의 예시를 나타낸다.
실시예들에 따른 360도 멀티미디어 디바이스(50)는 도 1에 나타난 사용자의 단말 장치(101)를 의미할 수 있다. 실시예들에 따른 360도 멀티미디어 디바이스(50)는 예를 들어, HMD(Head Mount Display)를 의미할 수 있다. 실시예들에 따른 360도 멀티미디어 디바이스(50)는 예를 들어 VR/AR 기능을 구현하기 위한 디스플레이를 포함할 수 있고, VR/AR을 구현하기 위한 360도 영상 데이터를 수신하고 이를 처리하여 사용자에게 렌더링할 수 있는 디바이스를 의미할 수 있다.
360도 영상 데이터는 예를 들어, 360도 이미지 데이터(360 degree image data), 360도 비디오 데이터(360 degree video data)를 의미할 수 있다. 구체적으로 360도 영상 데이터는 파노라마(panorama) 이미지/비디오를 의미할 수도 있고, 전방향(omnidirectional) 이미지/비디오를 의미할 수도 있다.
실시예들에 따른 360도 멀티미디어 디바이스(50)는 예를 들어, 수신 처리부(51), 파싱부(52), 렌더링부(53) 및/또는 디스플레이부(54)를 포함할 수 있다.
수신 처리부(51)는 서버(server) 또는 웹 컨텐츠 제공자로부터 웹 컨텐츠를 수신할 수 있다. 수신 처리부(51)는 예를 들어, 웹 컨텐츠를 구성하는 하나 또는 그 이상의 파일들, 웹 컨텐츠를 구성하는 영상 데이터 등을 수신할 수 있다. 여기서, 웹 컨텐츠를 구성하는 하나 또는 그 이상의 파일들, 웹 컨텐츠를 구성하는 영상 데이터가 압축(compress)되어 하나의 파일로 구성될 수 있다. 예를 들어, 압축된 파일(encapsulated file)은 ISOBMFF 형식에 기반하여 인캡슐레이팅된 파일일 수 있다. 수신 처리부(51)는 인캡슐레이팅된 파일을 디캡슐레이팅(decapsulating)하여 웹 컨텐츠를 구성하는 하나 또는 그 이상의 파일들, 웹 컨텐츠를 구성하는 영상 데이터 등을 추출할 수 있다.
파싱부(52)는 웹 컨텐츠를 구성하는 하나 또는 그 이상의 파일들, 웹 컨텐츠를 구성하는 영상 데이터를 파싱(parsing)한다. 웹 컨텐츠를 구성하는 하나 또는 그 이상의 파일들은 예를 들어, 360도 영상 데이터, 하나 또는 그 이상의 HTML 파일들, 각 HTML 파일에 대응하는 상기 시간 정보를 나타내는 XML(eXtensible Markup Language) 데이터, 및 상기 XML 데이터를 파싱(parsing)하기 위한 자바스크립트(JavaScript) 소스를 포함하는 데이터를 포함할 수 있다. 파싱부(52)는 360도 영상 데이터, 하나 또는 그 이상의 HTML 파일들, 각 HTML 파일에 대응하는 상기 시간 정보를 나타내는 XML(eXtensible Markup Language) 데이터, 및 상기 XML 데이터를 파싱(parsing)하기 위한 자바스크립트(JavaScript) 소스를 포함하는 데이터를 수신한 파일들로부터 추출하여 분류, 디코딩(decoding) 처리한다. 파싱부(52)는 상술한 자바스크립트(JavaScript) 소스를 이용하여 시간 정보를 나타내는 XML(eXtensible Markup Language) 데이터를 추출(파싱)한다.
렌더링부(53)는 파싱부(52)에 의해 파싱 및/또는 디코딩 처리된 360도 영상 데이터, 하나 또는 그 이상의 HTML 파일들, 각 HTML 파일에 대응하는 상기 시간 정보를 나타내는 XML(eXtensible Markup Language) 데이터, 및 상기 XML 데이터를 파싱(parsing)하기 위한 자바스크립트(JavaScript) 소스를 이용하여, 사용자에게 보여지는 화면 상의 영역(이미지 등)을 생성(재구성)한다.
렌더링부(53)는 사용자에게 보여지는 영역을 재구성한다. 따라서, 렌더링부(53)는 사용자가 바라보는 위치 즉, 뷰포트(viewport) 정보에 기초하여 사용자에게 보여지는 이미지/영상을 생성한다. 뷰포트(viewport) 정보는 실시예들에 따른 360도 멀티미디어 디바이스 내에서 생성될 수 있다.
디스플레이부(54)는 렌더링부(53)에 의해 생성 및/또는 재구성된 화면 상의 영역(이미지)를 디스플레이(display)한다.
도 6은 실시예들에 따른 360도 컨텐츠(contents)를 나타낸다.
도 6(A)는 실시예들에 따른 360도 컨텐츠를 평면으로 프로젝션(projecteion)한 것을 나타낸다. 즉, 도 6(A)는 360도 컨텐츠를 사각형 이미지(rectangular image) (60)로 나타낸 것이다. 도 6(B)는 실시예들에 따른 360도 컨텐츠를 구면(sphere surface) (62)상에 투영한 것을 나타낸다.
실시예들에 따른 멀티미디어 디바이스(multimedia device)는 실시예들에 따른 360도 컨텐츠를 도 6(A)에 나타난 바와 같이 사각형 이미지(60)로 수신한다. 즉, 실시예들에 따른 수신한 360도 영상 데이터(60)는 도 6(A)와 같은 사각형 이미지 형태의 이미지 또는 영상(60)일 수 있다.
실시예들에 따른 멀티미디어 디바이스(multimedia device)는 도 6(A)와 같은 사각형 이미지(60) 형태로 영상 데이터를 수신하고, 이들 중 사용자가 바라보는 시선 즉 뷰포트(viewport)에 기초하여, 사용자가 바라보는 영역(61)을 파싱 및 디코딩 처리하여 이를 렌더링(재구성)한다.
사용자가 바라보는 영역(61)은 예를 들어 뷰포트(viewport)라고 할 수도 있다. 뷰포트(61)를 나타내는 정보는 실시예들에 따른 멀티미디어 디바이스가 생성할 수 있다.
실시예들에 따른 360도 컨텐츠(60)는 아지무스(azimuth) 및 엘리베이션(elevation)으로 특정 지점의 위치를 표현할 수 있다. 예를 들어, 61a를 가리키는 지점은 +60도의 아지무스와 +60도의 엘리베이션에 위치한 것으로 표현될 수 있다. 즉, 61a 지점은 사용자가, 중앙이 되는 지점부터 60도 시계방향으로 가로 방향으로 회전하고, 60도 위쪽 방향으로 고개를 회전했을 때 사용자가 바라보게 되는 지점을 의미할 수 있다.
실시예들에 따른 멀티미디어 디바이스(multimedia device)는 뷰포트(viewport) (61)를 나타내는 정보를 생성한다. 뷰포트(61)를 나타내는 정보는 아지무스 및 엘리베이션으로 표현될 수 있다.
도 7은 실시예들에 따른 360도 멀티미디어 디바이스를 위한 웹 컨텐츠의 예시를 나타낸다.
실시예들에 따른 360도 멀티미디어 디바이스는 도 7에 나타난 웹 컨텐츠(70)를 재구성(렌더링)한다. 즉, 실시예들에 따른 360도 멀티미디어 디바이스는 웹 컨텐츠를 위한 데이터를 수신한다. 실시예들에 따른 웹 컨텐츠를 위한 데이터는 360도 영상 데이터, 하나 또는 그 이상의 HTML 파일들, 각 HTML 파일에 대응하는 상기 시간 정보를 나타내는 XML(eXtensible Markup Language) 데이터, 및 상기 XML 데이터를 파싱(parsing)하기 위한 자바스크립트(JavaScript) 소스를 포함하는 데이터를 포함할 수 있다.
실시예들에 따른 360도 멀티미디어 디바이스는 웹 컨텐츠를 위한 데이터를 수신하고 이들을 디코딩 처리하여 웹 컨텐츠(70)를 재구성할 수 있고, 특히 실시예들에 따른 360도 멀티미디어 디바이스는 사용자의 뷰포트(71b) 영역을 재구성(렌더링)할 수 있다.
실시예들에 따른 웹 컨텐츠(70)는 하나 또는 그 이상의 위젯(Widget)들 (71a 내지 71d)을 포함할 수 있다. 하나 또는 그 이상의 위젯(widget)들 (71a 내지 71d)은 웹 컨텐츠를 위한 데이터 내의 하나 또는 그 이상의 HTML 파일들에 포함될 수 있다. 즉, 실시예들에 따른 웹 컨텐츠를 위한 데이터는 하나 또는 그 이상의 위젯(widget)들을 나타내는 데이터를 포함하는 하나 또는 그 이상의 HTML 파일들을 포함할 수 있다.
위젯들(71a~71c)은 예를 들어 360도 이미지/영상 데이터 위에 오버레이(overlay)되어 렌더링되는 컴포넌트(component)들을 의미한다.
예를 들어, 위젯은 텍스트 데이터(71a)일 수 있다. 또한 예를 들어, 위젯은 이미지 데이터(71b)일 수 있다. 또한 예를 들어, 위젯은 특정 위치를 가리키는 화살표 모양의 아이콘(icon) (71d)일 수 있다.
예를 들어, 위젯은 버튼(button) (71c)이어서 사용자의 클릭 또는 사용자의 상호작용 신호에 기초하여 다른 텍스트, 이미지 또는 위젯으로 변경되는 컴포넌트일 수도 있다. 예를 들어, 도 7을 참조하면, 위젯인 버튼 71c는 사용자의 클릭에 기초하여 새로운 텍스트를 보여주도록 구성될 수 있다.
XML 데이터는 예를 들어, 상술한 하나 또는 그 이상의 HTML 파일들이 상술한 웹 컨텐츠(70)에 매핑(mapping)되는 시간을 나타내는 정보를 포함할 수 있다. 또한, XML 데이터는 시간을 나타내는 정보에 기초하여 웹 컨텐츠(70)에 매핑되는 위치를 나타내는 정보를 더 포함할 수 있다.
예를 들어, XML 데이터는 제1 HTML 파일에 포함된 사람 모양의 위젯(71b)을 제1 시간에, 제1 위치에 매핑할 것을 시그널링할 수 있다. 여기서 XML 데이터는 제1 시간을 나타내는 정보와 제1 위치를 나타내는 정보를 더 포함할 수 있다. 제1 위치를 나타내는 정보는 VR 환경에서 나타나는 위치일 수 있다. 따라서 제1 위치를 나타내는 정보는 구면(sphere surface) 상의 아지무스(azimuth) 및/또는 엘리베이션(elevation) 값에 의해 표현될 수 있다.
즉, 웹 컨텐츠를 위한 데이터는 하나 또는 그 이상의 위젯(widget)들을 포함할 수 있고, 상기 하나 또는 그 이상의 위젯들은 상기 XML 데이터에 의해 상기 360도 영상 데이터에 매핑(mapping)될 수 있다. 또한, XML 데이터는 상기 XML 데이터에 의해 매핑되는 적어도 하나의 위젯의 상기 360도 영상 데이터 내의 위치를 나타내는 위치 정보를 더 포함할 수 있다. 여기서 위치 정보는 구면 상의 상기 적어도 하나의 위젯의 최좌측의 위치를 나타내는 제1 아지무스 정보, 상기 적어도 하나의 위젯의 최우측의 위치를 나타내는 제2 아지무스 정보, 상기 적어도 하나의 위젯의 최상측의 위치를 나타내는 제1 엘리베이션 정보, 및 상기 적어도 하나의 위젯의 최하측의 위치를 나타내는 제2 엘리베이션 정보를 포함할 수 있다.
도 8은 실시예들에 따른 360도 멀티미디어 디바이스를 위한 웹 컨텐츠에서 위젯(widget)의 위치를 나타내는 방법을 나타낸다.
도 8은 실시예들에 따른 위젯들이, 사용자의 디바이스 장치 (VR 환경)에서 나타나기 위한 위치를 시그널링하는 방법을 나타낸다. 위젯들의 위치를 나타내는 정보는 도 8에 나타난 바와 같이 2가지 방법으로 나타날 수 있다. 위젯들의 위치를 나타내는 정보는 도 7에서 설명한 위치 정보를 의미할 수 있으며, XML 데이터에 포함되어 각 위젯에 대한 위치 정보 등이 시그널링될 수 있다.
실시예들에 따른 XML 데이터는, HTML 파일에 의해 제공되는 하나 또는 그 이상의 위젯(widget)들 (80A, 80B)을 구면 상에 표현하는 방법을 제공한다. XML 데이터는 위젯(widget) (80A, 80B)이 구면 상에 표현되는 방식을 나타내는 모드 정보(mode information), 위젯(widget) (80A, 80B)의 최-좌측 위치를 나타내는 좌측_아지무스 정보(Azimuth_left information), 위젯(widget) (80A, 80B)의 최-우측 위치를 나타내는 우측_아지무스 정보(Azimuth_right information), 위젯(widget) (80A, 80B)의 최-상단 위치를 나타내는 최상단_엘리베이션 정보(Elevation_top information), 위젯(widget) (80A, 80B)의 최-하단 위치를 나타내는 최하단_엘리베이션 정보(Elevation_bottom information), 위젯(widget) (80A, 80B)의 방향성 여부를 나타내는 오리엔테이션 정보(orientation information), 위젯(widget) (80A, 80B)이 화살표(arrow)인 경우 화살표가 가리키는 방향을 나타내는 정보, 위젯(widget) (80A, 80B)이 구면 상에서 회전(rotation)되어 표현되는 정도를 나타내는 정보를 더 포함할 수 있다.
도 8(A)는 제1 모드에 따라 위젯(widget, 80A)을 구면 상에 표현한 것이다. 도 8(A)는 XML 데이터의 모드 정보(mode information)가 제1 모드임을 나타낸 경우를 나타낸다. 제1 모드는 두 개의 수평(horizontal)으로 평행한 원들과 두 개의 수직(vertical)으로 평행한 원들에 의해 만들어진 영역(80A)에 위젯이 위치하도록 구성된다. 두 개의 수평으로 평행한 원은, 엘리베이션(elevation) 값만 다르고, 평행한 구면 상의 원을 의미할 수 있고, 두 개의 수직으로 평행한 원은, 아지무스(azimuth) 값만 다르고, 평행한 구면 상의 원을 의미할 수 있다.
도 8(B)는 제2 모드에 따라 위젯(widget, 80B)을 구면 상에 표현한 것이다. 도 8(B)는 XML 데이터의 모드 정보(mode information)가 제2 모드임을 나타낸 경우를 나타낸다. 제2 모드는 네 개의 큰 원들에 의해 만들어진 영역(80B)에 위젯이 위치하도록 구성된다. 네 개의 큰 원은, 구면(sphere surface) 및 원점(center point)을 지나는 평면(plane)이 만나서 생성된 큰 원들로 구성된다. 네 개의 큰 원은 수직으로 평행한 두 개의 아지무스 큰 원들 및/또는 두 개의 수평으로 평행한 엘리베이션 큰 원들을 포함할 수 있다.
도 9는 실시예들에 따른 웹 컨텐츠의 구조를 나타낸다.
구체적으로 도 9은 실시예들에 따른 상호작용이 가능한 웹 컨텐츠의 데이터 구조를 나타낸다. 도 9에 나타난 실시예들에 따른 상호작용이 가능한 웹 컨텐츠는 도 1의 생성 장치(100)에서 생성될 수 있다. 실시예들에 따른 상호작용이 가능한 웹 컨텐츠는 도 2 및 도 4에 나타난 실시예들에 따른 상호작용이 가능한 웹 컨텐츠를 의미한다.
실시예들에 따른 상호작용이 가능한 웹 컨텐츠는 웹 브라우저(web browser)에서 구동될 수 있다. 따라서 실시예들에 따른 상호작용이 가능한 웹 컨텐츠는 웹 컨텐츠를 구동하기 위한 프론트앤드(front-end) 파일들 및/또는 백앤드(back-end) 파일들을 포함할 수 있다. 프론트앤드(front-end) 파일들은 웹 컨텐츠가 사용자에게 제공될 때 웹 컨텐츠의 외형을 구성하는 데이터를 포함하는 파일들을 의미한다. 백앤드(back-end) 파일들은 웹 컨텐츠가 사용자에게 제공될 때 웹 컨텐츠의 복수의 HTML 파일들이 영상 데이터에 결합되는 구성을 나타내기 위한 데이터이다.
백앤드 파일들은 예를 들어, 웹 컨텐츠 내의 영상 데이터와 복수의 HTML 소스들(HTML 파일들)을 연결하기 위한 XML(eXtensible Markup Language) 파일을 포함할 수 있다.
나아가 백앤드 파일들은 실시예들에 따른 XML(eXtensible Markup Language) 파일을 웹 컨텐츠가 해석 및/또는 파싱(parsing)하기 위한 DTD(Document Type Definition) 파일을 더 포함할 수 있다.
프론트앤드 파일들은 예를 들어, 웹 컨텐츠를 구성하는 HTML5 파일, CSS 파일, 자바스크립트(JavaScript) 파일을 포함할 수 있다.
XML(eXtensible Markup Language) 파일은 예를 들어, 아래와 같은 신텍스로 구성될 수 있다.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/xsl" href="./slide_info.xsl"?>
<!DOCTYPE data SYSTEM "./slide_info.dtd">
<data>
<!―View의 구성 정보를 나타내는 부분일 수 있다 -->
<options name="Player Option">
<type>mix</type> <!-- video(전체 영상형)| mix(혼합형)| sound(음성형)-->
<setting>
<contents> <!--영상 데이터가 재생되는 영역-->
<width>1008</width>
<height>515</height>
</contents>
<player> <!-- 플레이어 위치 및 크기(px) -->
<azimuth1>0</azimuth1>
<elevation1>480</elevation1>
<azimuth2>1008</azimuth2>
<elevation2>35</elevation2>
</player>
<video> <!-- 비디오 -->
<pos> <!-- 위치 및 크기(px) -->
<mode>1</mode>
<azimuth1>648</azimuth1>
<elevation1>0</elevation1>
<azimuth2>360</azimuth2>
<elevation2>480</elevation2>
</pos>
<fileinfo> <!-- 파일정보 -->
<path>../user/media/mp4/</path>
<filename>03_1</filename>
<extension>mp4</extension>
</fileinfo>
</video>
<slide> <!-- 슬라이드 Sync -->
<pos> <!-- 위치 및 크기(px) -->
<mode>2</mode>
<azimuth1>0</azimuth1>
<elevation1>0</elevation1>
<azimuth2>70</azimuth2>
<elevation2>70</elevation2>
</pos>
<fileinfo> <!-- 파일정보 -->
<timeunit>sec</timeunit>
<!-- sec or ms -->
<path>../user/sink/03_s/</path>
<extension>html</extension>
</fileinfo>
</slide>
</setting>
<functions>
<sink>true</sink> <!-- sink슬라이드 show ↔ -->
<volume>true</volume>
<!-- volume요소 show ↔ hide -->
<seek>true</seek>
<!-- progressbar seek가능 show ↔ hide -->
<playbackrate>true</playbackrate>
<!―배속 조절 show ↔ hide -->
</functions>
</options> <!-- 개별 Sync슬라이드들 정보 -->
<slides name="Sync Slide List"> <!-- Sync 슬라이드들의 공통 경로 -->
<slide time="0" file="03_tab01"/>
<!-- 개별 Sync 슬라이드들 정보|@time: 싱크 시간, @file: 공통 경로와 확장자를 제외한 파일명-->
<slide time="4" file="03_tab02">
<mode>1</mode>
<azimuth1>30</azimuth1>
<elevation1>20</elevation1>
<azimuth2>50</azimuth2>
<elevation2>40</elevation2>
</slide>
<slide time="492" file="03_tab03">
<mode>1</mode>
<azimuth1>-10</azimuth1>
<elevation1>-30</elevation1>
<azimuth2>10</azimuth2>
<elevation2>30</elevation2>
</slide>
<slide time="623" file="03_tab04">
<mode>2</mode>
<rotation>30</rotation>
<azimuth1>-50</azimuth1>
<elevation1>-40</elevation1>
<azimuth2>10</azimuth2>
<elevation2>0</elevation2>
</slide>
<slide time="805" file="03_tab05"/>
<arrowpos>30 40</arrowpos>
<arrowvector>1 -1</arrowvector>
<mode>2</mode>
<azimuth1>0</azimuth1>
<elevation1>0</elevation1>
<azimuth2>20</azimuth2>
<elevation2>20</elevation2>
</slide>
<slide time="990" file="03_tab06"/>
... ...
<slide time="2190" file="03_tab18"/>
</slides>
</data>
상술한 바와 같이, XML 파일은 실시예들에 따른 웹 컨텐츠가 혼합형인지, 전체 영상형인지, 음성형인지 여부를 나타내기 위한 <type> 태그를 포함할 수 있다. 예를 들어, <type> 태그 내의 내용이 video이면 전체 영상형, mix이면 혼합형, sound이면 음성형임을 나타낼 수 있다.
<contents> 태그는 실시예들에 따른 영상 데이터와 복수의 HTML 소스들이 웹 컨텐츠 내에서 재생되는 영역을 나타낸다. <contents> 태그 내의 <width>는 해당 영상 데이터의 폭(width) 정보를, <height> 태그는 해당 영상 데이터의 높이(height) 정보를 나타낸다. <player> 태그는 실시예들에 따른 웹 컨텐츠의 조작부의 영역의 위치 및/또는 크기를 나타낸다.
<video> 태그는 실시예들에 따른 영상 데이터가 웹 컨텐츠 내에서 재생되는 영역을 나타낸다. <video> 태그 내 <pos>는 영상 데이터가 재생되는 웹 컨텐츠 내 위치(position)을 나타낸다. <video> 태그 내 <fileinfo>는 영상 데이터를 나타내는 영상 파일에 대한 정보를 나타낸다. <path> 태그는 영상 파일의 경로를, <filename>은 영상 파일의 이름을, <extension>는 영상 데이터의 확장자 정보를 나타낸다.
<slide> 태그는 예를 들어, 실시예들에 따른 영상 데이터와 결합되는 HTML 소스들(HTML 파일들)에 대한 정보를 나타낸다. <pos>는 HTML 영상 데이터와 결합되는 HTML 파일이 적용되는 웹 컨텐츠 내 위치(position)을 나타낸다. <video> 태그 내 <fileinfo>는 HTML 파일에 대한 정보를 나타낸다. <path> 태그는 HTML 파일의 경로를, <filename>은 HTML 파일의 이름을, <extension>는 HTML 파일의 확장자 정보를 나타낸다.
<mode> 태그는 예를 들어, 실시예들에 따른 영상 데이터와 결합되는 HTML 소스들(HTML 파일들)에 의해 나타난 위젯(Widget)을 VR 환경의 구면 상에서 표현하는 방식을 나타내는 모드 정보이다. 모드 정보는 도 8에서 설명한 바와 같은 모드 정보를 의미할 수 있다.
<azimuth1> 태그는 도 8에서 설명한 위젯(widget) (80A, 80B)의 최-좌측 위치를 나타내는 좌측_아지무스 정보(Azimuth_left information)를 의미할 수 있다.
<azimuth2> 태그는 도 8에서 설명한 위젯(widget) (80A, 80B)의 최-우측 위치를 나타내는 우측_아지무스 정보(Azimuth_right information)를 의미할 수 있다.
<elevation1> 태그는 도 8에서 설명한 위젯(widget) (80A, 80B)의 최-상단 위치를 나타내는 최상단_엘리베이션 정보(Elevation_top information)를 의미할 수 있다.
<elevation2> 태그는 도 8에서 설명한 위젯(widget) (80A, 80B)의 최-하단 위치를 나타내는 최하단_엘리베이션 정보(Elevation_bottom information)를 의미할 수 있다.
<arrowpos> 태그는 위젯(widget)이 화살표(arrow)인 경우, 화살표의 위치를 나타내는 정보이다.
<arrowvector> 태그는 도 8에서 설명한 위젯(widget) (80A, 80B)이 화살표(arrow)인 경우 화살표가 가리키는 방향을 나타내는 정보일 수 있다.
<rotation> 태그는 도 8에서 설명한 위젯(widget) (80A, 80B)이 회전되는 정도를 나타내는 정보이다.
실시예들에 따른 XML 파일은, 특정 HTML 파일을 적용함으로써 웹 컨텐츠에 표시(show)될지 또는 웹 컨텐츠에 숨겨질(hide)지 여부를 나타내기 위한 <sink> 태그를 더 포함할 수 있다.
실시예들에 따른 XML 파일은, 특정 영상 데이터의 음량(volume)을 조절 또는 키거나 끌지 여부를 제어하기 위한 <volume> 태그를 더 포함할 수 있다.
실시예들에 따른 XML 파일은, 웹 컨텐츠의 특정 시간을 재생하도록 제어하기 위한 프로그래스 바(progress bar)를 보여주거나 숨길지 여부를 결정하기 위한 <seek> 태그를 더 포함할 수 있다.
<slides> 엘리먼트는 실시예들에 따른 HTML 파일들이 영상 데이터에 결합되는 시간을 나타내기 위한 정보이다.
실시예들에 따른 상호작용이 가능한 웹 컨텐츠의 생성 장치는 사용자의 단말 장치로부터 영상 데이터, 하나 또는 그 이상의 HTML (HyperText Markup Language) 파일들 및 각 HTML 파일에 대응하는 시간 정보를 수신할 수 있다.
실시예들에 따른 상호작용이 가능한 웹 컨텐츠의 생성 장치는 웹 컨텐츠를 생성할 수 있다. 예를 들어, 생성 장치는, 수신한 각 HTML 파일에 대응하는 시간 정보와 하나 또는 그 이상의 HTML 파일들을 매핑(mapping)하고, 이들을 XML 파일의 <slides> 엘리먼트의 하위 태그들에 추가할 수 있다.
이러한 구성으로 인해, 웹 컨텐츠는 자바스크립트 소스에 기초하여 상기 영상 데이터를 재생하도록 구성될 수 있고, 자바스크립트 소스에 기초하여, 현재 재생 시간 정보를 추출함으로써 각 시간 정보에 대응하는 HTML 파일을 구동하도록 구성될 수 있다.
예를 들어, 상술한 XML 파일에 따르면, 웹 컨텐츠는 시간이 1348인 경우 03_tab08.html의 파일을 불러오고 이를 실행하도록 구성된다.
실시예들에 따른 웹 컨텐츠는 상술한 XML 파일을 파싱하는데 사용되는 DTD (Document Type Definition) 데이터를 더 포함할 수 있다. 상술한 XML 파일에서는 예를 들어, <!DOCTYPE data SYSTEM "./slide_info.dtd"> 태그로, DTD 파일을 slide_info.dtd로 참조한다.
HTML5 파일(메인 HTML 파일) 및 CSS 파일(81a)은 웹 컨텐츠의 외형을 나타내기 위한 HTML 소스로 이루어진 파일을 의미한다. HTML5 파일은 자바스크립트(JavaScript) 파일(81b)을 참조(reference)할 수 있다.
자바스크립트(JavaScript) 파일(81b)은 웹 컨텐츠의 현재 재생 시간(current time)을 추출하기 위한 소스 코드를 포함할 수 있다. 즉, 웹 컨텐츠는 자바스크립트 소스에 기초하여 실시예들에 따른 영상 데이터를 재생하도록 구성될 수 있고, 자바스크립트 소스에 기초하여 웹 컨텐츠의 현재 재생 시간 정보를 추출함으로써 각 시간 정보에 대응하는 HTML 파일을 구동하도록 구성될 수 있다. 자바스크립트(JavaScript) 파일(81b)은 별도의 파일로 구성되지 않고, HTML 내에서 <script> 태그에 의해 내장될 수도 있다.
자바스크립트(JavaScript) 파일(81b)은 다음과 같이 구성될 수 있다.
1 $(document).ready(function(){
2 var video = $('video');
3 var thisSecond = -1;
4 video.on('timeupdate', function(){
5 video.fadeIn("slow");
6 var currentPos = parseInt(video[0].currentTime);
7 if(thisSecond!=currentPos){
8 setTab(currentPos);
9 setList(currentPos);
10 }
11 thisSecond = currentPos;
12 });
13 var tabNums = [0, 1, 489, 620, 802, 987, 1183, 1345, 1471, 1574, 1768, 1876, 1930, 1994, 2048, 2108, 2155, 2187];
14 var seq = [0, 0];
15 var seq1 = [tabNums[1]];
16 var seq2 = [tabNums[2], tabNums[2]+1, tabNums[2]+2,tabNums[2]+3,tabNums[2]+4,tabNums[2]+5];
17 var seq3 = [tabNums[3], tabNums[3]+1, tabNums[3]+2,tabNums[3]+3];
18 var seq4 = [tabNums[4], tabNums[4]+1, tabNums[4]+2,tabNums[4]+3,tabNums[4]+4,tabNums[4]+5,tabNums[4]+6];
...
})
상술한 자바스크립트 소스를 참조하면, 웹 컨텐츠는 상술한 자바스크립트 소스에 기초하여, 현재 시간 정보를 추출(Line 4 내지 12)할 수 있고, 추출된 시간 정보에 기초하여 각 시간 정보에 대응하는 HTML 파일을 구동할 수 있다. 웹 컨텐츠는 각 시간 정보에 대응하는 HTML 파일을 구동하도록 HTML 파일들의 구동 시간을 설정(Line 13 내지 18 등)할 수 있다.
실시예들에 따른 360도 멀티미디어 디바이스를 위한 웹 컨텐츠 수신 방법 및 그 장치 HTML5을 이용함으로써 모바일, PC 등 범용적인 사용자의 단말 장치에서 사용자와 상호작용이 가능한 웹 컨텐츠를 생성할 수 있다.
실시예들에 따른 360도 멀티미디어 디바이스를 위한 웹 컨텐츠 수신 방법 및 그 장치 영상 데이터에 HTML5를 결합함으로써 사용자와 상호작용이 가능한 웹 컨텐츠를 제공할 수 있다.
실시예들에 따른 360도 멀티미디어 디바이스를 위한 웹 컨텐츠 수신 방법 및 그 장치는 영상 데이터에 HTML5를 결합함으로써 사용자의 단말 장치가 별도의 프로그램 등의 설치 없이 웹 브라우저만을 이용하여 적은 메모리의 양으로도 웹 컨텐츠를 소비할 수 있다.
도 10은 실시예들에 따른 360도 멀티미디어 디바이스를 위한 웹 컨텐츠 수신 방법을 나타내는 흐름도이다.
실시예들에 따른 360도 멀티미디어 디바이스를 위한 웹 컨텐츠 수신 방법은 웹 컨텐츠를 위한 데이터를 수신하는 단계(S1000), 웹 컨텐츠를 위한 데이터를 파싱하는 단계(S1001), 웹 컨텐츠를 사용자의 뷰포트(viewport)의 위치에 기반하여 렌더링하는 단계(S1002), 웹 컨텐츠를 디스플레이(S1003)하는 단계를 더 포함할 수 있다.
S1000 단계는 실시예들에 따른 360도 멀티미디어 디바이스가 웹 컨텐츠를 위한 데이터를 수신하는 단계이다. 여기서, 웹 컨텐츠를 위한 데이터는 360도 영상 데이터, 하나 또는 그 이상의 HTML 파일들, 각 HTML 파일에 대응하는 상기 시간 정보를 나타내는 XML(eXtensible Markup Language) 데이터, 및 상기 XML 데이터를 파싱(parsing)하기 위한 자바스크립트(JavaScript) 소스를 포함하는 데이터를 포함할 수 있다.
실시예들에 따른 웹 컨텐츠는 상기 자바스크립트 소스에 기초하여 상기 360도 영상 데이터를 재생하도록 구성된다. 웹 컨텐츠는 상기 자바스크립트 소스에 기초하여, 현재 시간 정보를 추출함으로써 각 시간 정보에 대응하는 HTML 파일을 구동하도록 구성될 수 있고, 웹 컨텐츠는 상기 XML 데이터를 파싱하는데 사용되는 DTD (Document Type Definition) 데이터를 더 포함할 수 있다.
실시예들에 따른 하나 또는 그 이상의 HTML 파일들은 하나 또는 그 이상의 위젯(widget)들을 포함할 수 있고, 하나 또는 그 이상의 위젯들은 상기 XML 데이터에 의해 상기 360도 영상 데이터에 매핑(mapping)될 수 있다. 실시예들에 따른 XML 데이터는 상기 XML 데이터에 의해 매핑되는 적어도 하나의 위젯의 상기 360도 영상 데이터 내의 위치를 나타내는 위치 정보를 더 포함할 수 있다.
실시예들에 따른 위치 정보는 구면 상의 상기 적어도 하나의 위젯의 최좌측의 위치를 나타내는 제1 아지무스 정보, 상기 적어도 하나의 위젯의 최우측의 위치를 나타내는 제2 아지무스 정보, 상기 적어도 하나의 위젯의 최상측의 위치를 나타내는 제1 엘리베이션 정보, 상기 적어도 하나의 위젯의 최하측의 위치를 나타내는 제2 엘리베이션 정보, 상기 각 HTML 파일은 상기 적어도 하나의 위젯의 회전(rotation)의 정도를 나타내는 회전 정보를 포함할 수 있다.
본 발명에 따른 방법들은 다양한 컴퓨터 수단을 통해 수행될 수 있는 프로그램 명령 형태로 구현되어 컴퓨터 판독 가능 매체에 기록될 수 있다. 컴퓨터 판독 가능 매체는 프로그램 명령, 데이터 파일, 데이터 구조 등을 단독으로 또는 조합하여 포함할 수 있다. 컴퓨터 판독 가능 매체에 기록되는 프로그램 명령은 본 발명을 위해 특별히 설계되고 구성된 것들이거나 컴퓨터 소프트웨어 당업자에게 공지되어 사용 가능한 것일 수도 있다.
컴퓨터 판독 가능 매체의 예에는 롬(ROM), 램(RAM), 플래시 메모리(flash memory) 등과 같이 프로그램 명령을 저장하고 수행하도록 특별히 구성된 하드웨어 장치가 포함될 수 있다. 프로그램 명령의 예에는 컴파일러(compiler)에 의해 만들어지는 것과 같은 기계어 코드뿐만 아니라 인터프리터(interpreter) 등을 사용해서 컴퓨터에 의해 실행될 수 있는 고급 언어 코드를 포함할 수 있다. 상술한 하드웨어 장치는 본 발명의 동작을 수행하기 위해 적어도 하나의 소프트웨어 모듈로 작동하도록 구성될 수 있으며, 그 역도 마찬가지이다.
또한, 상술한 방법 또는 장치는 그 구성이나 기능의 전부 또는 일부가 결합되어 구현되거나, 분리되어 구현될 수 있다.
상기에서는 본 발명의 바람직한 실시예를 참조하여 설명하였지만, 해당 기술 분야의 숙련된 당업자는 하기의 특허 청구의 범위에 기재된 본 발명의 사상 및 영역으로부터 벗어나지 않는 범위 내에서 본 발명을 다양하게 수정 및 변경시킬 수 있음을 이해할 수 있을 것이다.

Claims (1)

  1. HTML(HyperText Markup Language) 영역을 포함하는 웹 컨텐츠를 제공하는 서버에 있어서,
    영상 데이터, 하나 이상의 HTML 파일들 및 각 HTML 파일에 대응하는 시간 정보를 수신하는 수신부;
    웹 컨텐츠를 생성하는 웹 컨텐츠 생성부;
    상기 생성된 웹 컨텐츠를 사용자의 단말 장치에게 전송하는 전송부; 및
    디스플레이부(displayer); 를 포함하고,
    상기 웹 컨텐츠는:
    1) 상기 하나 이상의 HTML 파일들 및 각 HTML 파일에 대응하는 상기 시간 정보를 나타내는 XML(eXtensible Markup Language) 데이터, 및 상기 XML 데이터를 파싱(parsing)하기 위한 자바스크립트(JavaScript) 소스를 포함하는 데이터를 포함하고,
    2) HTML에 의해 구동되는 HTML 영역 또는 상기 영상 데이터에 의해 구동되는 영상 영역 중 적어도 어느 하나를 포함하고,
    3) 상기 자바스크립트 소스에 기초하여, 상기 영상 영역의 영상 컨텐츠와 상기 HTML 영역이 시간에 따라 동기화되어 표시되도록 구성되고,
    4) 상기 사용자로부터 신호를 입력받기 위한 컴포넌트(component)를 포함하고,
    5) 상기 사용자로부터 입력 받은 상기 신호 및 상기 자바스크립트 소스에 기초하여 상기 시간 정보에 대응하는 HTML 파일이 구동되도록 구성되되, 상기 사용자로부터 입력 받은 상기 신호가 제1 시간의 웹 콘텐츠에 상응하는 경우 상기 웹 컨텐츠는 상기 제1 시간에 상응하는 HTML 파일들을 구동하고,
    상기 웹 컨텐츠는 상기 웹 컨텐츠를 구동하기 위한 프론트앤드(front-end) 파일들 및 백앤드(back-end) 파일들을 포함하고,
    상기 백앤드 파일들은 상기 XML 데이터를 파싱하는데 사용되는 DTD(Document Type Definition) 데이터를 더 포함하고,
    상기 XML 데이터는:
    상기 웹 컨텐츠가, i) 상기 HTML 영역과 상기 영상 영역을 모두 포함하는 혼합형인지, ii) 상기 영상 영역이 상기 웹 컨텐츠의 전체 영역에 상응하는 전체 영상형인지, 또는 iii) 상기 HTML 영역만을 포함하는 음성형인지 여부를 나타내는 <type> 태그; 및
    상기 영상 데이터와 복수의 HTML 소스들이 상기 웹 컨텐츠 내에서 재생되는 영역을 나타내는 <contents> 태그; 를 포함하고,
    상기 웹 컨텐츠는 상기 자바스크립트 소스에 기초하여 360도 영상 데이터를 재생하도록 구성되고,
    상기 HTML 파일들 각각은 하나 또는 그 이상의 위젯(widget)들을 포함하고,
    상기 하나 또는 그 이상의 위젯들은 상기 XML 데이터에 의해 상기 360도 영상 데이터에 매핑(mapping)되는, 서버.
KR1020210128916A 2021-03-02 2021-09-29 Html 영역을 포함하는 웹 컨텐츠를 제공하는 서버 KR102482201B1 (ko)

Priority Applications (1)

Application Number Priority Date Filing Date Title
KR1020210128916A KR102482201B1 (ko) 2021-03-02 2021-09-29 Html 영역을 포함하는 웹 컨텐츠를 제공하는 서버

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
KR1020210027528A KR102314354B1 (ko) 2021-03-02 2021-03-02 360도 멀티미디어 디바이스를 위한 웹 컨텐츠 수신 방법 및 그 장치
KR1020210128916A KR102482201B1 (ko) 2021-03-02 2021-09-29 Html 영역을 포함하는 웹 컨텐츠를 제공하는 서버

Related Parent Applications (1)

Application Number Title Priority Date Filing Date
KR1020210027528A Division KR102314354B1 (ko) 2021-03-02 2021-03-02 360도 멀티미디어 디바이스를 위한 웹 컨텐츠 수신 방법 및 그 장치

Publications (2)

Publication Number Publication Date
KR20220124071A KR20220124071A (ko) 2022-09-13
KR102482201B1 true KR102482201B1 (ko) 2022-12-29

Family

ID=78228064

Family Applications (2)

Application Number Title Priority Date Filing Date
KR1020210027528A KR102314354B1 (ko) 2021-03-02 2021-03-02 360도 멀티미디어 디바이스를 위한 웹 컨텐츠 수신 방법 및 그 장치
KR1020210128916A KR102482201B1 (ko) 2021-03-02 2021-09-29 Html 영역을 포함하는 웹 컨텐츠를 제공하는 서버

Family Applications Before (1)

Application Number Title Priority Date Filing Date
KR1020210027528A KR102314354B1 (ko) 2021-03-02 2021-03-02 360도 멀티미디어 디바이스를 위한 웹 컨텐츠 수신 방법 및 그 장치

Country Status (1)

Country Link
KR (2) KR102314354B1 (ko)

Family Cites Families (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20120110816A (ko) * 2011-03-30 2012-10-10 삼성에스디에스 주식회사 디지털 학습용 교재 출판 방법 및 장치
KR20130082732A (ko) 2011-12-15 2013-07-22 주식회사 네오위즈인터넷 콘텐츠 서비스를 위한 사용자 인터페이스를 제공하는 방법, 단말기 및 기록매체
US10958890B2 (en) * 2017-03-31 2021-03-23 Samsung Electronics Co., Ltd. Method and apparatus for rendering timed text and graphics in virtual reality video
KR20200050774A (ko) * 2018-11-02 2020-05-12 김현일 Html5 기반 웹 반응형 콘텐츠 인터렉티브 소셜 러닝 시스템

Also Published As

Publication number Publication date
KR20220124071A (ko) 2022-09-13
KR102314354B1 (ko) 2021-10-19

Similar Documents

Publication Publication Date Title
US10043549B2 (en) Systems and methods for generation of composite video
EP3329682B1 (en) A system for compositing video with interactive, dynamically rendered visual aids
US20010033296A1 (en) Method and apparatus for delivery and presentation of data
US20070006065A1 (en) Conditional event timing for interactive multimedia presentations
US20070006063A1 (en) Synchronization aspects of interactive multimedia presentation management
CN102833490A (zh) 一种互动视频的编辑播放方法、系统及电子学习设备
US9170997B2 (en) Commenting dynamic content
WO2007005268A2 (en) Synchronization aspects of interactive multimedia presentation management
KR20040083350A (ko) 복합 미디어 콘텐츠의 변환 장치 및 변환 방법과 복합미디어 콘텐츠 변환 프로그램
US20070006061A1 (en) Synchronization aspects of interactive multimedia presentation management
KR102482201B1 (ko) Html 영역을 포함하는 웹 컨텐츠를 제공하는 서버
US20240055025A1 (en) System and method for dynamic, data-driven videos
KR101856626B1 (ko) 사용자가 직접 제작할 수 있는 웹 방식의 광고 제작 및 재생시스템
KR102373749B1 (ko) Html 파일 및 xml 데이터를 이용하여 상호작용이 가능한 웹 컨텐츠를 사용자에게 제공하는 시스템
CN103631576A (zh) 多媒体评注编辑系统与相关的多媒体评注编辑方法和装置
Cesar et al. A graphics architecture for high-end interactive television terminals
Perakakis et al. HTML5 and companion web technologies as a universal platform for interactive Internet TV advertising
WO2020093865A1 (zh) 媒体文件及其生成方法和播放方法
Viel et al. Go beyond boundaries of iTV applications
US20070006062A1 (en) Synchronization aspects of interactive multimedia presentation management
Honkala et al. A device independent xml user agent for multimedia terminals
Mertens et al. Interactive content overviews for lecture recordings
US20230146648A1 (en) Immersive learning application framework for video with web content overlay control
JP2009025940A (ja) ウエブページ表示システム及びその表示方法
JP2003317110A (ja) ３次元動画像データの提供方法とその表示方法、該提供装置と該表示端末、該方法の実行プログラム、および該方法の実行プログラムを記録した記録媒体

Legal Events

Date Code Title Description
E701 Decision to grant or registration of patent right