Android h5全屏播放video
来源:互联网 发布:puppy linux 中文包 编辑:程序博客网 时间:2024/05/17 00:17
H5全屏播放,在iOS系统上基本没有什么问题,但是在android系统,却又各种各样的问题。
H5自身对全屏的支持
这个其实不难,只需在video标签加个webkit-playsinline属性即可,这个属性基本上在基于webkit内核的移动端都是没问题的,此全屏非彼全屏,它是在浏览器视窗内的全屏,并不是占居整个手机的全屏,当然我们做web端需要的就是在document的body内的视窗范围的全屏。
<video id="myvideo" src="test.mp4" webkit-playsinline="true"></video>
在ios下,视频被嵌入后,媒体的元数据加载完成后,会以全屏的形式显示出来,或者加个poster,可以看到画面。但在android下,多数机子是不显示视频画面的,要不就是显示一个黑色的还不是全屏的播放控件,即使及加个poster封面也不济于是。因为poster在android兼容的并不好,不如在视频上层加个div铺张图片,这个比较好的处理方式应该是:视频上加一层div做封面,由于android不允许视频上层有东西,所以首先将视频设为的width:1px,当播放后,上层的封面remove掉,同时width:100%或者你想要的宽。
Android支持全屏播放
public class WebVideoActivity extends Activity { private WebView webView; /** 视频全屏参数 */ protected static final FrameLayout.LayoutParams COVER_SCREEN_PARAMS = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT); private View customView; private FrameLayout fullscreenContainer; private WebChromeClient.CustomViewCallback customViewCallback; @Override protected void onCreate(Bundle bundle) { super.onCreate(bundle); setContentView(R.layout.activity_xx); webView = (WebView) findViewById(R.id.xx); initWebView(); } @Override protected void onStop() { super.onStop(); webView.reload(); } /** 展示网页界面 **/ public void initWebView() { WebChromeClient wvcc = new WebChromeClient(); WebSettings webSettings = webView.getSettings(); webSettings.setJavaScriptEnabled(true); webSettings.setUseWideViewPort(true); // 关键点 webSettings.setAllowFileAccess(true); // 允许访问文件 webSettings.setSupportZoom(true); // 支持缩放 webSettings.setLoadWithOverviewMode(true); webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE); // 不加载缓存内容 webView.setWebChromeClient(wvcc); WebViewClient wvc = new WebViewClient() { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { webView.loadUrl(url); return true; } }; webView.setWebViewClient(wvc); webView.setWebChromeClient(new WebChromeClient() { /*** 视频播放相关的方法 **/ @Override public View getVideoLoadingProgressView() { FrameLayout frameLayout = new FrameLayout(WebVideoActivity.this); frameLayout.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)); return frameLayout; } @Override public void onShowCustomView(View view, CustomViewCallback callback) { showCustomView(view, callback); } @Override public void onHideCustomView() { hideCustomView(); } }); // 加载Web地址 webView.loadUrl(webUrl); } /** 视频播放全屏 **/ private void showCustomView(View view, CustomViewCallback callback) { // if a view already exists then immediately terminate the new one if (customView != null) { callback.onCustomViewHidden(); return; } WebVideoActivity.this.getWindow().getDecorView(); FrameLayout decor = (FrameLayout) getWindow().getDecorView(); fullscreenContainer = new FullscreenHolder(WebVideoActivity.this); fullscreenContainer.addView(view, COVER_SCREEN_PARAMS); decor.addView(fullscreenContainer, COVER_SCREEN_PARAMS); customView = view; setStatusBarVisibility(false); customViewCallback = callback; } /** 隐藏视频全屏 */ private void hideCustomView() { if (customView == null) { return; } setStatusBarVisibility(true); FrameLayout decor = (FrameLayout) getWindow().getDecorView(); decor.removeView(fullscreenContainer); fullscreenContainer = null; customView = null; customViewCallback.onCustomViewHidden(); webView.setVisibility(View.VISIBLE); } /** 全屏容器界面 */ static class FullscreenHolder extends FrameLayout { public FullscreenHolder(Context ctx) { super(ctx); setBackgroundColor(ctx.getResources().getColor(android.R.color.black)); } @Override public boolean onTouchEvent(MotionEvent evt) { return true; } } private void setStatusBarVisibility(boolean visible) { int flag = visible ? 0 : WindowManager.LayoutParams.FLAG_FULLSCREEN; getWindow().setFlags(flag, WindowManager.LayoutParams.FLAG_FULLSCREEN); } @Override public boolean onKeyUp(int keyCode, KeyEvent event) { switch (keyCode) { case KeyEvent.KEYCODE_BACK: /** 回退键 事件处理 优先级:视频播放全屏-网页回退-关闭页面 */ if (customView != null) { hideCustomView(); } else if (webView.canGoBack()) { webView.goBack(); } else { finish(); } return true; default: return super.onKeyUp(keyCode, event); } }}
阅读全文
0 0
- Android h5全屏播放video
- H5 video标签在移动端,不默认全屏播放。
- h5+video+progress自定义播放
- H5 video 播放器demo
- h5的video播放功能
- Android中加载WebView的H5全屏视频播放
- html5 video播放调研,全屏,伪全屏
- WebView全屏播放h5视频
- android中使用X5WebView时H5的Video会默认全屏
- H5视频播放库video.js介绍
- html5阻止video的默认全屏播放
- html5阻止video的默认全屏播放
- WebView 支持 Html5 video 进行全屏播放
- Android Video视频播放
- Android 使WebView支持HTML5 Video(全屏)播放的方法
- Android HTML5 Video视频标签自动播放与自动全屏问题解决
- Android HTML5 Video视频标签自动播放与自动全屏问题解决
- Android 使WebView支持HTML5 Video(全屏)播放的方法
- zookeeper在dubbo到底起了什么作用,dubno如何解决了阿里的高并发问题?
- Spring的面向切面编程AOP
- 做题反思
- 【two-pointer】Codeforces762C[Two strings]题解
- CentOS 6.6 升级GCC G
- Android h5全屏播放video
- Android获取屏幕的宽高的方法
- DevExpress DateEdit 5 常见问题解决方法
- Ext.toolbar.Toolbar工具栏
- Windows 10 /win10 上使用GIT慢的问题,或者命令行反应慢的问题
- 标签title属性现实内容时间变长,重写标签的onmouseover、onmouseou方法
- Normalize.css 与传统的 CSS Reset 有哪些区别?
- 采用基于MQTT的ActiveMQ实现消息推送
- 性能测试实施(2)之典型交易选取