├── README.md ├── app ├── .gitignore ├── build.gradle ├── proguard-rules.pro └── src │ ├── androidTest │ └── java │ │ └── cn │ │ └── bluemobi │ │ └── dylan │ │ └── welcomevideopager │ │ └── ExampleInstrumentedTest.java │ ├── main │ ├── AndroidManifest.xml │ ├── java │ │ └── cn │ │ │ └── bluemobi │ │ │ └── dylan │ │ │ └── welcomevideopager │ │ │ ├── CustomVideoView.java │ │ │ ├── Guild2Fragment.java │ │ │ ├── GuildFragment.java │ │ │ ├── LazyLoadFragment.java │ │ │ └── MainActivity.java │ └── res │ │ ├── layout │ │ ├── activity_main.xml │ │ └── fm_guild.xml │ │ ├── mipmap-hdpi │ │ └── ic_launcher.png │ │ ├── mipmap-mdpi │ │ └── ic_launcher.png │ │ ├── mipmap-xhdpi │ │ └── ic_launcher.png │ │ ├── mipmap-xxhdpi │ │ ├── bt_start.png │ │ ├── dot_focus.png │ │ ├── dot_normal.png │ │ └── ic_launcher.png │ │ ├── mipmap-xxxhdpi │ │ └── ic_launcher.png │ │ ├── raw │ │ ├── guide_1.mp4 │ │ ├── guide_2.mp4 │ │ ├── guide_3.mp4 │ │ ├── test1.mp4 │ │ ├── test2.mp4 │ │ └── test3.mp4 │ │ ├── values-w820dp │ │ └── dimens.xml │ │ └── values │ │ ├── colors.xml │ │ ├── dimens.xml │ │ ├── strings.xml │ │ └── styles.xml │ └── test │ └── java │ └── cn │ └── bluemobi │ └── dylan │ └── welcomevideopager │ └── ExampleUnitTest.java ├── build.gradle ├── gradle.properties ├── gradle └── wrapper │ ├── gradle-wrapper.jar │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat ├── import-summary.txt ├── screenshorts ├── effect.gif └── mafengwo.gif └── settings.gradle /README.md: -------------------------------------------------------------------------------- 1 | Android酷炫欢迎页播放视频,仿蚂蜂窝自由行和慕课网 2 | >今天无意间看到了蚂蜂窝自由行的app，启动页很酷炫。我记得以前慕课网有个版本的app欢迎页也是播放视频的。 3 | 今天就顺手写一个，代码比较简单，高手请略过。 4 | 5 | 先看效果图： 6 | 7 | ![效果图](https://github.com/linglongxin24/WelcomeVideoPager/blob/master/screenshorts/effect.gif?raw=true) 8 | 9 | #一.资源准备 10 | 11 | 三个比较短小的视频：[视频下载](https://github.com/linglongxin24/WelcomeVideoPager/tree/master/app/src/main/res/raw) 12 | 13 | #二.开始编写代码 14 | 15 | * 1.在项目的res下新建一个raw文件夹，放入准备好的这三个视频 16 | 17 | * 2.自定义播放视频的CustomVideoView 18 | 在这个自定义View里面提供一个播放视频的方法。用户只需要传入播放路径就可以了，并且可一循环播放。 19 | 20 | ```java 21 | package cn.bluemobi.dylan.welcomevideopager; 22 | import android.content.Context; 23 | import android.media.MediaPlayer; 24 | import android.net.Uri; 25 | import android.util.AttributeSet; 26 | import android.view.View; 27 | import android.widget.VideoView; 28 | 29 | /** 30 | * 可以播放视频的View 31 | * Created by yuandl on 2016-11-10. 32 | */ 33 | 34 | public class CustomVideoView extends VideoView { 35 | public CustomVideoView(Context context) { 36 | super(context); 37 | } 38 | 39 | public CustomVideoView(Context context, AttributeSet attrs, int defStyleAttr) { 40 | super(context, attrs, defStyleAttr); 41 | } 42 | 43 | public CustomVideoView(Context context, AttributeSet attrs) { 44 | super(context, attrs); 45 | } 46 | 47 | @Override 48 | protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 49 | super.onMeasure(widthMeasureSpec, heightMeasureSpec); 50 | setMeasuredDimension(View.MeasureSpec.getSize(widthMeasureSpec), View.MeasureSpec.getSize(heightMeasureSpec)); 51 | } 52 | 53 | /** 54 | * 播放视频 55 | * 56 | * @param uri 播放地址 57 | */ 58 | public void playVideo(Uri uri) { 59 | if (uri == null) { 60 | throw new IllegalArgumentException("Uri can not be null"); 61 | } 62 | /**设置播放路径**/ 63 | setVideoURI(uri); 64 | /**开始播放**/ 65 | start(); 66 | setOnPreparedListener(new MediaPlayer.OnPreparedListener() { 67 | 68 | @Override 69 | public void onPrepared(MediaPlayer mp) { 70 | /**设置循环播放**/ 71 | mp.setLooping(true); 72 | } 73 | }); 74 | setOnErrorListener(new MediaPlayer.OnErrorListener() { 75 | 76 | @Override 77 | public boolean onError(MediaPlayer mp, int what, int extra) { 78 | return true; 79 | } 80 | }); 81 | } 82 | } 83 | ``` 84 | 85 | * 3.建立没个欢迎页面的Fragment去加载自定义视频View的视图 86 | 87 | ```java 88 | package cn.bluemobi.dylan.welcomevideopager; 89 | 90 | import android.net.Uri; 91 | import android.os.Bundle; 92 | import android.support.annotation.Nullable; 93 | import android.support.v4.app.Fragment; 94 | import android.view.LayoutInflater; 95 | import android.view.View; 96 | import android.view.ViewGroup; 97 | 98 | /** 99 | * Created by yuandl on 2016-11-10. 100 | */ 101 | 102 | public class GuildFragment extends Fragment { 103 | 104 | private CustomVideoView customVideoView; 105 | 106 | @Nullable 107 | @Override 108 | public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { 109 | customVideoView = new CustomVideoView(getContext()); 110 | /**获取参数，根据不同的参数播放不同的视频**/ 111 | int index = getArguments().getInt("index"); 112 | Uri uri; 113 | if (index == 1) { 114 | uri = Uri.parse("android.resource://" + getActivity().getPackageName() + "/" + R.raw.guide_1); 115 | } else if (index == 2) { 116 | uri = Uri.parse("android.resource://" + getActivity().getPackageName() + "/" + R.raw.guide_2); 117 | } else { 118 | uri = Uri.parse("android.resource://" + getActivity().getPackageName() + "/" + R.raw.guide_3); 119 | } 120 | /**播放视频**/ 121 | customVideoView.playVideo(uri); 122 | return customVideoView; 123 | } 124 | 125 | /** 126 | * 记得在销毁的时候让播放的视频终止 127 | */ 128 | @Override 129 | public void onDestroy() { 130 | super.onDestroy(); 131 | if (customVideoView != null) { 132 | customVideoView.stopPlayback(); 133 | } 134 | } 135 | } 136 | 137 | ``` 138 | * 4.界面布局 139 | 140 | ```xml 141 | 144 | 145 | 149 | 150 | 157 | 158 | 163 | 164 | 170 | 171 | 177 | 178 | 179 |