視頻直播推流與拉流的實現

序言

最近在研究直播的彈幕，東西有點多，準備記錄一下免得自​​己忘了又要重新研究，也幫助有這方面需要的同學少走點彎路。關於直播的技術細節其實就是兩個方面一個是推流一個是拉流，而彈幕的實現核心在即時聊天，使用聊天室的就能實現，只是消息的展示方式不同而已。在大多數的項目中還是使用第三方的直播平臺實現推流功能，因此關於直播平臺的選擇也是至關重要。下面由我娓娓道來。

效果

爲了演示方便我把屏幕錄像上傳到優酷了，的英文這視頻地址

功能

1.緩衝進度

2.彈幕

3.橫豎屏切換

實現

1.直播SDK的選擇

提供直播功能的廠商有很多，比如七牛雲，樂視，百度雲，騰訊雲，金山雲，等等。功能也大同小異，常見的縮略圖，視頻錄製，轉碼，都可以實現。但是對於SDK的易用程度還是不敢恭維的。下面我說說我遇到的一些問題。

1.樂視

樂視雲移動直播

優點： 
樂視直播的註冊流程還是很方便的，選擇個人開發者，然後驗證身份信息就可以使用了，每人每月免費10GB的流量。

缺點

最大的缺點就是穩定性，至少在我測試的時候也就是2016年年9月份穩定性很差，不是說視頻的穩定性，而是推流的穩定性，我有一臺在同樣的網絡下我的體內X7能推流，但是魅藍NOTE2不能推流。然而體內X7推出去的流在電腦上用VLC能播放，在其他手機上顯示黑屏，既不報錯也沒畫面。隨後使用同樣的網絡，同樣的魅藍注2，百度的SDK就能推流。看來樂視的直播技術方面還有待改進，直接通。

2.七牛雲

七牛雲官網

優點 
態度好，服務周到，其他方面的不能再評價了，因爲沒有真正使用過，這的確很尷尬，不過態度的確很好，會有客服打電話過來詢問需求，會有技術支持人員主動溝通，這是很值得肯定的。

缺點 
倒不能算是缺點，可能算特點吧，七牛雲需要使用域名別名解析來做RTMP直播流域名，也就是說你要使用七牛雲必須要有一個備案過的域名，由於我司的域名我不能輕易去改，而且我也沒有備案過的域名，所以不能測試。

3.騰訊雲

還沒有通過審覈，效率太低。

4.阿里雲

也需要域名，跳過。

5.百度雲

百度音視頻直播LSS

優點

審覈速度挺快的，實名認證大概15分鐘搞定（這是我的速度，僅供參考），不需要域名，爲個人開發者免費提供10G的流量測試，這點很良心。而且功能很全面，推流很簡單下面是價格表：

缺點

企業用戶需要認證，否則單月最大流量爲1TB，個人用戶總流量限制在1000GB。

經過以上對比最終選擇了百度雲來實現直播。

2.及時聊天SDK的選擇

這裏邊倒沒有太多的考慮，環信，融雲，LeanCloud都可以，但是長期使用leancloud發現其文檔質量很高，SDK簡單易用。所以使用了LeanCloud來實現即時通訊。

LearnCloud Android的實時通信開發指南

3.彈幕實現

彈幕說白了就是聊天室，只是聊天室的消息需要在視頻節目上顯示而已，所以首先要實現一個聊天室，此處使用LeanCloud實現。

第一步：初始化

第二步：登錄

