整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
天和大家交流一下HtmlTextView的使用，HtmlTextView是一個開源的原生安卓第三方控件，主要的用途是直接把web端的html內容解析后展示在安卓手機上。應用場景很多，比如很多新聞類APP在web端編輯入庫后是html的格式，這時候如果想顯示在手機上，HtmlTextView就是一個很好的選擇，當然有人會說谷歌自己的TextView通過一些方法也可以實現，但是我試過，效果簡直不能再差，而且使用起來很復雜。這個HtmlTextView有多好，話不多說，直接上圖：
在使用的時候，第一步是引入控件的依賴：
repositories {
jcenter()
}
dependencies {
compile 'org.sufficientlysecure:html-textview:4.0'
}引入依賴后有幾種不同的使用方式，根據自己實際的場景進行選擇：
大部分的html標簽都已經支持：
<p>
<div> handled exactly like <p>
<br>
<b>
<i>
<strong> (bug on some Android versions: generates italic)
<em> (bug on some Android versions: generates bold)
<u>
<tt>
<dfn>
<sub>
<sup>
<blockquote>
<cite>
<big>
<small>
<font color="..." face="...">
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
<a href="...">
<img src="...">最后，一個最重要的問題，也是我最近使用遇到的最大的問題：
當html里面有src或者href等的時候，如果不做處理，APP會出現無法跳轉至瀏覽器并且崩潰閃退的情況。解決這個問題的辦法就是在方法里添加對應的點擊事件，如下：
最近需要在web項目中顯示監控視頻，采用了webrtc+webrtc-streamer+coturn的方案實現，能夠在公網上做很低的延時，對于實時監控視頻有很好的效果，是目前來講比較好的一個選擇方案。
1、webrtc 用于視頻流的顯示。
2、webrtc-streamer負責去監控視頻主機（這里多數是NVR或DVR）去拉取RSTP視頻流，并轉發到Webrtc中進行顯示。
3、coturn用于webrtc與webrtc-streamer之間的通信穿透服務，主要作用是穿透做NAT穿透，讓雙方找到能互相找到。
網絡邏輯結構圖
一、webrtc-streamer安裝
這里采用的是CentOS 7系統，直接采用的Docker安裝，關于Docker安裝可以參考《Kubernetes安裝記錄》的docker部分。
docker pull mpromonet/webrtc-streamer
docker run -itd -p 8000:8000 --name webrtc-streamer mpromonet/webrtc-streamer -s120.92.19.150:3478 -tnoka:noka@120.92.19.150:3478這里后面的-t和-s參數分別指向cotum的strun和tun服務，這里同內一定要用自己搭建的穿透服務，webrtc-streamer內置的服務是指向goole提供的一個服務，國內訪問及其不穩定，關于cotum的安裝請參照官網。這里啟動好以后，就可以通過瀏覽器訪問8000端口的服務了，這里可以通過以下地址來驗證視頻流服是否成功。
http://ip:8000/webrtcstreamer.html?rtsp://admin:admin@ip:554/Streaming/Channels/101如果上面的地址能播放視頻，說明配置成功了，地址后面的參數是視頻流的地址。
二、web端視頻顯示代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- webrtc公用庫-->
<script src="/js/adapter.js"></script>
<!-- webrtc-streamer調用庫，來自webrtc-streamer-->
<script src="/js/webrtcstreamer.js"></script>
</head>
<body>
<!-- 視頻顯示部分 -->
<div id="play_div"></div>
<script>
var webRtcServerList = [];//視頻流服務對象部分
var urls=[
'rtsp://admin:HUAN1415@192.168.1.106:554/Streaming/Channels/102',//視頻流地址
'rtsp://admin:HUAN1415@210.201.225.44:554/Streaming/Channels/202'//視頻流地址
];
var rsurl='http://210.201.225.42:8000/';//webrtc-streamer服務地址
//---------創建視頻播放界面--------------------------------------------------------
function plays(idx){
var videoelt = document.createElement("video");//創建一個播放器
var vi_tag='videoTag_'+idx;//播放器的id
videoelt.id = vi_tag;//播放器id
videoelt.muted = true;
videoelt.width=500;
videoelt.height=600;
videoelt.controls=true;//開啟進度條
document.getElementById ("play_div").appendChild(videoelt);//添加播放器到界面中
var webRtcServer = new WebRtcStreamer(vi_tag,rsurl);//創建webrtc流對象
//連接視頻,參數1 視頻地址，參數2 音頻地址（這里沒有），參數3 連接參數(這里采用的是tcp,120秒超時等）
webRtcServer.connect(urls[idx],undefined,"rtptransport=tcp&timeout=120&width=320&height=0");
webRtcServerList[idx]=webRtcServer;//緩存視頻流對象
}
//----------頁面退出時關閉播放流---------------------
window.onbeforeunload = function() {
for(var i=0;i<webRtcServerList.length;i++){
webRtcServerList[i].disconnect();
}
}
//---------初始化加載視頻----------------------------
window.onload= function() {
for(var i=0;i<urls.length;i++){
plays(i);
}
}
</script>
</body>
</html>這樣就完成了整個項目實現，這里如果視頻沒有播放成功，最有可能是穿透服務的問題，需要檢查穿透服務。
前，瀏覽器只能展示本地安裝的字體。如果字體未安裝，網頁顯示效果會大打折扣。
為了解決這個問題，CSS 引入 web 字體，允許瀏覽器從服務器下載字體，下載完成后再重新渲染字體。
使用 web 字體前，需要了解常用的字體文件格式。
TTF 字體文件，即 TrueType 字體，是由蘋果和微軟在 20 世紀 80 年代末開發的字體標準。它是 macOS 和 Windows 操作系統使用最廣泛的字體格式。
OTF 字體文件，即 OpenType 字體，是一種可縮放的計算機字體格式。它建立在 TrueType 基礎上，是微軟的注冊商標。OpenType 字體目前在主要的計算機平臺上廣泛使用。
WOFF 字體文件，即 The Web Open Font Format 字體，是一種用于網頁的字體格式，2009 年開發，如今是 W3C（萬維網聯盟）的推薦標準。WOFF 本質是 OpenType 或 TrueType 字體，但是經過壓縮并附加額外的元數據。在帶寬受限的網絡中，WOFF 能更好的支持從服務器到客戶端的字體傳輸。
WOFF 2.0 字體文件，相比于 WOFF，提供了更高的壓縮效率。
SVG 字體，將 SVG 用作顯示文本時的字形。SVG 1.1 規范定義了一個字體規范，允許在 SVG 文檔中創建字體。
EOT 字體文件，即 Embedded OpenType Fonts 文件，是微軟設計的一種用于網頁的嵌入式字體，它是 OpenType 字體的緊湊形式。
不同字體格式的瀏覽器兼容性下圖所示：
不同字體格式的瀏覽器兼容性，截圖數據來自 w3schools.com
使用 @font-face CSS 指令定義自定義字體。使用前需要把字體文件放在服務器目錄，然后定義新的字體名稱，并指向字體所在位置。
以京華老宋體為例，這是一款可以免費商用的中文字體。下載字體文件后，放到和 index.html 同級的目錄，重命名為 jh-song.ttf。
下載字體文件
在 @font-face 指令內，使用 font-family 定義字體名稱，src 屬性定義字體文件路徑。
定義 web 字體
然后，像使用普通字體一樣，使用自定義字體樣式：
使用 web 字體
完
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
