javascript - 将 videojs 与 videojs-ima 插件捆绑在一起

Question

我正在尝试(已经几天)完成非常简单的任务:构建一个 javascript 文件，捆绑所有必要的部分以使用 Google IMA 广告播放视频，但我仍然面临一些错误(主要是 player.ads not function) 总是以某种方式连接到错误注册的插件。我感谢任何建议。谢谢。

编辑:这个问题是 already reported ，但标记为优先级 3，我没有时间等待。我相信还有另一种解决方案。

EDIT2:在上面的链接中报告此问题的那个人似乎已经提供了合适的解决方案。现在只剩下尝试了..如果可行，我将其作为答案发布。

入口文件:

/*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 <john.wick@gmail.com>"
  ],
  "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 <john.wick@gmail.com>",
  "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

根据 EDIT2，这只是使其工作的修改:

修改了 Entryfile 的 require 部分:

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');

编辑

注册 contrib-ads 插件在 v6 中被“修复”。现在你应该简单地使用:

require('videojs-contrib-ads');