<code class="language-java hljs  has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">package</span> com.zgh.livedemo;<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.content.Intent;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.os.Bundle;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.support.v7.app.AppCompatActivity;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.text.TextUtils;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.view.View;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.widget.EditText;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.widget.Toast;<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> com.avos.avoscloud.im.v2.AVIMClient;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> com.avos.avoscloud.im.v2.AVIMException;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> com.avos.avoscloud.im.v2.callback.AVIMClientCallback;<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-class" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">class</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">LoginActivity</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">extends</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">AppCompatActivity</span> {</span><span style="box-sizing: border-box;"></span>
    EditText et_name;<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
    <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">protected</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onCreate</span>(Bundle savedInstanceState) {
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">super</span>.onCreate(savedInstanceState);<span style="box-sizing: border-box;"></span>
        setContentView(R.layout.activity_login);<span style="box-sizing: border-box;"></span>
        et_name = (EditText) findViewById(R.id.et_name);<span style="box-sizing: border-box;"></span>
        findViewById(R.id.btn_login).setOnClickListener(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> View.OnClickListener() {
            <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span>
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onClick</span>(View v) {<span style="box-sizing: border-box;"></span>
                String name = et_name.getText().toString();<span style="box-sizing: border-box;"></span>
                <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (TextUtils.isEmpty(name)) {<span style="box-sizing: border-box;"></span>
                    Toast.makeText(LoginActivity.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"登錄名不能爲空"</span>, Toast.LENGTH_SHORT).show();
                    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span>;<span style="box-sizing: border-box;"></span>
                }<span style="box-sizing: border-box;"></span>
                login(name);<span style="box-sizing: border-box;"></span>
            }<span style="box-sizing: border-box;"></span>
        });<span style="box-sizing: border-box;"></span>
    }<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">login</span>(String name) {
          <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//使用name作爲cliendID</span><span style="box-sizing: border-box;"></span>
        AVIMClient jerry = AVIMClient.getInstance(name);<span style="box-sizing: border-box;"></span>
        jerry.open(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> AVIMClientCallback() {<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
            <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span>
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">done</span>(AVIMClient client, AVIMException e) {
                <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (e == <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">null</span>) {<span style="box-sizing: border-box;"></span>
                    Toast.makeText(LoginActivity.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"登錄成功"</span>, Toast.LENGTH_SHORT).show();
                    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//保存client</span><span style="box-sizing: border-box;"></span>
                    MyApp.mClient = client;<span style="box-sizing: border-box;"></span>
                    startActivity(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> Intent(LoginActivity.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>, MainActivity.class));<span style="box-sizing: border-box;"></span>
                } <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span> {<span style="box-sizing: border-box;"></span>
                    Toast.makeText(LoginActivity.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"登錄失敗:"</span> + e.getMessage(), Toast.LENGTH_SHORT).show();<span style="box-sizing: border-box;"></span>
                }<span style="box-sizing: border-box;"></span>
            }<span style="box-sizing: border-box;"></span>
        });<span style="box-sizing: border-box;"></span>
    }<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">11</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">12</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">13</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">14</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">15</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">16</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">17</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">18</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">19</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">20</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">21</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">22</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">23</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">24</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">25</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">26</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">27</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">28</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">29</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">三十</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">31</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">32</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">33</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">34</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">35</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">36</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">37</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">38</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">39</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">40</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">41</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">42</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">43</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">44</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">45</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">46</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">47</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">48</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">49</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">50</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">51</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">52</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">53</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">54</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">55</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">56</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">57</span></li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">11</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">12</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">13</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">14</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">15</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">16</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">17</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">18</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">19</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">20</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">21</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">22</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">23</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">24</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">25</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">26</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">27</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">28</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">29</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">三十</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">31</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">32</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">33</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">34</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">35</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">36</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">37</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">38</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">39</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">40</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">41</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">42</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">43</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">44</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">45</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">46</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">47</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">48</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">49</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">50</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">51</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">52</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">53</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">54</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">55</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">56</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">57</span></li></ul>

第三步，進入聊天室

在進入直播界面的時候調用此方法，進入聊天室.conversationId應該從服務器獲取，此處用於測試使用了一個固定的ID。

<code class="hljs java has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;">
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">join</span>() {<span style="box-sizing: border-box;"></span>
        MyApp.mClient.open(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> AVIMClientCallback() {<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
            <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span>
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">done</span>(AVIMClient client, AVIMException e) {
                <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (e == <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">null</span>) {
                    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//登錄成功</span>
                    conv = client.getConversation(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"57d8b2445bbb50005e420535"</span>);<span style="box-sizing: border-box;"></span>
                    conv.join(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> AVIMConversationCallback() {
                        <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span>
                        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">done</span>(AVIMException e) {
                            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (e == <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">null</span>) {
                                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//加入成功</span>
                                Toast.makeText(MainActivity.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"加入聊天室成功"</span>, Toast.LENGTH_SHORT).show();<span style="box-sizing: border-box;"></span>
                                et_send.setEnabled(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span>);<span style="box-sizing: border-box;"></span>
                            } <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span> {<span style="box-sizing: border-box;"></span>
                                Toast.makeText(MainActivity.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"加入聊天室失敗："</span> + e.getMessage(), Toast.LENGTH_SHORT).show();<span style="box-sizing: border-box;"></span>
                                et_send.setEnabled(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">false</span>);<span style="box-sizing: border-box;"></span>
                                android.util.Log.i(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"zzz"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"加入聊天室失敗 :"</span> + e.getMessage());<span style="box-sizing: border-box;"></span>
                            }<span style="box-sizing: border-box;"></span>
                        }<span style="box-sizing: border-box;"></span>
                    });<span style="box-sizing: border-box;"></span>
                }<span style="box-sizing: border-box;"></span>
            }<span style="box-sizing: border-box;"></span>
        });<span style="box-sizing: border-box;"></span>
    }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">11</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">12</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">13</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">14</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">15</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">16</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">17</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">18</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">19</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">20</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">21</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">22</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">23</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">24</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">25</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">26</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">27</span></li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">11</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">12</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">13</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">14</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">15</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">16</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">17</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">18</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">19</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">20</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">21</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">22</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">23</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">24</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">25</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">26</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">27</span></li></ul>

