> For the complete documentation index, see [llms.txt](https://docs.targetpick.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.targetpick.io/java-script-hybrid/video.md).

# 동영상

동영상 Script의 경우, 기본적인 동영상 광고 구동을 위한 예시 코드로 작성되어 있습니다. 각 매체별 디자인 특성에 맞도록 UI를 고려하시어 작업을 진행하시기 바랍니다.

## Script 동작 환경

### **Script 추가**

{% hint style="info" %}
동영상(TARGETPICK VIDEO) 광고를 추가하고 구동하기 위한 광고 스크립트를 추가합니다.\
( 아래 코드와 같이 사용하셔야 내부적인 업데이트 진행 시 편리하게 이용하실 수 있습니다. )
{% endhint %}

```html
<script type="text/javascript" src="https://advimg.ad-mapps.com/sdk/js/ver/3.0.0/ad_script.min.js" charset="utf-8"></script>
```

### **옵션**

<table data-full-width="false"><thead><tr><th width="149">함수</th><th width="147">Option</th><th width="147">설명</th><th>기본값</th><th>필수</th><th>값</th></tr></thead><tbody><tr><td>mezzoAdApp</td><td>targetId</td><td>광고 노출영역 ID</td><td> </td><td>Y</td><td>광고가 노출될 영역 ID</td></tr><tr><td>mezzoAdApp</td><td>elementMode</td><td>광고 영상을 삽입하는 영역에 대한 옵션</td><td>INJECTION</td><td>Y</td><td>INJECTION : video 영역(video tag)에 광고를 삽입하는 모드<br>OVERLAY : video 영역이 아닌 영역에 광고를 삽입하는 경우</td></tr><tr><td>mezzoAdApp</td><td>publisher</td><td>발급 받으신 퍼블리셔 코드(Publisher_Code)를 입력</td><td>null</td><td>Y</td><td>발급 받으신 Publisher Code</td></tr><tr><td>mezzoAdApp</td><td>media</td><td>발급 받으신 미디어 코드(Media_Code)를 입력</td><td>null</td><td>Y</td><td>발급 받으신 Media Code</td></tr><tr><td>mezzoAdApp</td><td>section</td><td>발급 받으신 섹션 코드(Section_Code)를 입력</td><td>null</td><td>Y</td><td>발급 받으신 Section Code</td></tr><tr><td>mezzoAdApp</td><td>uAgeLevel</td><td>User 나이 레벨</td><td>null</td><td>N</td><td>0: 만 13세 이하<br>1: 만 13세 이상</td></tr><tr><td>mezzoAdApp</td><td>keyword</td><td>키워드 값 전달</td><td>null</td><td>N</td><td>키워드값을 전달<br>구분자는 ^로 사용<br>구분자를 포함한 전체 문자열 인코딩(encodeURIComponent)</td></tr><tr><td>mezzoAdApp</td><td>autoPlay</td><td>광고 영상을 자동으로 재생</td><td>true</td><td> </td><td>true : 자동으로 재생<br>false : 재생 버튼을 누른 후 재생</td></tr><tr><td>mezzoAdApp</td><td>autoReplay</td><td>광고 영상이 종료된 후 자동으로 다시 재생</td><td>false</td><td> </td><td>true : 종료 후 다시 재생<br>false : 광고 영상 종료</td></tr><tr><td>mezzoAdApp</td><td>clickFullArea</td><td>광고를 클릭하여 광고 상세 정보 페이지로 랜딩되는 영역을 설정</td><td>false</td><td> </td><td>true : 영상 전체 영역에서 클릭 가능<br>false : 광고 정보 더보기 버튼만 클릭 가능</td></tr><tr><td>mezzoAdApp</td><td>muted</td><td>광고 영상을 음소거 상태로 재생</td><td>null<br>(미지정 시 true)</td><td> </td><td>true : Mute 상태로 재생<br>false : Unmute 상태로 재생</td></tr><tr><td>mezzoAdApp</td><td>viewability</td><td>페이지 스크롤시 광고영역이 20% 이하로 보이면 광고 영상 정지</td><td>null<br>(미지정 시 true)</td><td> </td><td>true : 스크롤시 광고영상 정지<br>false : 스크롤시 광고영상 계속 재생</td></tr><tr><td>mezzoAdApp</td><td>soundBtn</td><td>사운드를 제어할 수 있는 버튼</td><td>null<br>(미지정 시 true)</td><td> </td><td>true : 사운드 버튼 보여줌<br>false : 사운드 버튼 보이지 않음</td></tr><tr><td>mezzoAdApp</td><td>clickBtn</td><td>광고 정보 더보기 버튼</td><td>true</td><td> </td><td>true : 광고정보 더보기 버튼 보여줌<br>false : 광고정보 더보기 버튼 보이지 않음</td></tr><tr><td>mezzoAdApp</td><td>skipBtn</td><td>광고 건너뛰기 버튼</td><td>true</td><td> </td><td>true : 스킵 버튼 보여줌<br>false : 스킵 버튼 보이지 않음</td></tr><tr><td>mezzoAdApp</td><td>closeBtn</td><td>닫기 버튼으로 광고영역을 지움</td><td>false</td><td> </td><td>true : 닫기 버튼 보여줌<br>false : 닫기 버튼 보이지 않음</td></tr><tr><td>mezzoAdApp</td><td>postClick</td><td>광고 클릭 이후 발생되는 이벤트</td><td>2</td><td> </td><td>0 : 광고 일시 정지<br>1 : 광고 계속 재생<br>2 : 광고 일시 정지 후 포커싱되면 자동 재생<br>3: 광고 끝내기</td></tr><tr><td>mezzoAdApp</td><td>setArea</td><td>광고소재 높이에 따라 자동으로 채우기</td><td>false</td><td> </td><td>OVERLAY 모드 전용이며 INJECTION 모드에서는 false로 지정</td></tr><tr><td>mezzoAdApp</td><td>adid</td><td>ADID</td><td> </td><td>Y</td><td>단말기 ADID/IDFA 전달<br>예)<br>Android :<br>158d87c5-add4-4646-b366-f39b5950dde1<br>iOS :<br>4A80248C-1BFC-4C9C-A643-B3B389043A20</td></tr><tr><td>mezzoAdApp</td><td>appId</td><td>앱 ID</td><td> </td><td>Y</td><td>예)<br>Android : com.mezzomedia.app<br>iOS: id1234</td></tr><tr><td>mezzoAdApp</td><td>appVersion</td><td>앱 버전</td><td> </td><td>Y</td><td>예) 1.0.0</td></tr><tr><td>mezzoAdApp</td><td>appName</td><td>앱 명칭</td><td> </td><td>Y</td><td>예) mezzomediaapp</td></tr><tr><td>mezzoAdApp</td><td>appStoreUrl</td><td>앱 스토어 URL</td><td> </td><td>Y</td><td>예)<br>Android: https://play.google.com/…<br>iOS: https://apps.apple.com/…</td></tr><tr><td>mezzoAdApp</td><td>manufacturer</td><td>제조사</td><td> </td><td>N</td><td> </td></tr><tr><td>mezzoAdApp</td><td>model</td><td>단말기 모델명</td><td> </td><td>N</td><td> </td></tr><tr><td>mezzoAdApp</td><td>networkType</td><td>네트워크 타입</td><td> </td><td>N</td><td><a href="#code"><code>코드참조</code></a></td></tr><tr><td>mezzoAdApp</td><td>mcc</td><td>모바일 국가 코드</td><td> </td><td>N</td><td> </td></tr><tr><td>mezzoAdApp</td><td>mnc</td><td>모바일 네트워크 코드</td><td> </td><td>N</td><td> </td></tr><tr><td>mezzoAdApp</td><td>carrier</td><td>통신사 명</td><td> </td><td>N</td><td> </td></tr><tr><td>mezzoAdApp</td><td>language</td><td>단말기 언어</td><td> </td><td>N</td><td><a href="https://ko.wikipedia.org/wiki/ISO_639-1_%EC%BD%94%EB%93%9C_%EB%AA%A9%EB%A1%9D">ISO 639-1</a> 형식의 두자리 언어코드</td></tr><tr><td>mezzoAdApp</td><td>country</td><td>국가 코드</td><td> </td><td>N</td><td><a href="https://ko.wikipedia.org/wiki/ISO_3166-1_alpha-3">ISO 3166-1 alpha-3</a> 형식의 세자리 국가코드</td></tr><tr><td>mezzoAdApp</td><td>skadn</td><td>SKAdNetwork 코드</td><td> </td><td>N<br>(iOS : Y)</td><td>코드가 여러개일시 구분자 ^로 사용<br>예) feyaarzu9v.skadnetwork^…^…</td></tr></tbody></table>

