Question

我按照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不是函数

我相信我还应该在一些全球范围内包含播放器或广告，但我一直在努力工作。你能帮我解决一下吗？我是新手，还在学习，但似乎做得很好。

Answer 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比较熟悉。

度过愉快的一天。

Videojs-ima插件，其中requirejs不包括加载插件

1 个答案:

HTML

app.js