Package videojs along with the videojs-ima extension

For a few days now, I have been struggling to create a single JavaScript file that contains all the necessary components to play videos with Google IMA ads. However, I keep encountering errors, particularly player.ads is not function, which seem to be related to incorrectly registered plugins. Any suggestions would be greatly appreciated. Thank you.

UPDATE: This issue has already been reported here, but it's labeled as priority 3 and I can't afford to wait. I believe there must be another solution.

UPDATE2: It appears that the individual who reported the issue in the link above has come up with a suitable solution. Now I just need to test it out... if it works, I will share 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/videocss')
    .pipe(cssnano())
    .pipe(css2js());

  var imaCss = gulp.src('node_modules/videoimacss')
    .pipe(cssnano())
    .pipe(css2js());

  return mergeStream(videoCss, imaCss, videoJS)
    .pipe(concat('videobundle.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: '[SVG+Plugin Bundle]'}));
});

package.json:

{
  "name": "videos-imbundle",
  "version": "0.1.0",
  "authors": [
    "John Wick <<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="375d585f5919405e545c77505a565e5b1954585a">[email protected]</a>>"
  ],
  "description": "videos bundle",
  "main": "src/entryfile.js",
  "repository": {},
  "keywords": [
    "vid",
    "html",
    "vst",
    "videos",
    "jsc",
    "video",
    "iabb",
    "youtub"
  ],
  "scripts": {
    "g": "g build"
  },
  "author": "John Wick <<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="761c191e1858011f151d36111b171f1a5815191b">[email protected]</a>>",
  "license": "MIT",
  "devDependencies": {
    "bl-core": "*",
    "blify": "*",
    "rowserify": "^13.0.0",
    "rowserify-stanbul": "^0.2.1",
    "colors": "^1.1.0",
    "dl": "^2.2.0",
    "gul": "^3.9.0",
    "gulp-cat": "^2.6.1",
    "ulp-ss-o-j": "^0.0.2",
    "ulp-nno": "^2.1.0",
    "gulp-ignore": "^2.0.2",
    "gulp-jiht": "^2.0.0",
    "gulp-ze": "^2.0.0",
    "gulp-smremas": "^1.6.0",
    "gulp-glify": "^1.2.0",
    "jiht": "^2.9.1",
    "jiht-stylie": "^2.1.0",
    "merge-stram": "^1.0.1",
    "ru-sequnce": "^1.1.0",
    "ufigyfy": "^3.0.1",
    "vid.j": "6.x",
    "vides-contrib-ds": "*",
    "vides-contrib-ls": "*",
    "vides-im": "^1.0.3",
    "vides-youube": "*",
    "vil-buffer": "^1.0.0",
    "vinl-source-streem": "^1.1.0"
  }
}

Answer №1

Following the guidance from EDIT2, the key modification required to get it functioning properly is as follows:

Adjustment made to the require section of the Entryfile:

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

In version 6, registering the contrib-ads plugin has been simplified. Now you can simply use:

require('videojs-contrib-ads');

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

javascript: extracting class name from HTML elements

To extract class names from an HTML code using JavaScript, I can utilize the following method: var cPattern = new RegExp(/class[ \t]*=[ \t]*"[^"]+"/g); var cMatches = data.match(cPattern); However, the above code returns an array with values li ...

ESLint generating varied results while executed through npm run-script

After running the eslint scripts/**/*.js command to lint my code, I encountered two linting errors: » eslint scripts/**/*.js /Users/user/dev/scripts/application.js 3:8 error "React" is defined but never used no-unused-vars /Users/user/dev/scripts/c ...

What is the significance of combining two arrays?

const customTheme = createMuiTheme({ margin: value => [0, 4, 8, 16, 32, 64][value], }); customTheme.margin(2); // = 8 This code snippet showcases how to define spacing values in a Material-UI theme configuration. For more details on customization re ...

Enhance link with dynamic content using an AJAX call

I need help appending a picture after a link with the same URL as the link. The current AJAX code is producing the following result: <a href="images/Draadloos.png" data-lightbox="gallerij"></a> Here is an example of what I would like to achie ...

Plane is constantly cloaked in darkness