### **샘플코드**

{% code lineNumbers="true" %}

```html
<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="https://advimg.ad-mapps.com/sdk/js/ver/3.0.0/ad_script.min.js" charset="utf-8"></script>
    </head>
    <body>
        <div id="movie_overlay"></div>

        <video id="movie_injection"></video>

        <script type="text/javascript" charset="utf-8">
            mezzoAdApp({
                targetId: 'movie_injection',
                elementMode: 'INJECTION',                
                publisher: 'publisher_code',
                media: 'media_code',
                section: 'section_code',
                uAgeLevel: '1',
                keyword: '',
                autoPlay: true,
                autoReplay: false,
                clickFullArea: false,
                clickBtn: true,
                viewability: true,
                muted: true,                    
                soundBtn: true,
                skipBtn: true,
                closeBtn: false,       
                setArea: false,
                postClick: 2,
                adid: '',
                appId: 'com.mezzomedia.app',
                appVersion: '1.0.0',
                appName: 'mezzomediaapp',
                appStoreUrl: '',
                manufacturer: '',
                model: '',
                networkType: '',
                mcc: '',
                mnc: '',
                carrier: '',
                language: 'ko',
                country: 'KOR',
                skadn: '',
                callbacks: {
                    success: function (type, status, data) {
                        console.log(
                            '[SUCCESS] type : ' + type + ' status : ' + status + ' data : ' + JSON.stringify(data)
                        );
                    },
                    fail: function (type, status, data) {
                        console.log(
                            '[FAIL] type : ' + type + ' status : ' + status + ' data : ' + JSON.stringify(data)
                        );
                    },
                    event: function (type, status, data) {
                        console.log(
                            '[EVENT] type : ' + type + ' status : ' + status + ' data : ' + JSON.stringify(data)
                        );
                    }          
                }
            });
        </script>
    </body>
</html>    
```

