JW Player for Flash and HTML5
|
|
|
- Asher Greer
- 9 years ago
- Views:
Transcription
1 JW Player for Flash and HTML5 Release 5.3 Embedding Guide December 20, 2010
2
3 CONTENTS 1 Embedding the player Upload SWFObject Embedding Without JavaScript JW Embedder Player API Getting started Selecting Variables Functions Events Chaining i
4 ii
5 CHAPTER ONE EMBEDDING THE PLAYER Like every other Flash object, the JW Player has to be embedded into the HTML of a webpage using specific embed codes. Overall, there are three methods for embedding the JW Player: Using a generic JavaScript embedder (like SWFObject). Using a HTML tag (like <object> or <embed>). Using the JW Embedder, the JW Player s own JavaScript embedder (jwplayer.js). For embedding the JW Player for Flash, we recommend using SWFObject, since it works in all browsers and many examples exist on the web to get you up and running quickly. If you want the new HTML5 features of the JW Player, or if you want to leverage the new and improved JavaScript API, you ll want to use the JW Embedder. Detailed instructions can be found below. 1.1 Upload First, a primer on uploading. This may sound obvious, but for the JW Player to work on your website, you must upload the player.swf file onto your webserver. If you want to play YouTube videos, you must also upload the yt.swf file - this is the bridge between the player and YouTube. Finally, to use the JW Embedder and HTML5 player, upload jwplayer.js. Note: We recommend putting everything in a folder called jwplayer at the root of your site. This enables the Quick Embed method of setting up the player. The file structure should look like this: [Web Root]/jwplayer/player.swf [Web Root]/jwplayer/jwplayer.js [Web Root]/jwplayer/yt.swf 1.2 SWFObject There s a wide array of good, open source libraries available for embedding Flash. SWFObject is the most widely used one. It has excellent documentation. Before embedding any players on the page, make sure to include the swfobject.js script in the <head> of your HTML. You can download the script and host it yourself, or leverage the copy provided by Google: <script type="text/javascript" src=" 1
6 With the library set up, you can start embedding players. Here s an example: <p id="container1">please install the Flash Plugin</p> var flashvars = { file: /data/bbb.mp4,autostart: true }; var params = { allowfullscreen: true, allowscriptaccess: always }; var attributes = { id: player1, name: player1 }; swfobject.embedswf( player.swf, container1, 480, 270, , false, flashvars, params, attributes); It s a fairly sizeable chunk of code that contains the embed container, flashvars, params, attributes and instantiation. Let s walk through them one by one: The container is the HTML element where the player will be placed into. It should be a block-level element, like a <p> or <div>. If a user has a sufficient version of Flash, the text inside the container is removed and replaced by the videoplayer. Otherwise, the contents of the container will remain visible. The flashvars object lists your player Configuration Options. One option that should always be there is file, which points to the file to play. You can insert as many options as you want. The params object includes the Flash plugin parameters. The two parameters in the example (our recommendation) enable both the fullscreen and JavaScript functionality of Flash. The attributes object include the HTML attributes of the player. We recommend always (and only) setting an id and name, to the same value. This will be the id of the player instance if you use its Player API. The instantiation is where all things come together and the actual player embedding takes place. These are all parameters of the SWFObject call: The URL of the player.swf, relative to the page URL. The ID of the container you want to embed the player into. The width of the player, in pixels. Note the JW Player automatically stretches itself to fit. The height of the player, in pixels. Note the JW Player automatically stretches itself to fit. The required version of Flash. We highly recommend setting This is the first version that supports MP4 and is currently installed at >95% of all computers. The only feature for which you might restricted to is RTMP dynamic streaming. The location of a Flash auto-upgrade script. We recommend to not use it. People that do not have Flash either do not want or are not able (no admin rights) to upgrade. Next, the flashvars, params and attributes are passed, in that order. It is no problem to embed multiple players on a page. However, make sure to give each player instance a different container id and a different attributess id and name. 1.3 Embedding Without JavaScript In cases where a JavaScript embed method is not possible (e.g. if your CMS does not allow including JavaScripts), the player can be embedded using plain HTML. There are various combinations of tags for embedding Flash on a webpage: A single <embed> tag (for IE + other browsers). An <object> tag with nested <embed> tag (the first one for IE, the second for other browsers). 2 Chapter 1. Embedding the player
7 An <object> tag with nested <object> tag (the first one for IE, the second for other browsers). We recommend using the <object> tag with a nested <embed> tag. This works in the widest array of browsers, including older browsers such as Netscape. Here is an example embed code that does exactly the same as the SWFObject example above: <object classid="clsid:d27cdb6e-ae6d-11cf-96b " width="480" height="270" id="player1" na <param name="movie" value="/jwplayer/player.swf"> <param name="allowfullscreen" value="true"> <param name="allowscriptaccess" value="always"> <param name="flashvars" value="file=/data/bbb.mp4&autostart=true"> <embed id="player1" name="player1" src="/jwplayer/player.swf" width="480" height="270" allowscriptaccess="always" allowfullscreen="true" flashvars="file=/data/bbb.mp4&autostart=true" /> </object> As you can see, most of the data of the SWFObject embed is also in here: The container is now the id of both the object embed tags. The fallback text cannot be used anymore. The flashvars are merged into a single string, and loaded as an attribute in each of the tags. You should always concatenate the flashvars using so-called querystring parameter encoding: flashvar1=value1&flashvar2=value2&... The params and attributes from SWFObject are individual attributes of the embed tag, and param tags inside of the object tag. The instantiation options (source, width, height) are attributes of the embed and object tags. Note: The Flash version reference is not in these tags: this is one of the drawbacks of this method: it s not possible to detect Flash and selectively hide it, e.g. if the flash version is not sufficient or if the device (ipad...) doesn t support Flash. For an interesting overview on the different embedding methods, this article compares several methods, and provides a historical overview of the subject. 1.4 JW Embedder New in version 5.3, the JW Player features its own embedding method. While the previous embed methods can still be used, the built-in embed method has a couple of useful features: Seamless failover between the Flash and HTML5 players. Automatic integration with the JavaScript API Getting started Embedding the JW Player in your website is a simple, 3-step process: 1. Upload the jwplayer.js, player.swf and yt.swf files from the download ZIP to your server. All other files in the download (documentation, source code, etc) are optional JW Embedder 3
8 2. Include the jwplayer.js somewhere in the head of your webpage: <script type="text/javascript" src="/jwplayer/jwplayer.js"> 3. Call the player setup somewhere in the body of your website. Here s a basic example: <div id="container">loading the player...</div> file: "/uploads/video.mp4", width: 480 When the page is loading, the JW Player is automatically instantiated on top of the <div>. By default, the player is rendered in Flash. If Flash is not supported (e.g. on an ipad), the player is rendered in HTML5. The flashplayer option (to tell the JavaScript where the SWF resides) is just one of many configuration options available for configuring the JW Player. Here s another setup example, this time using a <video> tag instead of a generic div: <video src="/uploads/video.mp4" height="270" id="container" poster="/uploads/image.jpg" width="480"> </video> flashplayer: "/jwplayer/player.swf" In this case, the JW Player is actually inspecting <video> tag and loading its attributes as configuration options. It s a useful shortcut for setting up a basic player. Quick Embed If you ve uploaded your player.swf and jwplayer.js files to a folder called jwplayer in the root of your website, you can embed the player by using two simple lines of HTML: <script type="text/javascript" src="/jwplayer/jwplayer.js"> <video class="jwplayer" src="/uploads/video.mp4" poster="/uploads/image.jpg"></video> That s it! As long as you have everything in the right place, all <video> tags on your page whose class is jwplayer will be replaced on your page by the JW Player. 4 Chapter 1. Embedding the player
9 1.4.2 Setup Syntax Let s take a closer look at the syntax of the setup() call. It has the following structure: jwplayer(container).setup({options In this block, the container is the DOM element(<video> or <div>, <p>, etc.) you want to load the JW Player into. If the element is a <video> tag, the attributes of that tag (e.g. the width and src) are loaded into the player. The options are the list of configuration options for the player. The configuration options guide contains the full overview. Here s an example with a bunch of options: <div id="container">loading the player...</video> autostart: true, controlbar: "none", file: "/uploads/video.mp4", duration: 57, volume: 80, width: 720 Though generally a flat list, there are a couple of options that can be inserted as structured blocks inside the setup method. Each of these blocks allow for quick but powerful setups: playlist: allows inline setup of a full playlist, including metadata. levels: allows inline setup of multiple quality levels of a video, for bitrate switching purposes. plugins: allows inline setup of JW Player plugins, including their configuration options. events: allows inline setup of JavaScripts for player events, e.g. when you want to do something when the player starts. players: allows inline setup of a custom player fallback, e.g. HTML5 first, fallback to Flash. The sections below explain them in detail Skins The JW Player has a wide variety of skins that can be used to modify the look and feel of the player. They can be downloaded from our AddOns Library. To embed a JW Player 5 skin, simply place the ZIP file on your web server and add the skin property to your embed code: <div id="container">loading the player...</div> file: "/uploads/video.mp4", width: 480, 1.4. JW Embedder 5
10 skin: "/skins/modieus/modieus.zip" Note: If you re configuring the Embedder to run primarily in HTML5 mode using the Players block, you ll need to take the additional step of unzipping the skin ZIP and uploading its contents to your web server in the same location as the ZIP file itself. Your skin s folder structure would look something like this: /skins/modieus/modieus.zip /skins/modieus/modieus.xml /skins/modieus/controlbar/ /skins/modieus/playlist/ etc Playlist Previously, loading a playlist in the JW Player was only available by using an XML playlist format like RSS or ATOM. With the JW Player embed method though, it is possible to load a full playlist into the player using the playlist object block. Here is an example. In it, a playlist of three items is loaded into the player. Each item contains a duration hint, the file location and the location of a poster image. <div id="container">loading the player...</div> playlist: [ { duration: 32, file: "/uploads/video.mp4", image: "/uploads/video.jpg" }, { duration: 124, file: "/uploads/bbb.mp4", image: "/uploads/bbb.jpg" }, { duration: 542, file: "/uploads/ed.mp4", image: "/uploads/ed.jpg" } ], "playlist.position": "right", "playlist.size": 360, width: 720 Note: The playlist.position and playlist.size options control the visible playlist inside the Flash player. To date, the HTML5 player doesn t support a visible playlist yet (though it can manage a playlist of videos). A playlist can contain 1 to many videos. For each entry, the following properties are supported: file: this one is required (unless you have levels, see below). Without a video to play, the playlist item is skipped. image: location of the poster image. Is displayed before the video starts, after it finishes, and as part of the graphical playlist. duration: duration of the video, in seconds. The player uses this to display the duration in the controlbar, and in the graphical playlist. start: starting point inside the video. When a user plays this entry, the video won t start at the beginning, but at the offset you present here. title: title of the video, is displayed in the graphical playlist. 6 Chapter 1. Embedding the player
11 description: description of the video, is displayed in the graphical playlist. streamer: streaming application to use for the video. This is only used for RTMP or HTTP streaming. provider: specific media playback API (e.g. http, rtmp or youtube) to use for playback of this playlist entry. levels: a nested object block, with multiple quality levels of the video. See the levels section for more info Levels The levels object block allows you to load multiple quality levels of a video into the player. The multiple levels are used by the Flash player (HTML5 not yet) for RTMP or HTTP bitrate switching. Bitrate switching is a mechanism where the player automatically shows the best possible video quality to each viewer. Here s an example setup, using RTMP bitrate switching (also called dynamic streaming). Note the additional streamer option, which tells the player the location of the RTMP server: <div id="container">loading the player...</div> width: 480, image: "/uploads/video.jpg", levels: [ { bitrate: 300, file: "assets/bbb_300k.mp4", width: 320 }, { bitrate: 600, file: "assets/bbb_600k.mp4", width: 480 }, { bitrate: 900, file: "assets/bbb_900k.mp4", width: 720 } ], provider: "rtmp", streamer: "rtmp://mycdn.com/application/" Here is another example setup, this time using HTTP bitrate switching. The HTTP switching is enabled by setting the provider option to http: <div id="container">loading the player...</div> width: 480, image: "/uploads/video.jpg", levels: [ { bitrate: 300, file: " width: 320 }, { bitrate: 600, file: " width: 480 }, { bitrate: 900, file: " width: 720 } ], provider: "http", "http.startparam":"starttime" 1.4. JW Embedder 7
12 1.4.6 Plugins Plugins can be used to stack functionality on top of the JW Player. A wide array of plugins is available in our library, for example for viral sharing, analytics or advertisements. Here is an example setup using both the HD plugin and the Google Analytics Pro plugin: <div id="container">loading the player...</div> file: "/uploads/video.mp4", plugins: { hd: { file: "/uploads/video_high.mp4", fullscreen: true }, gapro: { accountid: "UKsi93X940-24" } }, image: "/uploads/video.jpg", width: 480 Here is another example, using the sharing plugin. In this example, plugin parameters are also included in the playlist block: <div id="container">loading the player...</div> playlist: [ { file: "/uploads/bbb.mp4", "sharing.link": " }, { file: "/uploads/ed.mp4", "sharing.link": " } ], plugins: { sharing: { link: true } }, width: Events The events block allows you to respond on player events in JavaScript. It s a short, powerful way to add player - pager interactivity. Here is a swift example: <div id="container">loading the player...</div> file: "/uploads/video.mp4", width: 480, 8 Chapter 1. Embedding the player
13 events: { oncomplete: function() { alert("the video is finished!"); } } Here is another example, with two event handlers. Note the onready() handler autostarts the player using the this statement and the onvolume() handler is processing an event property: <div id="container">loading the player...</div> file: "/uploads/video.mp4", width: 480, events: { onready: function() { this.play(); }, onvolume: function(event) { alert("the new volume is "+event.volume); } } See the API reference for a full overview of all events and their properties Players The players option block can be used to customize the order in which the JW Player uses the different browser technologies for rendering the player. By default, the JW Player uses this order: 1. The Flash plugin. 2. The HTML5 <video> tag. Using the players block, it is possible to specify that the Embedder try the HTML5 player first: <div id="container">loading the player...</div> file: "/uploads/video.mp4", width: 480, players: [ { type: "html5" }, { type: "flash", src: "/jwplayer/player.swf" } ] Player Removal In addition to setting up a player, the JW Player embed script contains a function to unload a player. It s very simple: 1.4. JW Embedder 9
14 jwplayer("container").remove(); This formal remove() function will make sure the player stops its streams, the DOM is re-set to its original state and all event listeners are cleaned up Flash Window Mode (wmode) Configuration The JW Player embed script allows publishers to configure the window mode of Flash through the wmode configuration parameter. It may be set to any of the allowed values (window, opaque, or transparent). The default window mode used by the embed script is opaque as this provides the best performance. <div id="container">loading the player...</div> file: "/uploads/video.mp4", width: 480, wmode: "opaque" 10 Chapter 1. Embedding the player
15 CHAPTER TWO PLAYER API The 5.3 player introduces a new, shorthand javascript API for interacting with your website. This API abstracts any differences between Flash and HTML5; any code you write will work with both technologies. For versions 5.2 and below, the player used the 4.x JavaScript API. A reference for that API can be found on the player support site. 2.1 Getting started First, you ll need to upload the API library (jwplayer.js) to your web server. We recommend putting it, along with player.swf, in a folder called jwplayer in the root of your site. Once it s on your web server, add this bit of code to your HTML pages, in the <head> of your page: <head> </head> <script type="text/javascript" src="/jwplayer/jwplayer.js"> To get a sense of the possibilities of what you can do with the API, here s a quick example that showcases how to control the player from the page: <div id="container">loading the player...</div> file: "/uploads/video.mp4", width: 480 <ul> <li onclick="jwplayer().play()">start the player</li> <li onclick="alert(jwplayer().getposition())">get current position</li> </ul> Of course it s also possible to have the player manipulate the page. Here s a second example, using the event block of the JW Player embedder: <div id="container">loading the player...</div> 11
16 file: "/uploads/video.mp4", width: 480, events: { oncomplete: function() { document.getelementbyid("status").innerhtml = "That s all folks!"; } } <p id="status"></p> The following sections give a detailed description of the JW Player API, describing how to: Select a player. Get variables from a player. Call functions on a player. Listen to events from a player Embedding with SWFObject If you embed the player using SWFObject, rather than the built-in setup() function, you can still use the JavaScript API, although you ll need to wait for Flash to be loaded on the page before interacting with the API. SWFObject 2.2 includes a callback function (in this example, named flashloaded) which is executed when SWFObject has finished embedding Flash into the page. Make sure you wait until this function is called before making any calls to the API. Here s a simple example of using the SWFObject callback: var flashvars = { file:"/videos/video.mp4" }; var params = { allowfullscreen:"true", allowscriptaccess:"always" }; var attributes = { id:"player", name:"player" }; swfobject.embedswf("/jwplayer/player.swf", "container", 320, 240, " ", "false", flashvars, params, attributes, flashloaded); function flashloaded(e) { // e.ref is a reference to the Flash object. We ll pass it to jwplayer() so the API knows wh // Add event listeners jwplayer(e.ref).onready(function() { alert("player is ready"); jwplayer(e.ref).onplay(function() { alert("player is playing"); } // Interact with the player jwplayer(e.ref).play(); 12 Chapter 2. Player API
17 2.1.2 Embedding with an <object> or <embed> tag If you embed the player directly using an <object> or <embed> tag, simply pass your tag s id to the API when referencing the player: <embed id="player" name="player" src="/jwplayer/player.swf" width="320" height="240" allowscriptaccess="always" allowfullscreen="true" flashvars="file=/videos/video.mp4" /> jwplayer("player").onready(function() { alert("player is ready"); jwplayer("player").onplay(function() { alert("player is playing"); jwplayer("player").play(); 2.2 Selecting The first thing you need to do when attempting to interact with a JW Player, is to get a reference to it. The easiest way, probably sufficient for 95% of all use cases is this: // Start the player on this page jwplayer().play(); Only when you have multiple players on a page, you need to be more specific on which player you want to interact with. In that case, there are three ways to select a player: With the id of the element you instantiated the player over: jwplayer("container").play(); With the actual DOM element itself: var element = document.getelementbyid("container"); jwplayer(element).play(); With the index in the list of players on the page (in order of loading): jwplayer(2).play(); Note: The selector jwplayer(0) is actually the same as jwplayer(). 2.3 Variables Here is a list of all the variables that can be retrieved from the player: 2.2. Selecting 13
18 getbuffer() Returns the current PlaylistItem s filled buffer, as a percentage (0 to 100) of the total video s length. getfullscreen() Returns the player s current fullscreen state, as a boolean (true when fullscreen). getmeta() Returns the current PlaylistItem s metadata, as a javascript object. This object contains arbitrary key:value parameters, depending upon the type of player, media file and streaming provider that is used. Common metadata keys are width, duration or videoframerate. getmute() Returns the player s current audio muting state, as a boolean (true when there s no sound). getplaylist() Returns the player s entire playlist, as an array of PlaylistItem objects. Here s an example playlist, with three items: [ ] { duration: 32, file: "/uploads/video.mp4", image: "/uploads/video.jpg" }, { title: "cool video", file: "/uploads/bbb.mp4" }, { duration: 542, file: "/uploads/ed.mp4", start: 129 } getplaylistitem(*index*): Returns the playlist item at the specified index. If the index is not specified, the currently playing playlistitem is returned. The item that is returned is an object with key:value properties (e.g. file, duration and title). Example: { duration: 32, file: "/uploads/video.mp4", image: "/uploads/video.jpg" } getwidth() Returns the player s current width, in pixels. getheight() Returns the player s current height, in pixels. getstate() Returns the player s current playback state. It can have the following values: BUFFERING: user pressed play, but sufficient data has to be loaded first (no movement). PLAYING: the video is playing (movement). PAUSED: user paused the video (no movement). IDLE: either the user stopped the video or the video has ended (no movement). getposition() Returns the current playback position in seconds, as a number. getduration() Returns the currently playing PlaylistItem s duration in seconds, as a number. getvolume() Returns the current playback volume percentage, as a number (0 to 100). 2.4 Functions Here is a list of all functions that can be called on the player: 14 Chapter 2. Player API
19 setfullscreen(state) Change the player s fullscreen mode. Parameters: state:boolean (true): Set the player s fullscreen mode to fullscreen if true, and return to normal screen mode if false. setmute(state) Change the player s mute state (no sound). Parameters: state:boolean (true): Mute the player if true, and unmute if false. load(playlist) Loads a new playlist into the player. The playlist parameter is required and can take a number of forms: Array: If an array of PlaylistItem objects is passed, load an entire playlist into the player. Example: [ ] { duration: 32, file: "/uploads/video.mp4", image: "/uploads/video.jpg" }, { title: "cool video", file: "/uploads/bbb.mp4" }, { duration: 542, file: "/uploads/ed.mp4", start: 129 } Object: If a PlaylistItem is passed, load it as a single item into the player. Example: { duration: 32, file: "/uploads/video.mp4", image: "/uploads/video.jpg" }, String: Can be an XML playlist, or the link to a single media item (e.g. an MP4 video). playlistitem(index) Jumps to the playlist item at the specified index. Parameters: index:number: zero-based index into the playlist array (i.e. playlistitem(0) jumps to the first item in the playlist). playlistnext() Jumps to the next playlist item. If the current playlist item is the last one, the player jumps to the first. playlistprev() Jumps to the previous playlist item. If the current playlist item is the first one, the player jumps to the last. resize(width, height) Resizes the player to the specified dimensions. Parameters: width:number: the new overall width of the player. height:number: the new overall height of the player. Note: If a controlbar or playlist is displayed next to the video, the actual video is of course smaller than the overall player. play(state) Toggles playback of the player. Parameters: state:boolean (undefined): if set true the player will start playing. If set false the player will pause. If not set, the player will toggle playback. pause(state) Toggles playback of the player. Parameters: state:boolean (undefined): if set true the player will pause playback. If set false the player will play. If not set, the player will toggle playback Functions 15
20 stop() Stops the player and unloads the currently playing media file from memory. seek(position) Jump to the specified position within the currently playing item. Parameters: position:number: Requested position in seconds. setvolume(volume) Sets the player s audio volume. Parameters: volume:number: The new volume percentage; 0 and Events Here is a list of all events the player supports. In javascript, you can listen to events by assigning a function to it. Your function should take one argument (the event that is fired). Here is a code example, with some javascript that listens to changes in the volume: jwplayer("container").onvolume( function(event) { alert("the new volume is: "+event.volume); } ); Note that our official embed method contains a shortcut for assigning event listeners, directly in the embed code: <div id="container">loading the player...</div> file: "/uploads/video.mp4", width: 480, events: { onvolume: function(event) { alert("the new volume is: "+event.volume); } } And here s the full event list: onbufferchange(callback) Fired when the currently playing item loads additional data into its buffer. Event attributes: percent: Number: Percentage (between 0 and 100); number of seconds buffered / duration in seconds. onbufferfull(callback) Fired when the player s buffer has exceeded the player s bufferlength property (default: 1 second). No attributes. onerror(callback) Fired when an error has occurred in the player. Event attributes: message: String: The reason for the error. 16 Chapter 2. Player API
21 onfullscreen(callback) Fired when the player s fullscreen mode changes. Event attributes: fullscreen: boolean. New fullscreen state. onmeta(callback) Fired when new metadata has been discovered in the player. Event attributes: data: Object: dictionary object containing the new metadata. onmute(callback) Fired when the player has gone into or out of the mute state. Event attributes: mute: Boolean: New mute state. onplaylist(callback) Fired when a new playlist has been loaded into the player. Event attributes: playlist: Array: The new playlist; an array of PlaylistItem objects. onplaylistitem(callback) Fired when the player is playing a new media item. Event attributes: index Number: Zero-based index into the playlist array (e.g. 0 is the first item). onready(callback) Fired when the player has initialized and is ready for playback. No attributes. onresize(callback) Fired when the player s dimensions have changed (the player is resizing or switching fullscreen). Event attributes: width: Number: The new width of the player. height: Number: The new height of the player. onplay(callback) Fired when the player enters the PLAYING state. Event attributes: oldstate: String: the state the player moved from. Can be PAUSED or BUFFERING. onpause(callback) Fired when the player enters the PAUSED state. Event attributes: oldstate: String: the state the player moved from. Can be PLAYING or BUFFERING. onbuffer(callback) Fired when the player enters the BUFFERING state. Event attributes: oldstate: String: the state the player moved from. Can be PLAYING, PAUSED or IDLE. onidle(callback) Fired when the player enters the IDLE state. Event attributes: oldstate: String: the state the player moved from. Can be PLAYING, PAUSED or BUFFERING. oncomplete(callback) Fired when the player has finished playing the current media. No event attributes. ontime(callback) When the player is playing, fired as the playback position gets updated. This happens with a resolution of 0.1 second, so there s a lot of events! Event attributes: duration: Number: Duration of the current item in seconds. offset: Number: When playing streaming media, this value contains the last unbuffered seek offset Events 17
22 position: Number: Playback position in seconds. onvolume(callback) Fired when the player s volume changes. Event attributes: volume: Number: The new volume percentage (0 to 100). 2.6 Chaining Note that every API call to a JW Player in turn returns the player instance. This makes it possible to chain API calls (like with jquery): jwplayer().setvolume(50).oncomplete(function(){ alert("done!"); }).play(); 18 Chapter 2. Player API
JW Player Quick Start Guide
JW Player Quick Start Guide Getting Started Embedding the JW Player on your website is a simple, 3-step process: 1. Upload the jwplayer.js and player.swf files from the download ZIP to your server. All
PLAYER DEVELOPER GUIDE
PLAYER DEVELOPER GUIDE CONTENTS CREATING AND BRANDING A PLAYER IN BACKLOT 5 Player Platform and Browser Support 5 How Player Works 6 Setting up Players Using the Backlot API 6 Creating a Player Using the
HELIX MEDIA LIBRARY API DEVELOPER S GUIDE
HELIX MEDIA LIBRARY API DEVELOPER S GUIDE Helix Media Library Version 2.0 Revision Date: August 2015 1. Helix Media Library API 1.1 Overview The Helix Media Library (HML) API (Application Programming Interface)
MASTERTAG DEVELOPER GUIDE
MASTERTAG DEVELOPER GUIDE TABLE OF CONTENTS 1 Introduction... 4 1.1 What is the zanox MasterTag?... 4 1.2 What is the zanox page type?... 4 2 Create a MasterTag application in the zanox Application Store...
Instructions for creating a survey using Survey Gizmo
Instructions for creating a survey using Survey Gizmo December 19, 2011 Creating an account The web page is http://www.surveygizmo.com/ In order to create surveys you must create an account. If you are
Dashboard Skin Tutorial. For ETS2 HTML5 Mobile Dashboard v3.0.2
Dashboard Skin Tutorial For ETS2 HTML5 Mobile Dashboard v3.0.2 Dashboard engine overview Dashboard menu Skin file structure config.json Available telemetry properties dashboard.html dashboard.css Telemetry
Website Implementation
To host NetSuite s product demos on your company s website, please follow the instructions below. (Note that details on adding your company s contact information to the Contact Us button in the product
The purpose of jquery is to make it much easier to use JavaScript on your website.
jquery Introduction (Source:w3schools.com) The purpose of jquery is to make it much easier to use JavaScript on your website. What is jquery? jquery is a lightweight, "write less, do more", JavaScript
jquery Tutorial for Beginners: Nothing But the Goods
jquery Tutorial for Beginners: Nothing But the Goods Not too long ago I wrote an article for Six Revisions called Getting Started with jquery that covered some important things (concept-wise) that beginning
Sizmek Formats. IAB Mobile Pull. Build Guide
Sizmek Formats IAB Mobile Pull Build Guide Table of Contents Overview...3 Supported Platforms... 6 Demos/Downloads... 6 Known Issues... 6 Implementing a IAB Mobile Pull Format...6 Included Template Files...
Serving Media with NGINX Plus
Serving Media with NGINX Plus Published June 11, 2015 NGINX, Inc. Table of Contents 3 About NGINX Plus 3 Using this Guide 4 Prerequisites and System Requirements 5 Serving Media with NGINX Plus 9 NGINX
Version 3.3 Content Administrator Guide
Version 3.3 Content Administrator Guide This document is a guide to assist Content Administrators as they upload, catalog, publish, and share videos using the Ensemble Video enterprise video publishing
Radio Toolbox And Player Embedding
Radio Toolbox And Player Embedding In this tutorial we are going to explain how to use our radio toolbox and the embeddable radio player for your web site. Registration Before we can start using the toolbox
Slide.Show Quick Start Guide
Slide.Show Quick Start Guide Vertigo Software December 2007 Contents Introduction... 1 Your first slideshow with Slide.Show... 1 Step 1: Embed the control... 2 Step 2: Configure the control... 3 Step 3:
JavaScript By: A. Mousavi & P. Broomhead SERG, School of Engineering Design, Brunel University, UK
Programming for Digital Media EE1707 JavaScript By: A. Mousavi & P. Broomhead SERG, School of Engineering Design, Brunel University, UK 1 References and Sources 1. DOM Scripting, Web Design with JavaScript
Using the UCF Toolkit
The Cisco WebEx Universal Communications Format (UCF) toolkit is a plug in for Microsoft PowerPoint that enables you to add multimedia to your presentations. You can share your UCF multimedia presentation
A Web- based Approach to Music Library Management. Jason Young California Polytechnic State University, San Luis Obispo June 3, 2012
A Web- based Approach to Music Library Management Jason Young California Polytechnic State University, San Luis Obispo June 3, 2012 Abstract This application utilizes modern standards developing in web
MAGENTO THEME SHOE STORE
MAGENTO THEME SHOE STORE Developer: BSEtec Email: [email protected] Website: www.bsetec.com Facebook Profile: License: GPLv3 or later License URL: http://www.gnu.org/licenses/gpl-3.0-standalone.html 1
HDVideoShare! User Documentation Team January 31. 2012
Version 2.3 HDVideoShare! User Documentation Team January 31. 2012 2010 Copyrights and all rights reserved by Contus Support Interactive Pvt. Ltd., TABLE OF CONTENTS Welcome to you as a new user of this
Digital Video Ad Serving Template (VAST) Released October 2008
Digital Video Ad Serving Template (VAST) Released October 2008 This document has been developed by the IAB Digital Video Committee. Document Version 1.11 Main Author Ari Paparo - Google Date 10/30/2008
How to Add a Transparent Flash FLV movie to your Web Page Tutorial by R. Berdan Oct 16 2008
How to Add a Transparent Flash FLV movie to your Web Page Tutorial by R. Berdan Oct 16 2008 To do this tutorial you will need Flash 8 or higher, Dreamweaver 8 or higher. You will also need some movie clips
Visualizing an OrientDB Graph Database with KeyLines
Visualizing an OrientDB Graph Database with KeyLines Visualizing an OrientDB Graph Database with KeyLines 1! Introduction 2! What is a graph database? 2! What is OrientDB? 2! Why visualize OrientDB? 3!
RSW. Responsive Fullscreen WordPress Theme
RSW Responsive Fullscreen WordPress Theme Thank you for purchasing this theme. This document covers the installation and Setting up of the theme. Please read through this Help Guide if you experience any
EventCentre : Getting Started with the Universal Communications. Universal Communications Format Toolkit Overview. How UCF Works
EventCentre : Getting Started with the Universal Communications InterCall, in partnership with WebEx, provides EventCentre web conferencing services. Because EventCentre is powered by WebEx, this guide
By Kundan Singh Oct 2010. Communication
Flash Player Audio Video Communication By Kundan Singh Oct 2010 Modern multimedia communication systems have roots in several different technologies: transporting video over phone lines, using multicast
5.1 Features 1.877.204.6679. [email protected] Denver CO 80202
1.877.204.6679 www.fourwindsinteractive.com 3012 Huron Street [email protected] Denver CO 80202 5.1 Features Copyright 2014 Four Winds Interactive LLC. All rights reserved. All documentation
WP Popup Magic User Guide
WP Popup Magic User Guide Plugin version 2.6+ Prepared by Scott Bernadot WP Popup Magic User Guide Page 1 Introduction Thank you so much for your purchase! We're excited to present you with the most magical
Digital Signage with Apps
Version v1.0.0 Digital Signage with Apps Copyright 2012 Syabas Technology, All Rights Reserved 2 Digital Signage with Apps Project...6 New Project...6 Scheduler...6 Layout Panel...7 Property Panel...8
Outline. 1.! Development Platforms for Multimedia Programming!
Outline 1.! Development Platforms for Multimedia Programming! 1.1.! Classification of Development Platforms! 1.2.! A Quick Tour of Various Development Platforms! 2.! Multimedia Programming with Python
Using Impatica for Power Point
Using Impatica for Power Point What is Impatica? Impatica is a tool that will help you to compress PowerPoint presentations and convert them into a more efficient format for web delivery. Impatica for
Adobe Marketing Cloud Video Heartbeat
Adobe Marketing Cloud Video Heartbeat Contents Measuring Video in Adobe Analytics using Video Heartbeat...4 Measuring Video FAQ...5 Before you Implement...8 Getting Started...9 Configure Analytics Video
Interactive Data Visualization for the Web Scott Murray
Interactive Data Visualization for the Web Scott Murray Technology Foundations Web technologies HTML CSS SVG Javascript HTML (Hypertext Markup Language) Used to mark up the content of a web page by adding
Using WebEx Player. Playing a recording. Installing WebEx Player. System requirements for listening to audio in a recording
17 of 24 Using WebEx Player Using WebEx Player, you can play back any recording that was made using WebEx Recorder that is, a WebEx Recording Format (.wrf) file. Installing WebEx Player If you do not yet
LiveStreamingCDN Producer User s Guide
LiveStreamingCDN Producer User s Guide A LiveStreamingCDN Producer account offers a variety of premium features in addition to live and VOD streaming capabilities. A Producer account comes with a multi-device
Example. Represent this as XML
Example INF 221 program class INF 133 quiz Assignment Represent this as XML JSON There is not an absolutely correct answer to how to interpret this tree in the respective languages. There are multiple
PRODUCTION GUIDE. Adform HTML5 Floor Ad (1280x70 > 980x400)
PRODUCTION GUIDE Adform HTML5 Floor Ad (1280x70 > 980x400) Production Guide 1 Table of Contents HTML5 Floor Ad (1280x70 > 980x400) 2 User Experience 2 Creative assets 2 Banner asset 2 Video component 3
Windows Media Player 10 Mobile: More Music, More Choices
Windows Media Player 10 Mobile: More Music, More Choices Windows Media Player 10 Mobile for Windows Mobile -based Smartphones and Pocket PCs is an all-in-one mobile media player that provides a rich media
Developing In Eclipse, with ADT
Developing In Eclipse, with ADT Android Developers file://v:\android-sdk-windows\docs\guide\developing\eclipse-adt.html Page 1 of 12 Developing In Eclipse, with ADT The Android Development Tools (ADT)
Embedding a Data View dynamic report into an existing web-page
Embedding a Data View dynamic report into an existing web-page Author: GeoWise User Support Released: 23/11/2011 Version: 6.4.4 Embedding a Data View dynamic report into an existing web-page Table of Contents
Oracle Forms Services Secure Web.Show_Document() calls to Oracle Reports
Oracle Forms Services Secure Web.Show_Document() calls to Oracle Reports $Q2UDFOH7HFKQLFDO:KLWHSDSHU )HEUXDU\ Secure Web.Show_Document() calls to Oracle Reports Introduction...3 Using Web.Show_Document
Kentico CMS Web Parts
Kentico CMS Web Parts Abuse report Abuse report In-line abuse report Articles Article list Attachments Attachment image gallery Document attachments BizForms Blogs BizForm (on-line form) Comment view Recent
stream.jw.org - Viewer User Guide Table of Contents
Table of Contents Quick Start... 4 1.0 Introduction... 5 1.1 Objective... 5 1.2 Scope... 5 1.3 Terms & Definitions... 5 2.0 Technical Requirements... 6 2.1 Computer... 6 2.2 Credentials... 6 2.3 Internet...
What HTML5 is, isn t, and why it matters
PlanetStream 2015 THE TRUTH ABOUT HTML5 AND MOBILE STREAMING What HTML5 is, isn t, and why it matters PlanetStream Ltd Churchfield House 36 Vicar Street Dudley West Midlands DY2 8RG United Kingdom Tel:
BT MEDIA JOOMLA COMPONENT
BT MEDIA JOOMLA COMPONENT User guide Version 1.0 Copyright 2013Bowthemes Inc. [email protected] 1 Table of Contents Introduction...3 Related Topics:...3 Product Features...3 Installing and Upgrading...4
How To Change Your Site On Drupal Cloud On A Pcode On A Microsoft Powerstone On A Macbook Or Ipad (For Free) On A Freebie (For A Free Download) On An Ipad Or Ipa (For
How-to Guide: MIT DLC Drupal Cloud Theme This guide will show you how to take your initial Drupal Cloud site... and turn it into something more like this, using the MIT DLC Drupal Cloud theme. See this
GUIDE. Give PowerPoint a Voice: Developing. Narrated Presentations on a Windows PC. Donna Carnduff. [email protected].
GUIDE Give PowerPoint a Voice: Developing Narrated Presentations on a Windows PC Donna Carnduff [email protected] Revised 6/10/2015 To register for workshops, visit http://oit.utk.edu/training Configure
Kentico CMS 7.0 User s Guide. User s Guide. Kentico CMS 7.0. 1 www.kentico.com
User s Guide Kentico CMS 7.0 1 www.kentico.com Table of Contents Introduction... 4 Kentico CMS overview... 4 Signing in... 4 User interface overview... 6 Managing my profile... 8 Changing my e-mail and
Universal Ad Package (UAP)
Creative Unit Name Medium Rectangle Expanded File Load Size not allowed for this Additional File for OBA Self- Reg Compliance (Note 1) Subsequent Polite File Subsequent User- Initiated File Subsequent
Getting Started Guide. January 19, 2014
Getting Started Guide January 19, 2014 User Guide Chapters 1. Scheduling Meetings Configuring Meeting Details Advanced Options Invitation Email, received by the Participants Invitation Email, sent to the
Delivering high quality video streaming for
Delivering high quality video streaming for VIDEO STREAMING SOLUTIONS web portal Streaming and your mobile video smoothlydevices Program Seminar Pemantapan Laman Web Sektor Awam Bil. 1/2011 Dewan Auditorium
Kaltura Management Console (KMC) User Manual. Version: Eagle
Kaltura Management Console (KMC) User Manual Version: Eagle Kaltura Business Headquarters 200 Park Avenue South, New York, NY. 10003, USA Tel.: +1 800 871 5224 Copyright 2012 Kaltura Inc. All Rights Reserved.
Pay with Amazon Integration Guide
2 2 Contents... 4 Introduction to Pay with Amazon... 5 Before you start - Important Information... 5 Important Advanced Payment APIs prerequisites... 5 How does Pay with Amazon work?...6 Key concepts in
WP Popup Magic User Guide
WP Popup Magic User Guide Introduction Thank you so much for your purchase! We're excited to present you with the most magical popup solution for WordPress! If you have any questions, please email us at
2013, Active Commerce 1
2013, Active Commerce 1 Active Commerce User Guide Terminology / Interface Login Adding Media to the Media Library Uploading an Item to the Media Library Editing the Media Meta Data Adding Streaming Videos
TEMPLATE MANUAL Table of Contents
TEMPLATE MANUAL Table of Contents Introduction... 2 Features Overview...3 How to preview the website... 4 Background configuration... 4 Disabling grid over background... 4 How to build Menu...5 Setting
How to Edit Your Website
How to Edit Your Website A guide to using your Content Management System Overview 2 Accessing the CMS 2 Choosing Your Language 2 Resetting Your Password 3 Sites 4 Favorites 4 Pages 5 Creating Pages 5 Managing
Timeline for Microsoft Dynamics CRM
Timeline for Microsoft Dynamics CRM A beautiful and intuitive way to view activity or record history for CRM entities Version 2 Contents Why a timeline?... 3 What does the timeline do?... 3 Default entities
a basic guide to video conversion using SUPER
a basic guide to video conversion using SUPER This is a basic guide to video conversion using the freeware video conversion tool SUPER, from erightsoft. SUPER is a graphic front end to several free, powerful,
Filtered Views for Microsoft Dynamics CRM
Filtered Views for Microsoft Dynamics CRM Version 4.2.13, March 5, 2010 Copyright 2009-2010 Stunnware GmbH - 1 of 32 - Contents Overview... 3 How it works... 4 Setup... 5 Contents of the download package...
Appspace 5.X Reference Guide (Digital Signage) Updated on February 9, 2015
Appspace 5.X Reference Guide (Digital Signage) Updated on February 9, 2015 1 TABLE OF CONTENTS 2 What is Appspace For Digital Signage... 4 3 Access Appspace... 4 4 Best Practices and Notes... 4 5 Appspace
Getting Started Guide
Getting Started Guide User Guide Chapters 1. Scheduling Meetings Configuring Meeting Details Advanced Options Invitation Email, received by the Participants Invitation Email, sent to the Moderator (scheduler)
DROPFILES SUPPORT. Main advantages:
DROPFILES SUPPORT Dropfiles is a Joomla extension used to manages all your files and categorize them in a smart way. The main component is completed by a theme pack. For more commercial information please
Computer Audio Design 1543 DAC Windows Recommended Playback Software Installation
Computer Audio Design 1543 DAC Windows Recommended Playback Software Installation Version 1.4 December 2013 Playback Software This is the second update for using JRiver Version 19.x and I am now using
Creating Web Pages with HTML Simplified. 3rd Edition
Brochure More information from http://www.researchandmarkets.com/reports/2248215/ Creating Web Pages with HTML Simplified. 3rd Edition Description: Are you new to computers? Does new technology make you
MEDIA SHARE Set Up Guide for PCs with Windows XP
MEDIA SHARE Set Up Guide for PCs with Windows XP AT&T Media Share allows you to view photos and listen to music files that are stored on your PC on your U-verse-connected TV. In order to share photo and
How to Integrate Camera Live View into Web Application?
ACTi Knowledge Base Category: Installation & Configuration Note Sub-category: Integration Model: All Firmware: N/A Software: N/A Author: Published: 2009/12/30 Reviewed: 2011/11/30 How to Integrate Camera
Contents. About AirPlay 5. Preparing Your Media and Server for AirPlay 8. Opting Into or Out of AirPlay 11
AirPlay Overview Contents About AirPlay 5 At a Glance 5 Choose the Best Option for Media Playback 5 You Can Opt Into or Out of AirPlay for Video 6 Provide a Great AirPlay User Experience in Your App 6
EdgeCast Networks Inc. Flash Media Streaming Administration Guide
EdgeCast Networks Inc. Flash Media Streaming Administration Guide Disclaimer Care was taken in the creation of this guide. However, EdgeCast Networks Inc. cannot accept any responsibility for errors or
frequently asked questions which you might find useful for creating/updating your SlideRunner. Frequently Asked Questions
SlideRunner is the latest and most fabulous tool for presenting your ideas. Below are some of the frequently asked questions which you might find useful for creating/updating your SlideRunner. Frequently
IMRG Peermap API Documentation V 5.0
IMRG Peermap API Documentation V 5.0 An Introduction to the IMRG Peermap Service... 2 Using a Tag Manager... 2 Inserting your Unique API Key within the Script... 2 The JavaScript Snippet... 3 Adding the
Advantage of Jquery: T his file is downloaded from
What is JQuery JQuery is lightweight, client side JavaScript library file that supports all browsers. JQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling,
ICE: HTML, CSS, and Validation
ICE: HTML, CSS, and Validation Formatting a Recipe NAME: Overview Today you will be given an existing HTML page that already has significant content, in this case, a recipe. Your tasks are to: mark it
Getting Started Guide. November 25, 2013
Getting Started Guide November 25, 2013 Getting Started Guide Chapters 1. Scheduling Meetings Configuring Meeting Details Advanced Options Invitation Email, received by the Participants Invitation Email,
Using Flash Media Live Encoder To Broadcast An Audio-Only Stream (on Mac)
Using Flash Media Live Encoder To Broadcast An Audio-Only Stream (on Mac) A user guide for setting up Flash Media Live Encoder (FMLE) to broadcast video over our servers is available here: (https://community.ja.net/system/files/15551/fmle%20streaming%20wizard%20guide.pdf)
Implementation of the plug-in is very easy and only relies on one JQuery function call to initiate.
Uploadify v2.1.0 2009 by Ronnie Garcia Developed by Ronnie Garcia and Travis Nickels www.uploadify.com www.ronniesan.com WHAT IS IT? This plug-in allows you to change any element with an ID attribute on
Videoplaza Creative Specification 12 th of March 2012
Creative Asset Specification Videoplaza Table of contents 1 Introduction 3 2 The Videoplaza Format Family 4 2.1 VP Standard Formats... 4 2.2 VP Premium... 4 2.3 Format partners... 4 2.4 VP Custom formats...
ultimo theme Update Guide Copyright 2012-2013 Infortis All rights reserved
ultimo theme Update Guide Copyright 2012-2013 Infortis All rights reserved 1 1. Update Before you start updating, please refer to 2. Important changes to check if there are any additional instructions
USER GUIDE Version 2.0
USER GUIDE Version 2.0 TABLE of CONTENTS Introduction... 3 Hardware Overview... 3 Software Overview... 4 DAYSHIFT Panel... 5 Settings Panel... 6 Setup Tab... 6 Configure... 6 Show User Guide... 6 Preview
Sizmek Formats. HTML5 Page Skin. Build Guide
Formats HTML5 Page Skin Build Guide Table of Contents Overview... 2 Supported Platforms... 7 Demos/Downloads... 7 Known Issues:... 7 Implementing a HTML5 Page Skin Format... 7 Included Template Files...
MEDIA SHARE Set Up Guide for PCs with Windows 7
MEDIA SHARE Set Up Guide for PCs with Windows 7 AT&T Media Share allows you to view photos and listen to music files that are stored on your PC on your U-verse-connected TV. In order to share photo and
WIRIS quizzes web services Getting started with PHP and Java
WIRIS quizzes web services Getting started with PHP and Java Document Release: 1.3 2011 march, Maths for More www.wiris.com Summary This document provides client examples for PHP and Java. Contents WIRIS
Note Google and YouTube may change the appearance of their sites from time to time, so the buttons or links may not always appear in the same place.
Uploading to YouTube and Posting in Blackboard This document will explain 1. How to upload videos from your computer to Youtube 2. How to obtain the URL (web link) or embed code for your video 3. How to
Working with Indicee Elements
Working with Indicee Elements How to Embed Indicee in Your Product 2012 Indicee, Inc. All rights reserved. 1 Embed Indicee Elements into your Web Content 3 Single Sign-On (SSO) using SAML 3 Configure an
Client-side Web Engineering From HTML to AJAX
Client-side Web Engineering From HTML to AJAX SWE 642, Spring 2008 Nick Duan 1 What is Client-side Engineering? The concepts, tools and techniques for creating standard web browser and browser extensions
Sizmek Formats. Swell. Build Guide
Formats Swell Build Guide Table Of Contents Overview... 4 Supported Platforms... 4 Specifications... 4 Known Issues... 4 Ad Behavior Screenshots... 5 Before you Begin... 6 Template Included Files... 6
Introduction to Ingeniux Forms Builder. 90 minute Course CMSFB-V6 P.0-20080901
Introduction to Ingeniux Forms Builder 90 minute Course CMSFB-V6 P.0-20080901 Table of Contents COURSE OBJECTIVES... 1 Introducing Ingeniux Forms Builder... 3 Acquiring Ingeniux Forms Builder... 3 Installing
Citrix StoreFront. Customizing the Receiver for Web User Interface. 2012 Citrix. All rights reserved.
Citrix StoreFront Customizing the Receiver for Web User Interface 2012 Citrix. All rights reserved. Customizing the Receiver for Web User Interface Introduction Receiver for Web provides a simple mechanism
How to do Split testing on your WordPress site using Google Website Optimizer
How to do Split testing on your WordPress site using Google Website Optimizer If you are now at a stage where you ve read enough about the merits of split testing that you want to want to jump in and try
Instant Chime for IBM Sametime Installation Guide for Apache Tomcat and Microsoft SQL
Instant Chime for IBM Sametime Installation Guide for Apache Tomcat and Microsoft SQL Spring 2015 Copyright and Disclaimer This document, as well as the software described in it, is furnished under license
ebooks: Exporting EPUB files from Adobe InDesign
White Paper ebooks: Exporting EPUB files from Adobe InDesign Table of contents 1 Preparing a publication for export 4 Exporting an EPUB file The electronic publication (EPUB) format is an ebook file format
Content Author's Reference and Cookbook
Sitecore CMS 6.5 Content Author's Reference and Cookbook Rev. 110621 Sitecore CMS 6.5 Content Author's Reference and Cookbook A Conceptual Overview and Practical Guide to Using Sitecore Table of Contents
Project 2: Web Security Pitfalls
EECS 388 September 19, 2014 Intro to Computer Security Project 2: Web Security Pitfalls Project 2: Web Security Pitfalls This project is due on Thursday, October 9 at 6 p.m. and counts for 8% of your course
Advanced Web Development SCOPE OF WEB DEVELOPMENT INDUSTRY
Advanced Web Development Duration: 6 Months SCOPE OF WEB DEVELOPMENT INDUSTRY Web development jobs have taken thе hot seat when it comes to career opportunities and positions as a Web developer, as every
Generate Android App
Generate Android App This paper describes how someone with no programming experience can generate an Android application in minutes without writing any code. The application, also called an APK file can
We automatically generate the HTML for this as seen below. Provide the above components for the teaser.txt file.
Creative Specs Gmail Sponsored Promotions Overview The GSP creative asset will be a ZIP folder, containing four components: 1. Teaser text file 2. Teaser logo image 3. HTML file with the fully expanded