I'm having trouble adding a texture to my plane that repeats both horizontally and vertically. Every time I try to apply the texture, it shows up as black. I've attempted to add some lights to the scene, but the issue persists without any errors. ...

Node and Socket.IO - Personalized messaging (one-on-one)

I'm in the process of developing a one-on-one chat feature using Socket.IO and Express to enable private messaging between users. The main issue at hand is: I am looking for a way to send a private message to a specific socket.id while ensuring that ...

When trying to access a property in Typescript that may not exist on the object

Imagine having some data in JS like this example const obj = { // 'c' property should never be present a: 1, b: 2, } const keys = ['a', 'b', 'c'] // always contains 'a', 'b', or 'c' ...

Utilize SWR to retrieve data that corresponds to the chosen value from the dropdown menu

Can SWR fetch data based on the selected value in a dropdown? Initially, it works, but when I select a previously selected value, it doesn't fetch the correct data. Using the Fetch API const { data: entities } = useSWR( currentEntity?.enti ...

Is ES5 essentially the same as ES6 in terms of my lambda search?

After doing a search on an array using ES6, I am having trouble figuring out how to rewrite the code in ES5 due to restrictions with Cordova not allowing me to use lambda functions... $scope.Contact.title = $scope.doctitles[$scope.doctitles.findIndex(fu ...

Ensure that the main div remains centered on the page even when the window size is adjusted

Here is the code snippet: <div id="root"> <div id="child1">xxxx</div> <div id="child2">yyyy</div> </div> CSS : #root{ width: 86%; margin: 0 auto; } #root div { width: 50%; float: left; border: ...

Guide to automating the versioning of static assets (css, js, images) in a Java-based web application

To optimize the efficiency of browser cache usage for static files, I am seeking a way to always utilize cached content unless there has been a change in the file, in which case fetching the new content is necessary. My goal is to append an md5 hash of th ...

Displaying an STL file at the center of the screen using Three.js positioning

I need assistance with positioning a rendered STL file from Thingiverse in the center of the screen using Three.js and the THREE.STLLoader(). Currently, I have to adjust the rotation properties based on touch coordinates to get the object where I want it. ...

Problems with the Chosen property of MenuItem within Material-UI

The MenuItem's "selected" property does not seem to be functioning correctly within the Select component. For reference, please visit https://codesandbox.io/s/9j8z661lny I have attempted to use comparison with the Id, and even tried using selected={t ...

Executing Enter Key and Button Simultaneously with JavaScript: Step-by-Step Guide

I need assistance understanding how to simultaneously trigger the enter key and button in this code. When the value is entered into the input field, it should trigger both the enter key and the button "Enter" at the same time. Additionally, after pressing ...

Execute a JavaScript function daily for each new user

Can someone help me understand how to execute a JavaScript/jQuery function that triggers a PopUp once for each new user visiting a webpage? Below is the code I need assistance with. $(window).load(function() { $('#index9').fadeIn("slow"); ...

Promise rejection not handled: Trying to modify headers after they have already been sent to the client

I can't seem to figure out why these errors keep popping up. I've tried looking for solutions online but haven't had any luck. Here is the node function I'm using for an API call: exports.GetEmployeeConfirmationList = function (req, res ...

Is it necessary for parameter assertion in Javascript to throw an error immediately if the function returns a Promise

I've been immersed in the world of NodeJS code for quite some time now, observing various techniques employed by different developers. One question that has been on my mind is whether it's considered a best practice to have a function that, with ...

The event listener for jQuery's document.ready doesn't trigger, rendering all jQuery functions ineffective

After researching similar issues on various forums, I have attempted the following troubleshooting steps: replacing all $ with jQuery ensuring the correct src is used implementing jQuery.noConflict() My goal is to retrieve data from a SQLite3 database w ...

Ensuring proper alignment within anchor links and buttons

button, a { height: 30px; display: inline-block; border: 1px solid black; vertical-align: middle; } button > div, a > div { width: 30px; height: 10px; background-color: red; } <button> <div class="buttonDiv"></div> ...

Removing background color and opacity with JavaScript

Is there a way to eliminate the background-color and opacity attributes using JavaScript exclusively (without relying on jQuery)? I attempted the following: document.getElementById('darkOverlay').style.removeProperty("background-color"); docume ...