Video Javascript Guide
The current version is 107b.
Video Script guide is mainly composed of an example code for basic video advertising.
Please consider the UI to suit the design characteristics of your media.
Operating environment for script
Adding jQuery
The Signal-Play ad script works in a JQuery setting environment.
If the page where you want to apply the ad does not have a JQuery script, insert the tag below.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<meta content="IE=edge" http-equiv="X-UA-Compatible"/>
<meta content="width=device-width, initial-scale=1" name="viewport">
<!--3.x snippet-->
<!--<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>-->
<!--2.x snippet-->
<!--<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>-->
<!-- 1.x snippet --><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"> </script>
<!--Mezzomedia javascript for AD movie-->
<script src="https://advimg.ad-mapps.com/sdk/M_PLUS/JS/107b/ad_movie_script_107b_pack.js" type="text/javascript"></script>
<title>VIDEO v.107b TEST</title>
</head>
<body>
<div class="container">
<div id="movie_area" style="position: relative; text-align: center; width: 100%; overflow: hidden; z-index: 800;">
<div>
<!-- 1. video ad area(in INJECTION mode) -->
<video id="video_area" src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" style="display: block; position: absolute; text-align: center; width: 100%; height: 100%;"></video>
</div>
</div>
<!-- 1. video ad area start(in OVERLAY mode) -->
<div id="mezzo_ad" style="position: relative; text-align: center; overflow: hidden; z-index: 800; width: 100%; border: 1px solid #000;"></div>
<!-- video ad area end -->
</div>
<script charset='utf-8' type="text/javascript">
videoStart();
function videoStart() {
var mezzo = window.mezzo;
var screenMode = 'INJECTION';
// 2-1. Video mode
// INJECTION : 'video_area' / OVERLAY : 'mezzo_ad'
var targetId = "video_area"; // 2-2. Video tag id
var codes = {
"mPublisher": 100, // 3-1. Publisher code
"mMedia": 200, // 3-2. Media code
"mSection": 802998 // 3-3. Section code
};
// 4. Video Option
var option_for_video = {
template_url: "https://advimg.ad-mapps.com/sdk/template/layer/mezzo_layer.html", // Template Path
auto_play: true,
auto_replay: false,
click_full_area: true,
muted: true,
viewability: true,
post_click: "1",
sound_btn: {
show: true,
images: ["https://advimg.ad-mapps.com/sdk/M_PLUS/Image/script/movie/on.png", "https://advimg.ad-mapps.com/sdk/M_PLUS/Image/script/movie/mute.png"] // Sound Image Path, Mute Image Path
},
click_btn: {
show: true
},
skip_btn: {
show: true
},
close_btn: {
show: false,
images: ["https://advimg.ad-mapps.com/sdk/M_PLUS/Image/script/movie/close.png"] // Close Button Image Path
},
poster: {
images: ["https://advimg.ad-mapps.com/sdk/M_PLUS/Image/script/movie/poster_white.png"] // Poster Image Path
}
};
// INJECTION, OVERLAY
mezzo.setView(screenMode, targetId, mezzo.r_large, option_for_video);
mezzo.request(codes, {
done: function (status) {
console.log("****** AD has been done. : " + status);
},
start: function (status) {
console.log("****** AD has been started. : " + status);
},
imp: function (status) {
console.log("****** AD impression has occurred. : " + status);
},
firstQ: function (status) {
console.log("****** AD video was played 1/4. : " + status);
},
midQ: function (status) {
console.log("****** AD video was played 1/2. : " + status);
},
thirdQ: function (status) {
console.log("****** AD video was played 3/4. : " + status);
},
skip: function (status) {
console.log("****** AD has been skipped. : " + status);
},
adclick: function (status) {
console.log("****** AD has been clicked. : " + status);
},
etc: function (status) {
console.log("****** AD has been done with etc reason. : " + status);
},
noad: function (status) {
console.log("****** There is no ad to delivery. : " + status);
},
objhide: function (status) {
console.log("****** AD has been injected. : " + status);
},
objshow: function (status) {
console.log("****** Injected AD has been removed. : " + status);
},
error: function (status) {
console.log("****** AD has been done with error. : " + status);
},
back: function (status) {
console.log("****** You called back. : " + status);
},
close: function (status) {
console.log("****** AD has been closed. : " + status);
}
});
}
</script>
</body>
</html>
Adding script
Add ad script for running Signal-Play video ad.
(Use the code below to conveniently perform an internal update.)
<script type="text/javascript" src="http://advimg.ad-mapps.com/sdk/M_PLUS/JS/107b/ad_movie_script_107b_pack.js"></script>
Set ad options
Option
Option | Key | Definition | Default | Required | Value |
---|---|---|---|---|---|
screenMode | Options for the ad inserted area | INJECTION | Y | INJECTION : Mode to insert advertisements in video tag OVERLAY : In case of inserting an ad in an area other than the video area |
|
mPublisher | Enter the publisher code issued by SIGNAL-PLAY | null | Y | The publisher code issued by SIGNAL-PLAY | |
mMedia | Enter the Media code issued by SIGNAL-PLAY | null | Y | The media code issued by SIGNAL-PLAY | |
mSection | Enter the Section code issued by SIGNAL-PLAY | null | Y | The section code issued by SIGNAL-PLAY | |
template_url | Templates in the Layer area (buttons and images) of Mezzomedia | Can be changed (default - set to the Mezzomedia path) Please refer to the path Image path |
|||
auto_play | Automatically ad play | true | true : auto play false : play after pressing play button |
||
auto_replay | Automatically replay after end of ad playing | false | true : Play again after ad completion false : End ad |
||
click_full_area | Set click area to land on ad details page | true | true : can be clicked in the entire ad area false : can be clicked only click button area |
||
muted | Play ad with muted | null (If not specified, set to be ‘true’) |
true : muted play false : Unmuted play |
||
viewability | Stop the video if the ad area appears to be less than 20% when scrolling through the page | null (true when not specified) |
true : stop the video when scrolling false : not stop the video when scrolling |
||
sound_btn | show | Button to control sound | null (If not specified, set to be ‘true’) |
true : show sound button false : hide sound button |
|
images | Sound, muted button image | Can be changed (default - set to the Mezzomedia path) Please refer to the path Image path |
|||
click_btn | show | Ad click button | true | true : show click button false : hide click button |
|
skip_btn | show | Ad skip button | true | true : show skip button false : hide skip button |
|
close_btn | show | Close button clears ad area | false | true : show close button false : hide close button |
|
images | Close button image | Can be changed (default - set to the Mezzomedia path) Please refer to the path Image path |
|||
poster | images | Displayed image when preparing ad | Can be changed (default - set to the Mezzomedia path) Please refer to the path Image path |
||
mezzo.r_large | Specify Resolution | 1024 | Enter in numerical form from 480 to 1024 If entered less than 480, adjust to 800px |
||
post_click | Events after the ad clicks | 1 | 0 : Pause ads | ||
1 : Continue to play ads | |||||
2 : Auto play when focusing after ad pause | |||||
3 : End ads |
Image path
Image | Path |
---|---|
template_url | http://advimg.ad-mapps.com/sdk/template/layer/mezzo_layer.html |
sound image | http://advimg.ad-mapps.com/sdk/M_PLUS/Image/script/movie/on.png |
muted imgae | http://advimg.ad-mapps.com/sdk/M_PLUS/Image/script/movie/mute.png |
close image | http://advimg.ad-mapps.com/sdk/M_PLUS/Image/script/movie/close.png |
poster image | http://advimg.ad-mapps.com/sdk/M_PLUS/Image/script/movie/poster_white.png |
The size of the image is automatically resized to match the Video Tag area.
Configuring an ad page
Source code sample
<!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--3.x snippet-->
<!--<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>-->
<!--2.x snippet-->
<!--<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>-->
<!-- 1.x snippet -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!--Mezzomedia javascript for AD movie-->
<script type="text/javascript" src="https://advimg.ad-mapps.com/sdk/M_PLUS/JS/107b/ad_movie_script_107b_pack.js"></script>
<!-- Bootstrap core CSS -->
<link rel="shortcut icon" href="https://advimg.ad-mapps.com/mezzo.ico">
<title>VIDEO v.107b TEST</title>
</head>
<body>
<div class="container">
<div id="movie_area">
<div>
<!-- 1. video ad area(in INJECTION mode) -->
<video id="video_area" src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4"></video>
</div>
</div>
<!-- 1. video ad area start(in OVERLAY mode) -->
<div id="mezzo_ad"></div>
<!-- video ad area end -->
</div>
<script type="text/javascript" charset='utf-8'>
videoStart();
function videoStart() {
var mezzo = window.mezzo;
var screenMode = 'INJECTION'; // 2-1. Video mode
//INJECTION : 'video_area' / OVERLAY : 'mezzo_ad'
var targetId = "video_area"; // 2-2. Video tag id
var codes = {
"mPublisher": 100, // 3-1. Publisher code
"mMedia": 200, // 3-2. Media code
"mSection": 802998 // 3-3. Section code
};
// 4. Video Option
var option_for_video = {
template_url: "https://advimg.ad-mapps.com/sdk/template/layer/mezzo_layer.html", // Template Path
auto_play: true,
auto_replay: false,
click_full_area: true,
click_to_disappear: false,
muted: true,
viewability: true,
pause_btn: false,
sound_btn: {
show: true,
images: ["https://advimg.ad-mapps.com/sdk/M_PLUS/Image/script/movie/on.png", "https://advimg.ad-mapps.com/sdk/M_PLUS/Image/script/movie/mute.png"] // Sound Image Path, Mute Image Path
},
click_btn: {
show: true
},
skip_btn: {
show: true
},
close_btn: {
show: false,
images: ["https://advimg.ad-mapps.com/sdk/M_PLUS/Image/script/movie/close.png"] // Close Button Image Path
},
poster: {
images: ["https://advimg.ad-mapps.com/sdk/M_PLUS/Image/script/movie/poster_white.png"] // Poster Image Path
}
};
// INJECTION, OVERLAY
mezzo.setView(screenMode, targetId, mezzo.r_large, option_for_video);
mezzo.request (codes,
{
done: function(status) {
console.log("****** AD has been done. : " + status);
},
start: function(status) {
console.log("****** AD has been started. : " + status);
},
imp: function(status) {
console.log("****** AD impression has occurred. : " + status);
},
firstQ: function(status) {
console.log("****** AD video was played 1/4. : " + status);
},
midQ: function(status) {
console.log("****** AD video was played 1/2. : " + status);
},
thirdQ: function(status) {
console.log("****** AD video was played 3/4. : " + status);
},
skip: function(status) {
console.log("****** AD has been skipped. : " + status);
},
adclick: function(status) {
console.log("****** AD has been clicked. : " + status);
},
etc: function (status) {
console.log("****** AD has been done with etc reason. : " + status);
},
noad: function (status) {
console.log("****** There is no ad to delivery. : " + status);
},
objhide: function (status) {
console.log("****** AD has been injected. : " + status);
},
objshow: function (status) {
console.log("****** Injected AD has been removed. : " + status);
},
error: function (status) {
console.log("****** AD has been done with error. : " + status);
},
back: function (status) {
console.log("****** You called back. : " + status);
},
close: function (status) {
console.log("****** AD has been closed. : " + status);
}
}
);
}
</script>
</body>
</html>
Source code description
- Insert a video tag where you want to expose the ad.
- Declares and creates an ad object.
- Set the mode of the video ad (INJECTION or OVERLAY)
- Specify the Video Tag ID where the ad is exposed.
- Make default settings to run ads.
- Change the issued Publisher_Code setting.
- Change the media code (media_code) issued.
- Change the section code (Section_Code) issued.
- You can change the advertising options described in 2-2.
Screen mode description
Target areas are different for INJECTION mode and OVERLAY mode.
- INJECTION mode : screen shot ① - Placing video ad before playing video content. In other words, pre-roll ad.
The thumbnail of example screenshot ① is about the content which will be played after viewing video ad. - OVERLAY mode : screen shot ② - Load video ad into separate areas
Callback description
Callback | Message | Description |
---|---|---|
done | AD request has done. | success (AD completion normally) |
start | AD has been started. | AD start |
imp | AD impression has occurred. | AD impression |
firstQ | AD video was played 1/4. | AD is played 25% |
midQ | AD video was played 1/2. | AD is played 50% |
thirdQ | AD video was played 3/4. | AD is played 75% |
skip | AD request has skipped. | AD skip |
adclick | AD has been clicked. | AD click |
etc | AD request has done with etc reason. | Network disconnects, application errors, etc. |
noad | There is no ad to delivery. | callback when there is no more commercial ad |
objhide | AD has been injected. | callback when there is no more commercial ad |
objshow | Injected AD has been removed. | Show media video tag when INJECTION mode |
error | AD request has done with error. | AD server error |
close | AD has been closed. | AD close |
Policy
It can be controlled by a browser policy.
- Autoplay Policy
- Google Chrome or Safari (version 11 or later) limit autoplay with no user action.
- In case of auto play without setting Mute, advertising may not be played if a browser policy does not allow the situation.
- At this point, the SIGNAL PLAY script attempts to re-play the video with the sound muted.
- Therefore, depending on your browser policy, ads in the Mute state may.
- c.f ) https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
- c.f ) https://blog.google/products/chrome/improving-autoplay-chrome/
- Samsung browser
- Some functions may not work in the Samsung Browser (below 4.4.2).
Example
Test
Mode
Autoplay
Mute
Replay
Click Area
Viewability
Sound button
Click button
Skip button
Close button
Post click
These settings are automatically saved when you run the ad.