登錄成功以後，在onResum的時候將此活動註冊爲消息處理者，在的onPause的時候取消註冊。而在應用程序的的onCreate的時候註冊一個默認的處理器，也就是說當APP在後頭運行的時候，通過默認處理器處理消息，即彈出狀態欄彈出通知，而在聊天界面由當前界面處理消息。

<code class="hljs java has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;">
    <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">protected</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onResume</span>() {
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">super</span>.onResume();<span style="box-sizing: border-box;"></span>
        AVIMMessageManager.registerMessageHandler(AVIMTextMessage.class, roomMessageHandler);<span style="box-sizing: border-box;"></span>
    }<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
    <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">protected</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onPause</span>() {
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">super</span>.onPause();<span style="box-sizing: border-box;"></span>
        AVIMMessageManager.unregisterMessageHandler(AVIMTextMessage.class, roomMessageHandler);<span style="box-sizing: border-box;"></span>
    }<span style="box-sizing: border-box;"></span>
</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">11</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">12</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">13</span></li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">11</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">12</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">13</span></li></ul>

在接收到消息以後把消息顯示在彈幕控件上。

<code class="hljs java has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;">
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-class" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">class</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">RoomMessageHandler</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">extends</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">AVIMMessageHandler</span> {</span>
        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//接收到消息後的處理邏輯</span>
        <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span>
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onMessage</span>(AVIMMessage message, AVIMConversation conversation, AVIMClient client) {
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (message <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">instanceof</span> AVIMTextMessage) {<span style="box-sizing: border-box;"></span>
                String info = ((AVIMTextMessage) message).getText();<span style="box-sizing: border-box;"></span>
                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//添加消息到屏幕</span><span style="box-sizing: border-box;"></span>
                addMsg(info);<span style="box-sizing: border-box;"></span>
            }<span style="box-sizing: border-box;"></span>
        }<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
    }<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">addMsg</span>(String msg) {<span style="box-sizing: border-box;"></span>
        TextView textView = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> TextView(MainActivity.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>);<span style="box-sizing: border-box;"></span>
        textView.setText(msg);<span style="box-sizing: border-box;"></span>
        ViewGroup.MarginLayoutParams params = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> ViewGroup.MarginLayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);<span style="box-sizing: border-box;"></span>
        params.setMargins(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>);<span style="box-sizing: border-box;"></span>
        textView.setLayoutParams(params);<span style="box-sizing: border-box;"></span>
        ll_room.addView(textView, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>);<span style="box-sizing: border-box;"></span>
        barrageView.addMessage(msg);<span style="box-sizing: border-box;"></span>
    }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">11</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">12</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">13</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">14</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">15</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">16</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">17</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">18</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">19</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">20</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">21</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">22</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">23</span></li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">11</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">12</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">13</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">14</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">15</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">16</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">17</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">18</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">19</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">20</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">21</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">22</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">23</span></li></ul>

彈幕的控件

