require.js 引入js文件提示 is not a construtor的可能原因与解决方案

最近使用ThinkPHP框架结合require.js进行前端开发,一个页面需要使用腾讯的TcPlayer播放器组件来播放直播视频,我在require.js的配置文件中引入了Tcplayer:

paths: {
        'bootstrap-table-commonsearch': 'bootstrap-table-commonsearch',
        'bootstrap-table-template': 'bootstrap-table-template',
        'tcplayer': 'http://imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.3.2',

然后在页面的代码定义了tcplayer对象,并编写了示例代码

define(['jquery', 'bootstrap', 'frontend','tcplayer'], function ($, undefined, Frontend, TcPlayer) {
	
    var validatoroptions = {
        invalid: function (form, errors) {
            $.each(errors, function (i, j) {
                Layer.msg(j);
            });
        }
    };
    
    var Controller = {
    	index: function (){
    		var player = new TcPlayer("id_test_video", {
    			"m3u8": "http://2157.liveplay.myqcloud.com/2157_358535a.m3u8", //请替换成实际可用的播放地址
    			"autoplay" : true,      //iOS 下 safari 浏览器,以及大部分移动端浏览器是不开放视频自动播放这个能力的
    			"poster" : "http:////csdnimg.cn/cdn/content-toolbar/csdn-logo_.png?v=20190924.1",
    			"width" :  '100%',//视频的显示宽度,请尽量使用视频分辨率宽度
    			"height" : '100%'//视频的显示高度,请尽量使用视频分辨率高度
    			});

    	}
    };
    return Controller;
});

结果浏览器报错:

require.js 引入js文件提示 is not a construtor的可能原因与解决方案_第1张图片

意思是Tcplayer不是构造器。我检查了浏览器的加载情况,浏览器已经从源地址加载了该JS:

require.js 引入js文件提示 is not a construtor的可能原因与解决方案_第2张图片

 

一开始我以为是该js与require.js不兼容所导致的,百度了半天也没找出个所以然,于是抱着试一试的心态咨询了腾讯的工程师,结果他们说建议如文档所示,使用script标签引入该js,这不是我要的答案。

但该组件是确确实实已经引入了的,否则浏览器会直接报undefined错误,不是构造器那会是什么呢?源文件已经作了混淆处理,直接看并不实际,我尝试用console.log查看Tcplayer,结果发现,require.js将TcPlayer引入为一个对象了,Tcplayer的构造器实际上是引入对象的子对象,于是我修改了代码,顺利通过:

var player = new TcPlayer.TcPlayer("id_test_video", {

 

你可能感兴趣的:(JS.网页显示)