最近使用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;
});
结果浏览器报错:
意思是Tcplayer不是构造器。我检查了浏览器的加载情况,浏览器已经从源地址加载了该JS:
一开始我以为是该js与require.js不兼容所导致的,百度了半天也没找出个所以然,于是抱着试一试的心态咨询了腾讯的工程师,结果他们说建议如文档所示,使用script标签引入该js,这不是我要的答案。
但该组件是确确实实已经引入了的,否则浏览器会直接报undefined错误,不是构造器那会是什么呢?源文件已经作了混淆处理,直接看并不实际,我尝试用console.log查看Tcplayer,结果发现,require.js将TcPlayer引入为一个对象了,Tcplayer的构造器实际上是引入对象的子对象,于是我修改了代码,顺利通过:
var player = new TcPlayer.TcPlayer("id_test_video", {