<code class="hljs java has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">package</span> com.zgh.livedemo.view;<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.content.Context;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.graphics.Color;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.graphics.Rect;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.os.Handler;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.os.Message;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.text.TextPaint;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.util.AttributeSet;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.view.animation.AccelerateDecelerateInterpolator;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.view.animation.Animation;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.view.animation.TranslateAnimation;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.widget.RelativeLayout;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.widget.TextView;<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> java.util.ArrayList;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> java.util.List;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> java.util.Random;<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
<span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/**
 * Created by lixueyong on 16/2/19.
 */</span>
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-class" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">class</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">BarrageView</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">extends</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">RelativeLayout</span> {</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> Context mContext;
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> BarrageHandler mHandler = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> BarrageHandler();
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> Random random = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> Random(System.currentTimeMillis());
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">static</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">final</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">long</span> BARRAGE_GAP_MIN_DURATION = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1000</span>;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//兩個彈幕的最小間隔時間</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">static</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">final</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">long</span> BARRAGE_GAP_MAX_DURATION = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2000</span>;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//兩個彈幕的最大間隔時間</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> maxSpeed = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10000</span>;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//速度，ms</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> minSpeed = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5000</span>;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//速度，ms</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> maxSize = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">30</span>;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//文字大小，dp</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> minSize = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">15</span>;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//文字大小，dp</span><span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> totalHeight = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> lineHeight = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//每一行彈幕的高度</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> totalLine = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//彈幕的行數</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> List<String> messageList = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> ArrayList<>();
    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// private String[] itemText = {"是否需要幫忙", "what are you 弄啥來", "哈哈哈哈哈哈哈", "搶佔沙發。。。。。。", "************", "是否需要幫忙",</span>
    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//        "我不會輕易的狗帶", "嘿嘿", "這是我見過的最長長長長長長長長長長長的評論"};</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> textCount;
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//    private List<BarrageItem> itemList = new ArrayList<BarrageItem>();</span><span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-title" style="box-sizing: border-box;">BarrageView</span>(Context context) {
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>(context, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">null</span>);<span style="box-sizing: border-box;"></span>
    }<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-title" style="box-sizing: border-box;">BarrageView</span>(Context context, AttributeSet attrs) {
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>(context, attrs, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>);<span style="box-sizing: border-box;"></span>
    }<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-title" style="box-sizing: border-box;">BarrageView</span>(Context context, AttributeSet attrs, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> defStyleAttr) {
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">super</span>(context, attrs, defStyleAttr);<span style="box-sizing: border-box;"></span>
        mContext = context;<span style="box-sizing: border-box;"></span>
        init();<span style="box-sizing: border-box;"></span>
    }<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">init</span>() {
        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// textCount = itemText.length;</span><span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> duration = (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span>) ((BARRAGE_GAP_MAX_DURATION - BARRAGE_GAP_MIN_DURATION) * Math.random());<span style="box-sizing: border-box;"></span>
        mHandler.sendEmptyMessageDelayed(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, duration);<span style="box-sizing: border-box;"></span>
    }<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">addMessage</span>(String message) {<span style="box-sizing: border-box;"></span>
        messageList.add(message);<span style="box-sizing: border-box;"></span>
    }<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
    <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onWindowFocusChanged</span>(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">boolean</span> hasWindowFocus) {
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">super</span>.onWindowFocusChanged(hasWindowFocus);<span style="box-sizing: border-box;"></span>
        totalHeight = getMeasuredHeight();<span style="box-sizing: border-box;"></span>
        lineHeight = getLineHeight();<span style="box-sizing: border-box;"></span>
        totalLine = totalHeight / lineHeight;<span style="box-sizing: border-box;"></span>
    }<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">generateItem</span>() {
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (messageList.size() > <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>) {<span style="box-sizing: border-box;"></span>
            BarrageItem item = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> BarrageItem();<span style="box-sizing: border-box;"></span>
            String tx = messageList.remove(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>);
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> sz = (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span>) (minSize + (maxSize - minSize) * Math.random());<span style="box-sizing: border-box;"></span>
            item.textView = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> TextView(mContext);<span style="box-sizing: border-box;"></span>
            item.textView.setText(tx);<span style="box-sizing: border-box;"></span>
            item.textView.setTextSize(sz);<span style="box-sizing: border-box;"></span>
            item.textView.setTextColor(Color.rgb(random.nextInt(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">256</span>), random.nextInt(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">256</span>), random.nextInt(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">256</span>)));<span style="box-sizing: border-box;"></span>
            item.textMeasuredWidth = (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span>) getTextWidth(item, tx, sz);<span style="box-sizing: border-box;"></span>
            item.moveSpeed = (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span>) (minSpeed + (maxSpeed - minSpeed) * Math.random());
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (totalLine == <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>) {<span style="box-sizing: border-box;"></span>
                totalHeight = getMeasuredHeight();<span style="box-sizing: border-box;"></span>
                lineHeight = getLineHeight();<span style="box-sizing: border-box;"></span>
                totalLine = totalHeight / lineHeight;<span style="box-sizing: border-box;"></span>
            }<span style="box-sizing: border-box;"></span>
            item.verticalPos = random.nextInt(totalLine) * lineHeight;<span style="box-sizing: border-box;"></span>
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//        itemList.add(item);</span><span style="box-sizing: border-box;"></span>
            showBarrageItem(item);<span style="box-sizing: border-box;"></span>
        }<span style="box-sizing: border-box;"></span>
    }<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">showBarrageItem</span>(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">final</span> BarrageItem item) {<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> leftMargin = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.getRight() - <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.getLeft() - <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.getPaddingLeft();<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
        LayoutParams params = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);<span style="box-sizing: border-box;"></span>
        params.addRule(RelativeLayout.ALIGN_PARENT_TOP);<span style="box-sizing: border-box;"></span>
        params.topMargin = item.verticalPos;<span style="box-sizing: border-box;"></span>
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.addView(item.textView, params);<span style="box-sizing: border-box;"></span>
        Animation anim = generateTranslateAnim(item, leftMargin);<span style="box-sizing: border-box;"></span>
        anim.setAnimationListener(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> Animation.AnimationListener() {
            <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span>
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onAnimationStart</span>(Animation animation) {<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
            }<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
            <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span>
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onAnimationEnd</span>(Animation animation) {<span style="box-sizing: border-box;"></span>
                item.textView.clearAnimation();<span style="box-sizing: border-box;"></span>
                BarrageView.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.removeView(item.textView);<span style="box-sizing: border-box;"></span>
            }<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
            <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span>
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onAnimationRepeat</span>(Animation animation) {<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
            }<span style="box-sizing: border-box;"></span>
        });<span style="box-sizing: border-box;"></span>
        item.textView.startAnimation(anim);<span style="box-sizing: border-box;"></span>
    }<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> TranslateAnimation <span class="hljs-title" style="box-sizing: border-box;">generateTranslateAnim</span>(BarrageItem item, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> leftMargin) {<span style="box-sizing: border-box;"></span>
        TranslateAnimation anim = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> TranslateAnimation(leftMargin, -item.textMeasuredWidth, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>);<span style="box-sizing: border-box;"></span>
        anim.setDuration(item.moveSpeed);<span style="box-sizing: border-box;"></span>
        anim.setInterpolator(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> AccelerateDecelerateInterpolator());<span style="box-sizing: border-box;"></span>
        anim.setFillAfter(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span>);
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> anim;<span style="box-sizing: border-box;"></span>
    }<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
    <span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/**
     * 計算TextView中字符串的長度
     *
     *<span class="hljs-javadoctag" style="color: rgb(102, 0, 102); box-sizing: border-box;"> @param</span> text 要計算的字符串
     *<span class="hljs-javadoctag" style="color: rgb(102, 0, 102); box-sizing: border-box;"> @param</span> Size 字體大小
     *<span class="hljs-javadoctag" style="color: rgb(102, 0, 102); box-sizing: border-box;"> @return</span> TextView中字符串的長度
     */</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span> <span class="hljs-title" style="box-sizing: border-box;">getTextWidth</span>(BarrageItem item, String text, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span> Size) {<span style="box-sizing: border-box;"></span>
        Rect bounds = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> Rect();<span style="box-sizing: border-box;"></span>
        TextPaint paint;<span style="box-sizing: border-box;"></span>
        paint = item.textView.getPaint();<span style="box-sizing: border-box;"></span>
        paint.getTextBounds(text, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, text.length(), bounds);
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> bounds.width();<span style="box-sizing: border-box;"></span>
    }<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
    <span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/**
     * 獲得每一行彈幕的最大高度
     *
     *<span class="hljs-javadoctag" style="color: rgb(102, 0, 102); box-sizing: border-box;"> @return</span>
     */</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> <span class="hljs-title" style="box-sizing: border-box;">getLineHeight</span>() {
      <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*  BarrageItem item = new BarrageItem();
        String tx = itemText[0];
        item.textView = new TextView(mContext);
        item.textView.setText(tx);
        item.textView.setTextSize(maxSize);

        Rect bounds = new Rect();
        TextPaint paint;
        paint = item.textView.getPaint();
        paint.getTextBounds(tx, 0, tx.length(), bounds);
        return bounds.height();*/</span>
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">50</span>;<span style="box-sizing: border-box;"></span>
    }<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
    class BarrageHandler extends Handler {<span style="box-sizing: border-box;"></span>
        <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span>
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">handleMessage</span>(Message msg) {
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">super</span>.handleMessage(msg);<span style="box-sizing: border-box;"></span>
            generateItem();<span style="box-sizing: border-box;"></span>
            <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//每個彈幕產生的間隔時間隨機</span>
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> duration = (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span>) ((BARRAGE_GAP_MAX_DURATION - BARRAGE_GAP_MIN_DURATION) * Math.random());
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.sendEmptyMessageDelayed(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, duration);<span style="box-sizing: border-box;"></span>
        }<span style="box-sizing: border-box;"></span>
    }<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">11</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">12</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">13</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">14</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">15</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">16</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">17</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">18</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">19</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">20</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">21</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">22</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">23</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">24</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">25</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">26</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">27</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">28</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">29</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">三十</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">31</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">32</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">33</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">34</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">35</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">36</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">37</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">38</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">39</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">40</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">41</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">42</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">43</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">44</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">45</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">46</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">47</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">48</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">49</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">50</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">51</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">52</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">53</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">54</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">55</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">56</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">57</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">58</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">59</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">60</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">61</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">62</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">63</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">64</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">65</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">66</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">67</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">68</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">69</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">70</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">71</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">72</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">73</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">74</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">75</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">76</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">77</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">78</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">79</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">80</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">81</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">82</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">83</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">84</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">85</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">86</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">87</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">88</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">89</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">90</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">91</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">92</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">93</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">94</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">95</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">96</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">97</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">98</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">99</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">100</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">101</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">102</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">103</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">104</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">105</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">106</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">107</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">108</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">109</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">110</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">111</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">112</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">113</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">114</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">115</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">116</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">117</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">118</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">119</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">120</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">121</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">122</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">123</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">124</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">125</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">126</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">127</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">128</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">129</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">130</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">131</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">132</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">133</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">134</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">135</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">136</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">137</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">138</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">139</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">140</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">141</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">142</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">143</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">144</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">145</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">146</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">147</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">148</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">149</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">150</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">151</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">152</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">153</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">154</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">155</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">156</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">157</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">158</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">159</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">160</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">161</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">162</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">163</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">164</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">165</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">166</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">167</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">168</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">169</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">170</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">171</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">172</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">173</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">174</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">175</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">176</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">177</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">178</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">179</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">180</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">181</span></li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">11</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">12</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">13</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">14</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">15</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">16</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">17</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">18</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">19</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">20</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">21</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">22</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">23</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">24</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">25</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">26</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">27</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">28</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">29</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">三十</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">31</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">32</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">33</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">34</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">35</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">36</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">37</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">38</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">39</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">40</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">41</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">42</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">43</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">44</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">45</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">46</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">47</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">48</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">49</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">50</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">51</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">52</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">53</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">54</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">55</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">56</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">57</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">58</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">59</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">60</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">61</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">62</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">63</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">64</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">65</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">66</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">67</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">68</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">69</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">70</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">71</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">72</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">73</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">74</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">75</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">76</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">77</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">78</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">79</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">80</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">81</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">82</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">83</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">84</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">85</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">86</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">87</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">88</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">89</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">90</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">91</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">92</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">93</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">94</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">95</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">96</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">97</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">98</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">99</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">100</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">101</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">102</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">103</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">104</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">105</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">106</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">107</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">108</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">109</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">110</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">111</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">112</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">113</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">114</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">115</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">116</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">117</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">118</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">119</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">120</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">121</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">122</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">123</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">124</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">125</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">126</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">127</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">128</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">129</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">130</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">131</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">132</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">133</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">134</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">135</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">136</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">137</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">138</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">139</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">140</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">141</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">142</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">143</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">144</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">145</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">146</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">147</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">148</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">149</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">150</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">151</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">152</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">153</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">154</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">155</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">156</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">157</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">158</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">159</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">160</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">161</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">162</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">163</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">164</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">165</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">166</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">167</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">168</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">169</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">170</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">171</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">172</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">173</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">174</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">175</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">176</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">177</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">178</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">179</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">180</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">181</span></li></ul>

