EasyNVR攝像機無插件直播流媒體服務器前端構建之輸入框樣式的調整

EasyNVR授權方式分爲軟件的授權和硬件授權兩種方式,軟件授權需要在軟件輸入永久邀請碼可以激化永久授權

EasyNVR
起初我們的界面設計是爲了滿足功能的需求就是 ,用戶可以輸入激活碼提交,完成永久授權。
在實際的應用過程中我們發現由於輸入框自身大小的原因,我們的機器碼有事無法完全展示給用戶,不方便用戶的自我檢查激活碼是否準確。因此我們考慮使用可以方便拉伸改變大小的輸入框。

實施流程及遇到問題

對於可以自定義改變打的大小的輸入框樣式,第一個想到的是,

然而悲劇的是斌沒有很好的兼容性,可以很好的在chrome、Firefox瀏覽器完成自定義輸入框的大小拉伸,在IE瀏覽器下 就無法完成自定大小的拉伸了

爲了解決這個問題,互聯網再次給我幫助,

通過插件 Resizable | jQuery UI

完美是的實現了自定義拉伸,使用鼠標改變元素的尺寸

具體使用步驟

引入 jQuery UI

<script src="./adminlte-2.3.6/plugins/jquery-ui-1.12.1.custom/jquery-ui.js"></script> 

給指點的元素添加id方便使用插件

 <td>
   <textarea placeholder="輸入申請到的激活碼" id="activationCode" ></textarea>
   	</br>
   	<button id="check">提交</button></span>
  </td>

在js中實現該方法

	// 調用jquery-ui來完成自定義控制輸入框大小,默認300X50
	 $("#activationCode").resizable({ }); 

實現效果展示:

IN Chrome

EasyNVR

EasyNVR

IN IE

EasyNVR
EasyNVR


關於EasyNVR

EasyNVR能夠通過簡單的網絡攝像機通道配置,將傳統監控行業裏面的高清網絡攝像機IP Camera、NVR等具有RTSP協議輸出的設備接入到EasyNVR,EasyNVR能夠將這些視頻源的音視頻數據進行拉取,轉換爲RTMP/HLS,進行全平臺終端H5直播(Web、Android、iOS),並且EasyNVR能夠將視頻源的直播數據對接到第三方CDN網絡,實現互聯網級別的直播分發;

詳細說明:http://www.easynvr.com

點擊鏈接加入羣【EasyNVR解決方案】:383501345

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章