带需求的Videojs-ima插件(不包括加载插件)
带需求的Videojs-ima插件(不包括加载插件)
提问于 2016-04-01 09:32:58
我在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 : player.ads不是一个函数
我相信我也应该包括球员或广告在某些全球范围内，但我一直在努力工作，没有任何运气。你能帮我弄清楚吗？我刚开始需要to，还在学习，但它似乎做得很好。
回答 1
Stack Overflow用户
发布于 2016-04-02 00:17:39
您可能已经自己初始化了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');配置可能不是完美的，因为我对这个播放器和需求相对不太熟悉。
祝您今天愉快。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36352783
复制相关文章
相似问题
腾讯云开发者
