{"id":16609758,"url":"https://github.com/googleads/videojs-ima","last_synced_at":"2025-05-15T02:10:18.001Z","repository":{"id":18105929,"uuid":"21175131","full_name":"googleads/videojs-ima","owner":"googleads","description":"IMA SDK Plugin for Video.js","archived":false,"fork":false,"pushed_at":"2025-05-06T14:52:22.000Z","size":5868,"stargazers_count":470,"open_issues_count":39,"forks_count":290,"subscribers_count":46,"default_branch":"main","last_synced_at":"2025-05-11T14:01:45.353Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/googleads.png","metadata":{"files":{"readme":"README-DAI.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2014-06-24T17:58:16.000Z","updated_at":"2025-05-07T02:59:00.000Z","dependencies_parsed_at":"2023-02-18T15:00:43.735Z","dependency_job_id":"8ffec98f-cf90-47b3-90aa-fc81e0e04286","html_url":"https://github.com/googleads/videojs-ima","commit_stats":{"total_commits":492,"total_committers":59,"mean_commits":8.338983050847459,"dds":0.7073170731707317,"last_synced_commit":"afe100815c61e58a14072d112b5e603ec7a61d5b"},"previous_names":[],"tags_count":45,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/googleads%2Fvideojs-ima","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/googleads%2Fvideojs-ima/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/googleads%2Fvideojs-ima/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/googleads%2Fvideojs-ima/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/googleads","download_url":"https://codeload.github.com/googleads/videojs-ima/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254259386,"owners_count":22040821,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-12T01:29:14.866Z","updated_at":"2025-05-15T02:10:12.963Z","avatar_url":"https://github.com/googleads.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Media Tools"],"sub_categories":["Independent \u0026 Hobbyist Projects"],"readme":"# IMA DAI implementation for the Video.js-IMA plugin\n\n## Introduction\nYou can use the IMA SDK Plugin for Video.js to integrate with the Video.js\nplayer.\n\nIf you're using the plugin for a client-side implementation, please see\nthe [client-side readme](//github.com/googleads/videojs-ima/blob/master/README.md)\nfor documentation.\n\nTo see the plugin in action for DAI, check out this\n[sample](//googleads.github.io/videojs-ima/examples/dai).\n\n## Features\nEnable playback for HLS streams integrated with ads by integrating the Google\nIMA DAI SDK into Video.js. Using DAI requires an [Ad Manager 360\nAdvanced](//support.google.com/admanager/answer/3485387) account. DASH streams\nare currently not supported by this plugin.\n\nFor more information, see the\n[IMA DAI SDK documentation](//developers.google.com/ad-manager/dynamic-ad-insertion/sdk/html5).\n\n## Requirements\n  - Your favorite text editor\n  - A JavaScript enabled browser\n  - An [Ad Manager 360 Advanced](//support.google.com/admanager/answer/3485387)\n  account.\n\n## Get started\n\n### ES6 Imports\nThe easiest way to get started is to use [npm](//www.npmjs.org/).\n\n```\nnpm install videojs-ima\n```\n\nYour index.html should contain a video.js player for stream playback, and script\ntags for the IMA DAI SDK and your own javascript file.\n\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003c!-- Load any dependent stylesheets. --\u003e\n    \u003clink href=\"path/to/video-js.css\" rel=\"stylesheet\"\u003e\n  \u003c/head\u003e\n\n  \u003cbody\u003e\n    \u003cvideo id='video_player' class=\"video-js\"\u003e\n        \u003cp class='vjs-no-js'\u003e\n            To view this video, please enable JavaScript and consider upgrading\n          to a web browser that\n            \u003ca href='https://videojs.com/html5-video-support/' target='_blank'\u003e\n              supports HTML5 video\n          \u003c/a\u003e\n        \u003c/p\u003e\n    \u003c/video\u003e\n    \u003c!-- Load dependent scripts --\u003e\n    \u003cscript src=\"//imasdk.googleapis.com/js/sdkloader/ima3_dai.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"player.js\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nThe following imports are required to use the videojs-ima module, as seen in the\nplayer.js example below. Note that both the `VodStream` and `LiveStream` class\nare imported, but most likely only one will be used at a time.\n\n```javascript\nimport videojs from 'video.js';\nimport 'videojs-contrib-hls';\nimport 'videojs-contrib-ads';\nimport {VodStream, LiveStream} from 'videojs-ima';\n\nconst videoOptions = {\n  controls: true,\n  // Include other video.js options as needed.\n};\n\nconst player = videojs('video_player', videoOptions);\n\n// Example of a Live and VOD stream using IMA's samples streams.\nconst vodStream = new VodStream('hls', '2548831', 'tears-of-steel');\nconst liveStream = new LiveStream('hls', 'sN_IYUG8STe1ZzhIIE_ksA');\n\nconst imaOptions = {\n  fallbackStreamUrl: 'http://storage.googleapis.com/testtopbox-public/video_content/bbb/master.m3u8',\n  // Include other IMA DAI options as needed.\n};\n\nplayer.imaDai(vodStream, imaOptions);\n```\n\n### Alternative Setup\nIf you don't use npm, you can download the source from the `dist/` folder and\ninclude it directly in your project. You'll also need to download the source for\nthe [videojs-contrib-ads plugin](//github.com/videojs/videojs-contrib-ads) and\nthe [videojs-http-streaming plugin](//github.com/videojs/http-streaming).\n\nIn your index.html file, create a new video.js player and load a (currently\nempty) javascript file:\n\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003c!-- Load dependent stylesheets. --\u003e\n    \u003clink href=\"path/to/video-js.css\" rel=\"stylesheet\"\u003e\n    \u003clink rel=\"stylesheet\" href=\"path/to/videojs-contrib-ads.css\" /\u003e\n  \u003c/head\u003e\n\n  \u003cbody\u003e\n    \u003cvideo id='video_player' class=\"video-js\"\u003e\n        \u003cp class='vjs-no-js'\u003e\n            To view this video, please enable JavaScript and consider upgrading\n            to a web browser that\n            \u003ca href='https://videojs.com/html5-video-support/' target='_blank'\u003e\n                supports HTML5 video\n            \u003c/a\u003e\n        \u003c/p\u003e\n    \u003c/video\u003e\n    \u003c!-- Load dependent scripts --\u003e\n    \u003cscript src=\"/path/to/video.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"//imasdk.googleapis.com/js/sdkloader/ima3_dai.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"/path/to/videojs-contrib-ads.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"/path/to/videojs-http-streaming.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"/path/to/videojs.ima.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"player.js\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nIn player.js, load the ads library and set up the IMA plugin:\n\n```javascript\nimport videojs from 'video.js';\nimport {VodStream, LiveStream} from 'videojs-ima';\n\nconst videoOptions = {\n  controls: true,\n  // Include other video.js options as needed.\n};\n\nconst player = videojs('video_player', videoOptions);\n\n// Example of a Live and VOD stream using IMA's samples streams.\nconst vodStream = new VodStream('hls', '2548831', 'tears-of-steel');\nconst liveStream = new LiveStream('hls', 'sN_IYUG8STe1ZzhIIE_ksA');\n\nconst imaOptions = {\n  fallbackStreamUrl: 'http://storage.googleapis.com/testtopbox-public/video_content/bbb/master.m3u8',\n  // Include other IMA DAI options as needed.\n};\n\nplayer.imaDai(vodStream, imaOptions);\n```\n\n## Stream constructors\nThe following options are required by the following class constructors:\n\n### LiveStream(streamFormat, assetKey)\n\n| Settings | Type | Description |\n|----------|------|-------------|\n| streamFormat | string | 'hls'. 'dash' streams are currently not supported. |\n| assetKey | string | The live stream's asset key. |\n\n### VodStream(streamFormat, cmsId, videoId)\n\n| Settings | Type | Description |\n|----------|------|-------------|\n| streamFormat | string | 'hls'. 'dash' streams are currently not supported. |\n| cmsId | string | The VOD stream's CSM ID. |\n| videoId | string | The VOD stream's video ID |\n\n## Additional settings\nThe DAI portion of the plugin accepts a number of settings for stream playback.\nA summary of all settings follows:\n\n| Settings | Type | Description |\n|----------|------|-------------|\n| apiKey | string | The API key. |\n| authToken | string | The stream request authorization token. |\n| bookmarkTime | number | The content time in seconds where the user previously left off. |\n| locale | string | Supported country codes for localization. The supported locale codes can be found in [Localizing for Language and Locale](//developers.google.com/interactive-media-ads/docs/sdks/html5/client-side/localization) |\n| adTagParameters | object | This object will be set as `streamRequest.adTagParameters` on stream requests. |\n| fallbackStreamUrl | string | The backup stream to be played if stream request fails. |\n| streamActivityMonitorId | string | Monitoring ID used only for debugging. |\n\n## IMA DAI Plugin Ad Events\nThe IMA DAI Plugin will fire an event for the StreamRequest that can be listened to. Please see the below\nexample to set up this listener.\n\n```javascript\nplayer = videojs('video_player');\n\nplayer.on('stream-request', function(response){\n  const streamRequest = response.StreamRequest;\n  // Your code in response to the `stream-request` event.\n})\n```\n\n## Where do I report issues?\nPlease report issues on the [issues page](../../issues).\n\n## Terms of Service\nThe IMA SDK plugin for Video.js uses the IMA SDK, and as such is subject to the\n[IMA SDK Terms of Service](//developers.google.com/interactive-media-ads/docs/sdks/html5/client-side/terms).\n\n## How do I contribute?\nSee [CONTRIBUTING.md](CONTRIBUTING.md) for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoogleads%2Fvideojs-ima","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgoogleads%2Fvideojs-ima","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoogleads%2Fvideojs-ima/lists"}