我按照 How can I use a videojs plugin when I also use RequireJS 中的示例进行操作我已经准备好了:
requirejs.config({
urlArgs: "bust=" + (new Date()).getTime(),
baseUrl: framework + '/',
//Framework paths
paths: {
'framework': framework,
'jquery': 'js/jquery.min',
'videojs': 'js/video.min',
'ads': 'js/videojs.ads.min',
'ima': 'js/videojs.ima',
'googleima': '//imasdk.googleapis.com/js/sdkloader/ima3',
'main': 'js/main',
'config': 'js/config',
'nearest': 'js/nearest.min',
},
shim: {
'nearest': ['jquery'],
'ads': {
deps: ['videojs-in-global'],
},
'ima': {
deps: ['ads']
},
}
});
define("videojs-in-global",["videojs"], function(videojs) {
window.videojs = videojs;
});
运行页面时出现错误:
videojs.ima.js:1127 Uncaught TypeError: player.ads is not a function
我相信我还应该在全局范围内包含播放器或广告，但我一直在努力但没有任何运气。你能帮我弄清楚吗？我是 requireJs 的新手，仍在学习，但它似乎做得非常出色。
最佳答案
您可能已经自己初始化了 player.ads (未提供相关信息)，并且 IMA 期望 player.ads 是一个函数，什么这是在初始化之前。因此，请勿在任何地方调用 player.ads()。
因此您的实现应该或多或少类似于:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//vjs.zencdn.net/5.0/video-js.min.css">
<link rel="stylesheet" href="css/videojs.ads.css">
<link rel="stylesheet" href="css/videojs.ima.css">
</head>
<body>
<video id="content_video" class="video-js vjs-default-skin" width="640" height="264" poster="http://vjs.zencdn.net/v/oceans.png" autoplay controls>
<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'/>
<source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm'/>
<source src="http://vjs.zencdn.net/v/oceans.ogv" type='video/ogg'/>
</video>
<script data-main="app.js" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js"></script>
</body>
</html>
app.js
requirejs.config({
paths: {
"videojs": "//vjs.zencdn.net/5.0/video.min",
"ads": "./libs/videojs.ads",
'ima': './libs/videojs.ima',
'googleima': '//imasdk.googleapis.com/js/sdkloader/ima3'
},
shim:{
'ima': {
deps: ['googleima','ads']
},
'ads': {
deps: ['videojs-in-global']
}
}
});
define("videojs-in-global",["videojs"], function(videojs) {
window.videojs = videojs;
});
requirejs(['ima'], function () {
var player = videojs('content_video', {}, function(){
/* solves problem, if vjs.ads isn't able to find Html5, like for me (properly version conflicts) */
videojs.Html5 = videojs.getComponent('Html5');
/* do not initialize ads, ima will do this */
// player.ads();
player.ima({
id: 'content_video',
adTagUrl: 'http://pubads.g.doubleclick.net/gampad/ads?sz=640x480&' +
'iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&' +
'impl=s&gdfp_req=1&env=vp&output=xml_vmap1&unviewed_position_start=1&' +
'cust_params=sample_ar%3Dpremidpostpod%26deployment%3Dgmf-js&cmsid=496&' +
'vid=short_onecue&correlator='
});
var contentPlayer = document.getElementById('content_video_html5_api');
if ((navigator.userAgent.match(/iPad/i) ||
navigator.userAgent.match(/Android/i)) &&
contentPlayer.hasAttribute('controls')) {
contentPlayer.removeAttribute('controls');
}
var startEvent = 'click';
if (navigator.userAgent.match(/iPhone/i) ||
navigator.userAgent.match(/iPad/i) ||
navigator.userAgent.match(/Android/i)) {
startEvent = 'tap';
}
player.ima.initializeAdDisplayContainer();
player.ima.requestAds();
player.play();
});
});
请注意，我在使用 videojs.ads 插件时遇到了问题。可能有些版本冲突。如果有人能告诉我们，当插件中未定义 vjs.Html5 时出了什么问题，我们会很高兴。
一个快速但可能肮脏的修复是添加以下行:
videojs.Html5 = videojs.getComponent('Html5');
配置可能不太完美，因为我对这个播放器和requirejs还不太熟悉。
祝你有美好的一天。
关于javascript - Videojs-ima 插件与 requirejs 不包括加载插件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36352783/