使用videojs-ima插件捆绑videojs
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用videojs-ima插件捆绑videojs相关的知识,希望对你有一定的参考价值。
我正在尝试(已经很短的几天)来完成非常简单的任务:构建一个javascript文件捆绑所有必要的部分来播放视频与谷歌IMA广告,但我仍然面临一些错误(主要是player.ads is not function
)总是以某种方式连接到错误注册插件。我很感激任何建议。谢谢。
编辑:这个问题是already reported,但标记为优先级3,我没有时间等待。我相信还有另一种解决方案。
编辑2:似乎在上面链接中报告此问题的人已经提供了合适的解决方案。现在它仍然只是尝试它..如果它会工作,我发布它作为答案。
他打破了:
/*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"
}
}
答案
根据EDIT2,这只是修改,使其工作:
修改需要部分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');
编辑
注册contrib-ads插件在v6中已“修复”。现在你应该简单地使用:
require('videojs-contrib-ads');
以上是关于使用videojs-ima插件捆绑videojs的主要内容,如果未能解决你的问题,请参考以下文章