笔者最近开发一款视频同步演示产品,主要功能是:多台手机设备在手机专卖店展台区同步播放宣传视频,即在任何时间打开任一台设备都要同步播放视频,达到宣传产品和整体化一的用户体验,原理即在服务器打开网页播放展示视频,循环播放同时把播放进度更新到数据库,客户端手机打开App先下载视频到本地,然后获取当前视频播放进度开始播放本地视频,从而达到媲美直播推流的效果,从效果来看视频进度参考方案完美绝杀直播推流方案。
直播推流 VS 视频参照
前者:搭建直播推流服务复杂、网络延迟较高、流量费用高、用户体验良好、成本高;
后者:搭建后台管理系统容易、网络延迟较低、无额外费用、用户体验良好、成本低;
问题提要:
在Android设备安装App播放视频时,需要视频全屏展示,即无状态栏和导航按键,但在非刘海和刘海手机设备中的遇到问题,各自设置略有不同,故简要做此记录:
1,常规全屏设置:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>
该主题源码可看到已经隐藏了状态栏:
<style name="Theme.AppCompat.Light.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
但在刘海屏幕下上面会有状态栏,无法全屏:
这样效果体验不是很好,经过测试和设置,做了彻底全屏;
2,刘海全屏设置
第一步,增加主题属性,代码如下:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
<style name="AppTheme.StartingWindowTheme" parent="AppTheme">
<!-- 非常重要,不设置,后续设置无效 -->
<item name="android:windowTranslucentStatus">true</item>
</style>
</resources>
第二步,在配置文件中加入代码:
<application
android:allowBackup="true"
android:icon="@drawable/icon"
android:label="@string/app_name"
android:supportsRtl="true"
android:networkSecurityConfig="@xml/network_config"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity"
android:theme="@style/AppTheme.StartingWindowTheme"
android:screenOrientation="portrait">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<!--全屏设置,必须加入-->
<meta-data
android:name="android.notch_support"
android:value="true" />
</application>
第三步,在Activity中加入如下代码:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//全屏设置
getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.activity_main);
}
至此,经测试按照如上测试,注意上面设置一个也不能少,即可达到刘海全屏的良好体验,效果如下:
另附上隐藏导航虚拟按键代码片段:
/**
* 隐藏虚拟按键
*/
protected void hideBottomUIMenu() {
//隐藏虚拟按键
if (Build.VERSION.SDK_INT > 11 && Build.VERSION.SDK_INT < 19) { // lower api
View v = this.getWindow().getDecorView();
v.setSystemUiVisibility(View.GONE);
} else if (Build.VERSION.SDK_INT >= 19) {
//for new api versions.
View decorView = getWindow().getDecorView();
int uiOptions = View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY;
decorView.setSystemUiVisibility(uiOptions);
}
}
/**
* 恢复普通状态
*/
private void showBottomUIMenu() {
if (Build.VERSION.SDK_INT > 11 && Build.VERSION.SDK_INT < 19) { // lower api
View v = this.getWindow().getDecorView();
v.setSystemUiVisibility(View.VISIBLE);
} else if (Build.VERSION.SDK_INT >= 19) {
//for new api versions.
View decorView = getWindow().getDecorView();
int uiOptions = View.SCREEN_STATE_OFF;
decorView.setSystemUiVisibility(uiOptions);
}
}
附:产品上线效果展示:
备注:该产品已上线,后台视频展示参考区部分请参考笔者另一篇文章:基于 Bootstrap 与 Video.js 开发Web视频播放页面 ,如有疑问,留言即可。