带有requirejs的Videojs-ima插件不包括加载插件答案

【问题标题】：Videojs-ima plugin with requirejs not including plugins on load带有requirejs的Videojs-ima插件不包括加载插件
【发布时间】：2016-04-02 12:14:48
【问题描述】：

我按照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 的新手，还在学习，但它似乎做得很好。

【问题讨论】：

标签： javascript requirejs video.js vast google-ima

【解决方案1】：

您可能已经自己初始化了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比较不熟悉。

祝你有美好的一天。

【讨论】：