剩下的細節看演示吧。

4.視頻播放

視頻的播放使用的是vitamio框架關於具體的請參考API這裏這裏

需要注意的是在狀態的獲取，通過設置不同的監聽來實現的。

<code class="hljs java has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;">     mVideoView.setOnInfoListener(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> MediaPlayer.OnInfoListener() {
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">boolean</span> <span class="hljs-title" style="box-sizing: border-box;">onInfo</span>(MediaPlayer mp, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> what, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> extra) {
                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//緩衝開始</span>
                <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (what == MediaPlayer.MEDIA_INFO_BUFFERING_START) {<span style="box-sizing: border-box;"></span>
                    layout_loading.setVisibility(View.VISIBLE);<span style="box-sizing: border-box;"></span>
                    android.util.Log.i(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"zzz"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"onStart"</span>);
                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//緩衝結束</span>
                } <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (what == MediaPlayer.MEDIA_INFO_BUFFERING_END) {
                    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//此接口每次回調完START就回調END,若不加上判斷就會出現緩衝圖標一閃一閃的卡頓現象</span>
                    android.util.Log.i(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"zzz"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"onEnd"</span>);<span style="box-sizing: border-box;"></span>
                    layout_loading.setVisibility(View.GONE);<span style="box-sizing: border-box;"></span>
                 <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//   mp.start();</span><span style="box-sizing: border-box;"></span>
                    mVideoView.start();<span style="box-sizing: border-box;"></span>
                }<span style="box-sizing: border-box;"></span>
                <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span>;<span style="box-sizing: border-box;"></span>
            }<span style="box-sizing: border-box;"></span>
        });<span style="box-sizing: border-box;"></span>
        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//獲取緩存百分比</span>
        mVideoView.setOnBufferingUpdateListener(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> MediaPlayer.OnBufferingUpdateListener() {
            <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span>
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onBufferingUpdate</span>(MediaPlayer mp, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> percent) {
                <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span>(!mp.isPlaying()) {<span style="box-sizing: border-box;"></span>
                    layout_loading.setVisibility(View.VISIBLE);<span style="box-sizing: border-box;"></span>
                    tv_present.setText(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"正在緩衝"</span> + percent + <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"%"</span>);<span style="box-sizing: border-box;"></span>
                }<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span>{<span style="box-sizing: border-box;"></span>
                    layout_loading.setVisibility(View.GONE);<span style="box-sizing: border-box;"></span>
                }<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
            }<span style="box-sizing: border-box;"></span>
        });<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
        mVideoView.setOnPreparedListener(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> MediaPlayer.OnPreparedListener() {
            <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span>
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onPrepared</span>(MediaPlayer mediaPlayer) {<span style="box-sizing: border-box;"></span>
                mediaPlayer.setPlaybackSpeed(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.0</span>f);<span style="box-sizing: border-box;"></span>
            }<span style="box-sizing: border-box;"></span>
        });<span style="box-sizing: border-box;"></span>
        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//出錯處理</span>
        mVideoView.setOnErrorListener(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> MediaPlayer.OnErrorListener() {
            <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span>
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">boolean</span> <span class="hljs-title" style="box-sizing: border-box;">onError</span>(MediaPlayer mp, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> what, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> extra) {<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
                tv_present.setText(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"加載失敗"</span>);
                <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span>;<span style="box-sizing: border-box;"></span>
            }<span style="box-sizing: border-box;"></span>
        });</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">11</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">12</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">13</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">14</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">15</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">16</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">17</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">18</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">19</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">20</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">21</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">22</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">23</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">24</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">25</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">26</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">27</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">28</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">29</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">三十</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">31</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">32</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">33</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">34</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">35</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">36</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">37</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">38</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">39</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">40</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">41</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">42</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">43</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">44</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">45</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">46</span></li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">11</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">12</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">13</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">14</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">15</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">16</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">17</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">18</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">19</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">20</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">21</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">22</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">23</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">24</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">25</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">26</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">27</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">28</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">29</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">三十</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">31</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">32</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">33</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">34</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">35</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">36</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">37</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">38</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">39</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">40</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">41</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">42</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">43</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">44</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">45</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">46</span></li></ul>

