Video Javascript Guide

5 minute read

Minah Kim

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

  1. Insert a video tag where you want to expose the ad.
  2. Declares and creates an ad object.
    1. Set the mode of the video ad (INJECTION or OVERLAY)
    2. Specify the Video Tag ID where the ad is exposed.
  3. Make default settings to run ads.
    1. Change the issued Publisher_Code setting.
    2. Change the media code (media_code) issued.
    3. Change the section code (Section_Code) issued.
  4. 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

    Updated: