乐码库:一个极速、放心、纯净的下载站! 更新: 资源发布
  • 您的位置:首页 > 技术文档 > AndRoid > Android 实现仿网络直播弹幕功能详解及实例
  • 收藏本页
      Android 实现仿网络直播弹幕功能详解及实例
      发布时间:2016-12-21 08:07:07 关键词: Android,网络直播弹幕,Android,网络直播弹幕如何实现,Android,如何实现网络直播弹幕的功能
      内容简介:这篇文章主要介绍了Android 实现仿网络直播弹幕功能详解的相关资料,并附实例代码及实现效果图,需要的朋友可以参考下

    Android 网络直播弹幕

                   最近看好多网络电视,播放器及直播都有弹幕功能,自己周末捣鼓下并实现,以下是网上的资料,大家可以看下。

    现在网络直播越来越火,网络主播也逐渐成为一种新兴职业,对于网络直播,弹幕功能是必须要有的,如下图:


    首先来分析一下,这个弹幕功能是怎么实现的,首先在最下面肯定是一个游戏界面View,然后游戏界面上有弹幕View,弹幕的View必须要做成完全透明的,这样即使覆盖在游戏界面的上方也不会影响到游戏的正常观看,只有当有人发弹幕消息时,再将消息绘制到弹幕的View上面就可以了,下方肯定还有有操作界面View,可以让用户来发弹幕和送礼物的功能,原理示意图如下所示:


    参照原理图,下面一步一步来实现这个功能。

    实现视频的播放

    activity_main.xml

    <RelativeLayout 
     xmlns:android="http://schemas.android.com/apk/res/android" 
     android:id="@+id/activity_main" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:background="#000"> 
     
     <VideoView 
      android:id="@+id/video_view" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_centerInParent="true"/> 
    </RelativeLayout> 

    MainActivity.java

    package com.jackie.bombscreen; 
     
    import android.os.Build; 
    import android.os.Bundle; 
    import android.os.Environment; 
    import android.support.v7.app.AppCompatActivity; 
    import android.view.View; 
    import android.widget.VideoView; 
     
    public class MainActivity extends AppCompatActivity { 
     @Override 
     protected void onCreate(Bundle savedInstanceState) { 
      super.onCreate(savedInstanceState); 
      setContentView(R.layout.activity_main); 
      VideoView videoView = (VideoView) findViewById(R.id.video_view); 
      videoView.setVideoPath(Environment.getExternalStorageDirectory() + "/xiaoxingyun.mp4"); 
      videoView.start(); 
     } 
      
     @Override 
     public void onWindowFocusChanged(boolean hasFocus) { 
      super.onWindowFocusChanged(hasFocus); 
      if (hasFocus && Build.VERSION.SDK_INT >= 19) { 
       View decorView = getWindow().getDecorView(); 
       decorView.setSystemUiVisibility( 
         View.SYSTEM_UI_FLAG_LAYOUT_STABLE 
           | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION 
           | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN 
           | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION 
           | View.SYSTEM_UI_FLAG_FULLSCREEN 
           | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY); 
      } 
     } 
    } 

    最后别忘了设置AndroidMainfest.xml


    效果如下:


    实现弹幕的效果

    接下来我们开始实现弹幕效果。弹幕其实也就是一个自定义的View,它的上面可以显示类似于跑马灯的文字效果。观众们发表的评论都会在弹幕上显示出来,但又会很快地移出屏幕,既可以起到互动的作用,同时又不会影响视频的正常观看。

    我们可以自己来编写这样的一个自定义View,当然也可以直接使用网上现成的开源项目。那么为了能够简单快速地实现弹幕效果,这里我就准备直接使用由哔哩哔哩开源的弹幕效果库DanmakuFlameMaster。

    DanmakuFlameMaster库的项目主页地址是:<a href="http://xiazai.jb51.net/201611/yuanma/DanmakuFlameMaster-master(jb51.net).rar">http://xiazai.jb51.net/201611/yuanma/DanmakuFlameMaster-master(jb51.net).rar

    添加build.gradle依赖

    compile 'com.github.ctiao:DanmakuFlameMaster:0.5.3'

    <?xml version="1.0" encoding="utf-8"?> 
    <RelativeLayout 
     xmlns:android="http://schemas.android.com/apk/res/android" 
     android:id="@+id/activity_main" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:background="#000"> 
     
     <VideoView 
      android:id="@+id/video_view" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_centerInParent="true"/> 
     
     <master.flame.danmaku.ui.widget.DanmakuView 
      android:id="@+id/danmaku_view" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" /> 
    </RelativeLayout>

    修改MainActivity.java

    package com.jackie.bombscreen; 
     
    import android.graphics.Color; 
    import android.os.Build; 
    import android.os.Bundle; 
    import android.os.Environment; 
    import android.support.v7.app.AppCompatActivity; 
    import android.view.View; 
    import android.widget.VideoView; 
     
    import java.util.Random; 
     
    import master.flame.danmaku.controller.DrawHandler; 
    import master.flame.danmaku.danmaku.model.BaseDanmaku; 
    import master.flame.danmaku.danmaku.model.DanmakuTimer; 
    import master.flame.danmaku.danmaku.model.IDanmakus; 
    import master.flame.danmaku.danmaku.model.android.DanmakuContext; 
    import master.flame.danmaku.danmaku.model.android.Danmakus; 
    import master.flame.danmaku.danmaku.parser.BaseDanmakuParser; 
    import master.flame.danmaku.ui.widget.DanmakuView; 
     
    public class MainActivity extends AppCompatActivity { 
     private boolean mIsShowDanmaku; 
     private DanmakuView mDanmakuView; 
     private DanmakuContext mDanmakuContext; 
     
     private BaseDanmakuParser parser = new BaseDanmakuParser() { 
      @Override 
      protected IDanmakus parse() { 
       return new Danmakus(); 
      } 
     }; 
     
     @Override 
     protected void onCreate(Bundle savedInstanceState) { 
      super.onCreate(savedInstanceState); 
      setContentView(R.layout.activity_main); 
      VideoView videoView = (VideoView) findViewById(R.id.video_view); 
      videoView.setVideoPath(Environment.getExternalStorageDirectory() + "/xiaoxingyun.mp4"); 
      videoView.start(); 
     
      mDanmakuView = (DanmakuView) findViewById(R.id.danmaku_view); 
      mDanmakuView.enableDanmakuDrawingCache(true); 
      mDanmakuView.setCallback(new DrawHandler.Callback() { 
       @Override 
       public void prepared() { 
        mIsShowDanmaku = true; 
        mDanmakuView.start(); 
        generateSomeDanmaku(); 
       } 
     
       @Override 
       public void updateTimer(DanmakuTimer timer) { 
     
       } 
     
       @Override 
       public void danmakuShown(BaseDanmaku danmaku) { 
     
       } 
     
       @Override 
       public void drawingFinished() { 
     
       } 
      }); 
     
      mDanmakuContext = DanmakuContext.create(); 
      mDanmakuView.prepare(parser, mDanmakuContext); 
     } 
     
     /** 
      * 向弹幕View中添加一条弹幕 
      * @param content  弹幕的具体内容 
      * @param withBorder 弹幕是否有边框 
      */ 
     private void addDanmaku(String content, boolean withBorder) { 
      BaseDanmaku danmaku = mDanmakuContext.mDanmakuFactory.createDanmaku(BaseDanmaku.TYPE_SCROLL_RL); 
      danmaku.text = content; 
      danmaku.padding = 5; 
      danmaku.textSize = sp2px(20); 
      danmaku.textColor = Color.WHITE; 
      danmaku.setTime(mDanmakuView.getCurrentTime()); 
      if (withBorder) { 
       danmaku.borderColor = Color.GREEN; 
      } 
      mDanmakuView.addDanmaku(danmaku); 
     } 
     
     /** 
      * 随机生成一些弹幕内容以供测试 
      */ 
     private void generateSomeDanmaku() { 
      new Thread(new Runnable() { 
       @Override 
       public void run() { 
        while(mIsShowDanmaku) { 
         int time = new Random().nextInt(300); 
         String content = "" + time + time; 
         addDanmaku(content, false); 
         try { 
          Thread.sleep(time); 
         } catch (InterruptedException e) { 
          e.printStackTrace(); 
         } 
        } 
       } 
      }).start(); 
     } 
     
     /** 
      * sp转px的方法。 
      */ 
     public int sp2px(float spValue) { 
      final float fontScale = getResources().getDisplayMetrics().scaledDensity; 
      return (int) (spValue * fontScale + 0.5f); 
     } 
     
     @Override 
     protected void onPause() { 
      super.onPause(); 
      if (mDanmakuView != null && mDanmakuView.isPrepared()) { 
       mDanmakuView.pause(); 
      } 
     } 
     
     @Override 
     protected void onResume() { 
      super.onResume(); 
      if (mDanmakuView != null && mDanmakuView.isPrepared() && mDanmakuView.isPaused()) { 
       mDanmakuView.resume(); 
      } 
     } 
     
     @Override 
     protected void onDestroy() { 
      super.onDestroy(); 
      mIsShowDanmaku = false; 
      if (mDanmakuView != null) { 
       mDanmakuView.release(); 
       mDanmakuView = null; 
      } 
     } 
      
     @Override 
     public void onWindowFocusChanged(boolean hasFocus) { 
      super.onWindowFocusChanged(hasFocus); 
      if (hasFocus && Build.VERSION.SDK_INT >= 19) { 
       View decorView = getWindow().getDecorView(); 
       decorView.setSystemUiVisibility( 
         View.SYSTEM_UI_FLAG_LAYOUT_STABLE 
           | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION 
           | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN 
           | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION 
           | View.SYSTEM_UI_FLAG_FULLSCREEN 
           | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY); 
      } 
     } 
    } 

    效果图如下:


    加入操作界面

    <?xml version="1.0" encoding="utf-8"?> 
    <RelativeLayout 
     xmlns:android="http://schemas.android.com/apk/res/android" 
     android:id="@+id/activity_main" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:background="#000"> 
     
     <VideoView 
      android:id="@+id/video_view" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_centerInParent="true"/> 
     
     <master.flame.danmaku.ui.widget.DanmakuView 
      android:id="@+id/danmaku_view" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" /> 
     
     <LinearLayout 
      android:id="@+id/operation_layout" 
      android:layout_width="match_parent" 
      android:layout_height="50dp" 
      android:layout_alignParentBottom="true" 
      android:background="#fff" 
      android:visibility="gone"> 
     
      <EditText 
       android:id="@+id/edit_text" 
       android:layout_width="0dp" 
       android:layout_height="match_parent" 
       android:layout_weight="1" /> 
     
      <Button 
       android:id="@+id/send" 
       android:layout_width="wrap_content" 
       android:layout_height="match_parent" 
       android:text="Send" /> 
     </LinearLayout> 
    </RelativeLayout> 
    package com.jackie.bombscreen; 
     
    import android.graphics.Color; 
    import android.os.Build; 
    import android.os.Bundle; 
    import android.os.Environment; 
    import android.support.v7.app.AppCompatActivity; 
    import android.text.TextUtils; 
    import android.view.View; 
    import android.widget.Button; 
    import android.widget.EditText; 
    import android.widget.LinearLayout; 
    import android.widget.VideoView; 
     
    import java.util.Random; 
     
    import master.flame.danmaku.controller.DrawHandler; 
    import master.flame.danmaku.danmaku.model.BaseDanmaku; 
    import master.flame.danmaku.danmaku.model.DanmakuTimer; 
    import master.flame.danmaku.danmaku.model.IDanmakus; 
    import master.flame.danmaku.danmaku.model.android.DanmakuContext; 
    import master.flame.danmaku.danmaku.model.android.Danmakus; 
    import master.flame.danmaku.danmaku.parser.BaseDanmakuParser; 
    import master.flame.danmaku.ui.widget.DanmakuView; 
     
    public class MainActivity extends AppCompatActivity { 
     private boolean mIsShowDanmaku; 
     private DanmakuView mDanmakuView; 
     private DanmakuContext mDanmakuContext; 
     
     private BaseDanmakuParser parser = new BaseDanmakuParser() { 
      @Override 
      protected IDanmakus parse() { 
       return new Danmakus(); 
      } 
     }; 
     
     @Override 
     protected void onCreate(Bundle savedInstanceState) { 
      super.onCreate(savedInstanceState); 
      setContentView(R.layout.activity_main); 
      VideoView videoView = (VideoView) findViewById(R.id.video_view); 
      videoView.setVideoPath(Environment.getExternalStorageDirectory() + "/xiaoxingyun.mp4"); 
      videoView.start(); 
     
      mDanmakuView = (DanmakuView) findViewById(R.id.danmaku_view); 
      mDanmakuView.enableDanmakuDrawingCache(true); 
      mDanmakuView.setCallback(new DrawHandler.Callback() { 
       @Override 
       public void prepared() { 
        mIsShowDanmaku = true; 
        mDanmakuView.start(); 
        generateSomeDanmaku(); 
       } 
     
       @Override 
       public void updateTimer(DanmakuTimer timer) { 
     
       } 
     
       @Override 
       public void danmakuShown(BaseDanmaku danmaku) { 
     
       } 
     
       @Override 
       public void drawingFinished() { 
     
       } 
      }); 
     
      mDanmakuContext = DanmakuContext.create(); 
      mDanmakuView.prepare(parser, mDanmakuContext); 
     
      final LinearLayout operationLayout = (LinearLayout) findViewById(R.id.operation_layout); 
      final Button send = (Button) findViewById(R.id.send); 
      final EditText editText = (EditText) findViewById(R.id.edit_text); 
      mDanmakuView.setOnClickListener(new View.OnClickListener() { 
       @Override 
       public void onClick(View view) { 
        if (operationLayout.getVisibility() == View.GONE) { 
         operationLayout.setVisibility(View.VISIBLE); 
        } else { 
         operationLayout.setVisibility(View.GONE); 
        } 
       } 
      }); 
       
      send.setOnClickListener(new View.OnClickListener() { 
       @Override 
       public void onClick(View view) { 
        String content = editText.getText().toString(); 
        if (!TextUtils.isEmpty(content)) { 
         addDanmaku(content, true); 
         editText.setText(""); 
        } 
       } 
      }); 
     
      getWindow().getDecorView().setOnSystemUiVisibilityChangeListener (new View.OnSystemUiVisibilityChangeListener() { 
       @Override 
       public void onSystemUiVisibilityChange(int visibility) { 
        if (visibility == View.SYSTEM_UI_FLAG_VISIBLE) { 
         onWindowFocusChanged(true); 
        } 
       } 
      }); 
     } 
     
     /** 
      * 向弹幕View中添加一条弹幕 
      * @param content  弹幕的具体内容 
      * @param withBorder 弹幕是否有边框 
      */ 
     private void addDanmaku(String content, boolean withBorder) { 
      BaseDanmaku danmaku = mDanmakuContext.mDanmakuFactory.createDanmaku(BaseDanmaku.TYPE_SCROLL_RL); 
      danmaku.text = content; 
      danmaku.padding = 5; 
      danmaku.textSize = sp2px(20); 
      danmaku.textColor = Color.WHITE; 
      danmaku.setTime(mDanmakuView.getCurrentTime()); 
      if (withBorder) { 
       danmaku.borderColor = Color.GREEN; 
      } 
      mDanmakuView.addDanmaku(danmaku); 
     } 
     
     /** 
      * 随机生成一些弹幕内容以供测试 
      */ 
     private void generateSomeDanmaku() { 
      new Thread(new Runnable() { 
       @Override 
       public void run() { 
        while(mIsShowDanmaku) { 
         int time = new Random().nextInt(300); 
         String content = "" + time + time; 
         addDanmaku(content, false); 
         try { 
          Thread.sleep(time); 
         } catch (InterruptedException e) { 
          e.printStackTrace(); 
         } 
        } 
       } 
      }).start(); 
     } 
     
     /** 
      * sp转px的方法。 
      */ 
     public int sp2px(float spValue) { 
      final float fontScale = getResources().getDisplayMetrics().scaledDensity; 
      return (int) (spValue * fontScale + 0.5f); 
     } 
     
     @Override 
     protected void onPause() { 
      super.onPause(); 
      if (mDanmakuView != null && mDanmakuView.isPrepared()) { 
       mDanmakuView.pause(); 
      } 
     } 
     
     @Override 
     protected void onResume() { 
      super.onResume(); 
      if (mDanmakuView != null && mDanmakuView.isPrepared() && mDanmakuView.isPaused()) { 
       mDanmakuView.resume(); 
      } 
     } 
     
     @Override 
     protected void onDestroy() { 
      super.onDestroy(); 
      mIsShowDanmaku = false; 
      if (mDanmakuView != null) { 
       mDanmakuView.release(); 
       mDanmakuView = null; 
      } 
     } 
     
     
     @Override 
     public void onWindowFocusChanged(boolean hasFocus) { 
      super.onWindowFocusChanged(hasFocus); 
      if (hasFocus && Build.VERSION.SDK_INT >= 19) { 
       View decorView = getWindow().getDecorView(); 
       decorView.setSystemUiVisibility( 
         View.SYSTEM_UI_FLAG_LAYOUT_STABLE 
           | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION 
           | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN 
           | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION 
           | View.SYSTEM_UI_FLAG_FULLSCREEN 
           | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY); 
      } 
     } 
    } 

    效果图如下:

    自己发的弹幕有绿色边框,很容易区分。

    基本上实现了弹幕的功能,当然,里面的知识点还有很多,这只是最基本的功能。有时间的话,建议学学DanmakuFlameMaster,里面还有很多炫酷的功能。

    感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

      最新更新
      热门排行榜