還有就是的MediaController的使用，可以參考農民伯伯的vitamio中文API

需要注意的是在XML中使用的MediaController時需要這樣使用位置爲VideoView之上，高度爲需要顯示的控制條的高度，內部需要包括控制控件，ID必須爲指定的ID，佈局可以參考源碼中這個文件 

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;">  <io<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.vov</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.vitamio</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.widget</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.MediaController</span>
            android:id=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@+id/mediacontroller"</span>
            android:layout_width=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"match_parent"</span>
            android:layout_height=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"40dp"</span>
            android:layout_alignParentBottom=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"true"</span>
            android:background=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#ff0000"</span>><span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
            <RelativeLayout<span style="box-sizing: border-box;"></span>
                android:layout_width=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"match_parent"</span>
                android:layout_height=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"wrap_content"</span>
                android:orientation=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"horizontal"</span>><span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
                <ImageButton<span style="box-sizing: border-box;"></span>
                    android:id=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@+id/mediacontroller_play_pause"</span>
                    android:layout_width=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"wrap_content"</span>
                    android:layout_height=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"wrap_content"</span>
                    android:layout_centerVertical=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"true"</span>
                    android:layout_marginLeft=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"5dp"</span>
                    android:background=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@drawable/mediacontroller_button"</span>
                    android:contentDescription=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@string/mediacontroller_play_pause"</span>
                    android:src=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@drawable/mediacontroller_pause"</span> /><span style="box-sizing: border-box;"></span>
            </RelativeLayout><span style="box-sizing: border-box;"></span>
        </io<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.vov</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.vitamio</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.widget</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.MediaController</span>></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">11</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">12</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">13</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">14</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">15</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">16</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">17</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">18</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">19</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">20</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">21</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">22</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">23</span></li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">11</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">12</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">13</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">14</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">15</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">16</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">17</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">18</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">19</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">20</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">21</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">22</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">23</span></li></ul>