{% endcode %}

### 화면 구성 <a href="#screen" id="screen"></a>

{% hint style="info" %}
INJECTION 모드와 OVERLAY 모드시 Target 영역이 다릅니다.
{% endhint %}

* INJECTION 모드 : 아래 그림의 1번 위치(video tag 영역)에 광고 영상이 로드\
  현재 1번에 로드된 영상은 video tag에서 광고영상이 종료된 후 재생될 본영상
* OVERLAY 모드 : 아래 그림의 2번 위치(별도의 영역)에 광고 영상이 로드

<figure><img src="/files/lzQy6UB8qtPA26azYOWZ" alt=""><figcaption></figcaption></figure>

#### Callback 정의 <a href="#callback" id="callback"></a>

<table><thead><tr><th>Callback</th><th>type</th><th width="116">status</th><th>설명</th></tr></thead><tbody><tr><td>success</td><td>guarantee</td><td>200</td><td>광고 성공(보장형)</td></tr><tr><td>success</td><td>house</td><td>200</td><td>광고 성공(하우스)</td></tr><tr><td>fail</td><td>noad</td><td>404</td><td>광고없음</td></tr><tr><td>fail</td><td>error</td><td>408</td><td>요청 Timeout</td></tr><tr><td>fail</td><td>error</td><td>415</td><td>Ajax Parsing 에러</td></tr><tr><td>fail</td><td>error</td><td>498</td><td>중복 호출 에러</td></tr><tr><td>fail</td><td>error</td><td>499</td><td>에러</td></tr><tr><td>fail</td><td>error</td><td>501</td><td>지원하지 않는 브라우저</td></tr><tr><td>fail</td><td>error</td><td>502</td><td>지원하지 않는 단말기 (iOS)</td></tr><tr><td>fail</td><td>error</td><td>503</td><td>지원하지 않는 단말기 (Android)</td></tr><tr><td>event</td><td>adclick</td><td>200</td><td>광고 클릭</td></tr><tr><td>event</td><td>close</td><td>200</td><td>닫기 버튼 클릭</td></tr><tr><td>event</td><td>skip</td><td>200</td><td>SKIP 버튼 클릭</td></tr><tr><td>event</td><td>start</td><td>200</td><td>영상 시작</td></tr><tr><td>event</td><td>imp</td><td>200</td><td>영상 노출</td></tr><tr><td>event</td><td>firstQ</td><td>200</td><td>영상 1/4 재생</td></tr><tr><td>event</td><td>midQ</td><td>200</td><td>영상 2/4 재생</td></tr><tr><td>event</td><td>thirdQ</td><td>200</td><td>영상 3/4 재생</td></tr><tr><td>event</td><td>complete</td><td>200</td><td>영상 종료</td></tr><tr><td>event</td><td>objhide</td><td>200</td><td>INJECTION 방식일 때, 매체 video tag 숨김</td></tr><tr><td>event</td><td>objshow</td><td>200</td><td>INJECTION 방식일 때, 매체 video tag 보여줌</td></tr><tr><td>event</td><td>ended</td><td>200</td><td>광고 종료 ( 광고 후 원본 영상 재생 등 추가 작업시 해당 type 을 이용하여 처리 )</td></tr><tr><td>event</td><td>endcard_start</td><td>200</td><td>엔드카드 시작</td></tr><tr><td>event</td><td>endcard_imp</td><td>200</td><td>엔드카드 노출</td></tr><tr><td>event</td><td>endcard_click</td><td>200</td><td>엔드카드 클릭</td></tr><tr><td>event</td><td>endcard_close</td><td>200</td><td>엔드카드 닫기 버튼 클릭</td></tr></tbody></table>

