video · 代码梳理

:-: 视频组件添加的代码 #### 一.在基础模块里添加视频组件也就是添加一个对象 ~~~ { name: "", // 这里最重要属性 type: "video", coverImage: contextPath + "/images/componenttypes/" + locale + "/basic/b1070.png", coverImageWidth: "90%", // 这里的名字在全局配置文件里设置 tip: vsLang.comp_tip_static_video } ~~~ #### 二.新建一个视频自定义服务 ~~~ vsPluginComponentModule.factory("$vcPlugin_basic_video", ["$vsPluginRegister", function (a) { console.log(a) var b = { // 这里是判断此组件要显示的几个全局设置配置项 showDataCategory: false, showBorderCategory: true, showBasicCategory: true, showFixedCategory: true, showEventCategory: false, buildDataDescription: function (d, g, f, c, e) {}, buildChartDescription: function (h, f, c, e) { console.log(c.description) var l = { name: "video", title: vsLang.video, groups: [] }; c.description.categories.push(l); h.component = c; console.log(h.component) // 这里是容器的宽度高度 h.calculateBackgroundSize = function (i) { return f.width() > f.height() ? "auto 100%" : "100% auto" }; var d = []; // rtmp://live.hkstv.hk.lxdns.com/live/hks console.log("dddd:" + h.component.config.content) // push进去html这里是以框架引入的视频，angular的双向数据绑定 d.push('<iframe ng-src={{"/js/definition.html?url='+h.component.config.content+'"}} height="100%" width="100%" frameborder="0" allowfullscreen></iframe>') var g = e(d.join(""))(h); f.append(g); // push进去组件 l.groups.push({ name: "video", title: { text: vsLang.video_url }, // 这里是html判断显示的设置项稍后下面有说明 elements: [{ title: "", type: "video", bind: "content" }] }); console.log(l) console.log("c-----"); console.log(c); console.log(h) console.log("c-----end"); } }; console.log(b) // 注册此组件在基本图库里 a.register("basic", "video", b); return null }]); ~~~ #### 三.修改mian.html ~~~  <div ng-switch-when="video" id="id324242343535435435"> <div style="margin:5px 0;" ng-show="element.showTitle == null || element.showTitle === true"> // 标题 {{element.title}} </div> <div class="col col-xs-12 ui input"> 双向数据绑定文本域，填写视频地址的 <textarea ng-model="component.config[element.bind]" style="width:100%;border:1px solid #DDD;" rows="5"></textarea> </div> <div class="col col-xs-12 ui bg-primary" style="text-align:left;padding-left:5px;line-heignt:20px;margin-top:15px;"> <p>支持http协议下的flv,f4v,mp4,支持rtmp视频流和rtmp视频回放,支持m3u8格式.</p> </div> </div>  ~~~ ps(在ComponentPanelCtrl这个控制器里，html写在cp-tab-content这个容器里面) * * * * * 四.修改design.js文件 ps:修改这里是分享包括预览页面，新添加的组件，必须在这里也要一一对应，不然在分享和预览是没有效果的，会报错， buildBasicComponent在这个函数里添加一个switch判断，判断条件就是第一步里添加的type属性也就是（video）看下面代码 * * * * * ~~~ case "video": // 组件大小函数 scope.calculateBackgroundSize = function (dom) { return element.width() > element.height() ? "auto 100%" : "100% auto" }; var html = []; // console.log(component.config.content) // html结构 html.push('<iframe src="/js/definition.html?url='+component.config.content+'" height="100%" width="100%" frameborder="0" allowfullscreen></iframe>') var el = $compile(html.join(""))(scope); element.append(el); break; ~~~ 以上是视频组件添加的代码