5.視頻的全屏模式

其核心的邏輯是點擊按鈕，改變屏幕方向，在改變方向的時候隱藏聊天室，輸入框等。同時改變控件的大小。要讓活動在屏幕切換的時候不重新創建需要添加這個選項。

<code class="hljs bash has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;">  android:configChanges=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"keyboardHidden|orientation|screenSize"</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li></ul>

核心代碼

<code class="language-java hljs  has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">fullScreen</span>() {
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (isScreenOriatationPortrait(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>)) {<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 當屏幕是豎屏時</span>
            full(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span>);
            <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 點擊後變橫屏</span><span style="box-sizing: border-box;"></span>
            setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);<span style="box-sizing: border-box;"></span>
            <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 設置當前activity爲橫屏</span>
            <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 當橫屏時 把除了視頻以外的都隱藏</span>
            <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//隱藏其他組件的代碼</span><span style="box-sizing: border-box;"></span>
            ll_room.setVisibility(View.GONE);<span style="box-sizing: border-box;"></span>
            et_send.setVisibility(View.GONE);<span style="box-sizing: border-box;"></span>
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> width=getResources().getDisplayMetrics().widthPixels;
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> height=getResources().getDisplayMetrics().heightPixels;<span style="box-sizing: border-box;"></span>
            layout_video.setLayoutParams(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> LinearLayout.LayoutParams(height, width));<span style="box-sizing: border-box;"></span>
            mVideoView.setLayoutParams(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> RelativeLayout.LayoutParams(height,width));<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
        } <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span> {<span style="box-sizing: border-box;"></span>
            full(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">false</span>);<span style="box-sizing: border-box;"></span>
            setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 設置當前activity爲豎屏</span>
            <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//顯示其他組件</span><span style="box-sizing: border-box;"></span>
            ll_room.setVisibility(View.VISIBLE);<span style="box-sizing: border-box;"></span>
            et_send.setVisibility(View.VISIBLE);<span style="box-sizing: border-box;"></span>
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> width=getResources().getDisplayMetrics().heightPixels;
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> height= (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span>) (width*<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">9.0</span>/<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">16</span>);<span style="box-sizing: border-box;"></span>
            layout_video.setLayoutParams(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> LinearLayout.LayoutParams(width, height));<span style="box-sizing: border-box;"></span>
            mVideoView.setLayoutParams(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> RelativeLayout.LayoutParams(width,height));<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
        }<span style="box-sizing: border-box;"></span>
    }<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//動態隱藏狀態欄</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">full</span>(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">boolean</span> enable) {
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (enable) {<span style="box-sizing: border-box;"></span>
            WindowManager.LayoutParams lp = getWindow().getAttributes();<span style="box-sizing: border-box;"></span>
            lp.flags |= WindowManager.LayoutParams.FLAG_FULLSCREEN;<span style="box-sizing: border-box;"></span>
            getWindow().setAttributes(lp);<span style="box-sizing: border-box;"></span>
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);<span style="box-sizing: border-box;"></span>
        } <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span> {<span style="box-sizing: border-box;"></span>
            WindowManager.LayoutParams attr = getWindow().getAttributes();<span style="box-sizing: border-box;"></span>
            attr.flags &= (~WindowManager.LayoutParams.FLAG_FULLSCREEN);<span style="box-sizing: border-box;"></span>
            getWindow().setAttributes(attr);<span style="box-sizing: border-box;"></span>
            getWindow().clearFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);<span style="box-sizing: border-box;"></span>
        }<span style="box-sizing: border-box;"></span>
    }<span style="box-sizing: border-box;"></span>