### 정책 <a href="#policy" id="policy"></a>

{% hint style="info" %}
브라우져 정책에 따라 강제로 제어될 수 있습니다.
{% endhint %}

* Autoplay Policy
  * Google Chrome 또는 Safari(version 11 이상)의 경우, User의 Action이 없는 자동 재생(Autoplay)을 제한하고 있습니다.
  * Mute를 설정하시지 않고, 자동 재생(Autoplay)을 하실 경우, 아래의 브라우져 정책에 따라 광고 영상을 재생하지 못하는 경우가 발생할 수 있습니다.
  * 이때, TARGETPICK VIDEO 스크립트에서는 사운드를 Mute한 상태로 재생을 다시 시도합니다.
  * 따라서, 브라우져 정책에 따라 사운드가 Mute된 상태의 광고가 보여질 수 있습니다.
  * c.f ) <https://developers.google.com/web/updates/2017/09/autoplay-policy-changes>
  * c.f ) <https://blog.google/products/chrome/improving-autoplay-chrome/>
* 삼성브라우져
  * 삼성브라우저(4.4.2 이하)에서 일부 기능이 동작하지 않을 수 있습니다.

{% embed url="<https://docs.meba.kr/s-plus/sample_v300/video>" %}

### 코드 정의 <a href="#code" id="code"></a>

<table><thead><tr><th width="354">Code</th><th width="234">Android</th><th>iOS</th></tr></thead><tbody><tr><td>Unknown</td><td>0</td><td>0</td></tr><tr><td>Internet</td><td>1</td><td>1</td></tr><tr><td>WIFI</td><td>2</td><td>2</td></tr><tr><td>Cellular Network - 2G</td><td>4, 7, 11</td><td>4</td></tr><tr><td>Cellular Network - 3G</td><td>3, 5, 6, 8, 9, 10, 12, 14, 15</td><td>5</td></tr><tr><td>Cellular Network - 4G</td><td>13</td><td>6</td></tr><tr><td>Cellular Network - 5G</td><td>20</td><td>7</td></tr><tr><td>Cellular Network - Unknown Generation</td><td>0</td><td>3</td></tr></tbody></table>

#### 문의 <a href="#inquire" id="inquire"></a>

| 구분              | 부서        | 이름    | 이메일                     | 전화번호         |
| --------------- | --------- | ----- | ----------------------- | ------------ |
| 제휴 문의           | 크로스미디어사업팀 | 김정혁 님 | <jeonghyeok.kim@cj.net> | 02-6484-3856 |
| ID발급 및 광고 세팅 문의 | 크로스미디어사업팀 | 김미현 님 | <mihyun.kim2@cj.net>    | 02-6484-3076 |


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.targetpick.io/java-script-hybrid/video.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.