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; ~~~ 以上是視頻組件添加的代碼