Video package with plugin videojs-ima

Question

I have been trying (for several days now) to perform a very simple task: create one javascript file that links all the necessary parts for playing videos with Google IMA ads, but I still encounter some errors (mainly player.ads is not function ), which always connected in some way with incorrectly registered plugins. I appreciate any suggestions. Thanks.

EDIT: This issue has already been reported , but marked as priority 3, and I don't have time to wait. I think there is another solution.

EDIT2: It seems that the guy who reported this problem in the link above has already come up with a suitable solution. Now it remains only to try ... if it works, I will send it as an answer.

Entryfile:

 /*jshint esversion: 6 */ /*jshint -W030 */ let ima_script = document.createElement('script'); ima_script.type = "text/javascript"; ima_script.src = "https://imasdk.googleapis.com/js/sdkloader/ima3.js"; document.getElementsByTagName('head')[0].appendChild(ima_script); videojs = require('video.js'); require('videojs-contrib-ads'); require('videojs-ima'); require('videojs-youtube'); require('videojs-contrib-hls'); Array.from(document.getElementsByTagName('video')) .forEach(videojs); ima_script.onload = function() { google.ima.settings.setLocale('cs'); let players = videojs.players; for (let id in players) { (players.hasOwnProperty(id) ? players[id].ima({ id: id, adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator=', disableFlashAds: true }):''); } }; 

gulpfile.js:

 var browserify = require('browserify'); var babelify = require('babelify'); var buffer = require('vinyl-buffer'); var concat = require('gulp-concat'); var css2js = require('gulp-css-to-js'); var cssnano = require('gulp-cssnano'); var del = require('del'); var gulp = require('gulp'); var ignore = require('gulp-ignore'); var jshint = require('gulp-jshint'); var path = require('path'); var runSequence = require('run-sequence'); var size = require('gulp-size'); var mergeStream = require('merge-stream'); var source = require('vinyl-source-stream'); var sourcemaps = require('gulp-sourcemaps'); var uglify = require('gulp-uglify'); var distPath = path.join(path.normalize('__dirname/../dist'), '/'); gulp.task('build', function (done) { runSequence( 'clean', 'lintjs', 'build-bundle', function (error) { if (error) { console.log(error.message.red); } else { console.log('BUILD FINISHED SUCCESSFULLY'.green); } done(error); }); }); gulp.task('clean', function (done) { del.sync([distPath], {force: true}); done(); }); gulp.task('lintjs', function() { return gulp.src([ 'gulpfile.js', 'src/**/*.js', 'build/**/*.js' ]) .pipe(jshint()) .pipe(jshint.reporter('jshint-stylish')); }); gulp.task('build-bundle', function () { var videoJS = browserify({ entries: 'src/entryfile.js', //debug: true, paths: ['./node_modules'], cache: {}, packageCache: {} }) .transform(babelify) .bundle() .pipe(source('outputfile.js')) .pipe(buffer()); var videoCss = gulp.src('node_modules/video.js/dist/video-js.css') .pipe(cssnano()) .pipe(css2js()); var imaCss = gulp.src('node_modules/video-ima/dist/videojs.ima.css') .pipe(cssnano()) .pipe(css2js()); return mergeStream(videoCss, imaCss, videoJS) .pipe(concat('video.bundle.js')) /* .pipe(sourcemaps.init({loadMaps: true})) .pipe(uglify({compress: false})) // compress needs to be false otherwise it mess the sourcemaps .pipe(sourcemaps.write('.'))*/ .pipe(gulp.dest(distPath)) .pipe(size({showFiles: true, title: '[VideoJS+Plugin Bundle]'})); }); 

package.json:

 { "name": "videojs-ima-bundle", "version": "0.1.0", "authors": [ "John Wick < [e-mail] >" ], "description": "video.js bundle", "main": "src/entryfile.js", "repository": {}, "keywords": [ "vpaid", "html5", "vast", "videojs", "js", "video", "iab", "youtube" ], "scripts": { "gulp": "gulp build" }, "author": "John Wick < [e-mail] >", "license": "MIT", "devDependencies": { "babel-core": "*", "babelify": "*", "browserify": "^13.0.0", "browserify-istanbul": "^0.2.1", "colors": "^1.1.0", "del": "^2.2.0", "gulp": "^3.9.0", "gulp-concat": "^2.6.1", "gulp-css-to-js": "^0.0.2", "gulp-cssnano": "^2.1.0", "gulp-ignore": "^2.0.2", "gulp-jshint": "^2.0.0", "gulp-size": "^2.0.0", "gulp-sourcemaps": "^1.6.0", "gulp-uglify": "^1.2.0", "jshint": "^2.9.1", "jshint-stylish": "^2.1.0", "merge-stream": "^1.0.1", "run-sequence": "^1.1.0", "uglifyify": "^3.0.1", "video.js": "6.x", "videojs-contrib-ads": "*", "videojs-contrib-hls": "*", "videojs-ima": "^1.0.3", "videojs-youtube": "*", "vinyl-buffer": "^1.0.0", "vinyl-source-stream": "^1.1.0" } } 

Answer 1

According to EDIT2, this is only a modification that makes it work:

Modified ones require the Entryfile part:

 videojs = require('video.js'); var contribAds = require('videojs-contrib-ads'); videojs.registerPlugin('ads', contribAds); require('video.js/dist/lang/cs.js') require('videojs-youtube'); require('videojs-contrib-hls'); require('videojs-ima'); 

EDIT

Contrib-ads plugin registration has been “fixed” in v6. Now you should just use:

 require('videojs-contrib-ads');