</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">11</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">12</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">13</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">14</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">15</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">16</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">17</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">18</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">19</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">20</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">21</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">22</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">23</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">24</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">25</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">26</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">27</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">28</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">29</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">三十</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">31</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">32</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">33</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">34</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">35</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">36</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">37</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">38</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">39</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">40</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">41</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">42</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">43</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">44</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">45</span></li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">11</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">12</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">13</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">14</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">15</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">16</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">17</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">18</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">19</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">20</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">21</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">22</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">23</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">24</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">25</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">26</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">27</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">28</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">29</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">三十</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">31</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">32</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">33</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">34</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">35</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">36</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">37</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">38</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">39</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">40</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">41</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">42</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">43</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">44</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">45</span></li></ul>

演示

關於演示中的配置信息，我抽取到相關的配置接口中了，大家只需要配置好就行了

下載地址

<code class="hljs java has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">package</span> com.zgh.livedemo;<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
<span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/**
 * Created by zhuguohui on 2016/9/20.
 */</span>
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-class" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">interface</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">Config</span> {</span>
    <span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/**
     * learnCloud APP_ID
     */</span>
    String APP_ID = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">""</span>;
    <span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/**
     * learnCloud APP_KEY
     */</span>
    String APP_KEY = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">""</span>;
    <span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/**
     * learnCloud 聊天室ID
     */</span>
    String CONVERSATION_ID = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">""</span>;
    <span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/**
     * rtmp 視頻地址
     */</span>
    String VIDEO_URL = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">""</span>;<span style="box-sizing: border-box;"></span>
}<span style="box-sizing: border-box;"></span>
</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">11</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">12</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">13</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">14</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">15</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">16</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">17</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">18</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">19</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">20</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">21</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">22</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">23</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">24</span></li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">11</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">12</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">13</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">14</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">15</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">16</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">17</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">18</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">19</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">20</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">21</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">22</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">23</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">24</span></li></ul>

關於推流用的是百度直播SDK的官方的演示