毕业论文开发语言企业开发JAVA技术.NET技术WEB开发Linux/Unix数据库技术Windows平台移动平台嵌入式论文范文英语论文
您现在的位置: 毕业论文 >> java技术 >> 正文

webview加载html5的视频如何全屏播放

更新时间:2015-12-12:  来源:毕业论文

最近因为项目要用webview加载html5的视频,开始不能全屏播,做了很久才做出来!那按我的理解说下怎么实现全屏吧

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">
    <FrameLayout
        android:id="@+id/video_view"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:visibility="gone"
        ></FrameLayout>
    <Button
        android:id="@+id/video_landport"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="全屏不显示该按扭,点击切换横屏"
        android:gravity="center"
        />
    <WebView
        android:id="@+id/video_webview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        />
    </LinearLayout>

原理:实现全屏的时候把webview里的视频放到一个View(布局里的video_view控件)里面,然后把webview隐藏掉!这样就实现了全屏播放的!
现在具体来看看怎么实现的:
先放代码MainActivity.java:
 
public class MainActivity extends Activity {
 
    private FrameLayout videoview;// 全屏时视频加载view
    private Button videolandport;
    private WebView videowebview;
    private Boolean islandport = true;//true表示此时是竖屏,false表示此时横屏。
    private View xCustomView;
    private xWebChromeClient xwebchromeclient;
    private String url = "http://look.appjx.cn/mobile_api.php?mod=news&id=12604";
    private WebChromeClient.CustomViewCallback     xCustomViewCallback;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);//去掉应用标题
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_FULLSCREEN);
        setContentView(R.layout.activity_main);
        initwidget();
        initListener();
        videowebview.loadUrl(url);
    }
 
    private void initListener() {
        // TODO Auto-generated method stub
        videolandport.setOnClickListener(new Listener());
    }
 
    private void initwidget() {
        // TODO Auto-generated method stub
        videoview = (FrameLayout) findViewById(R.id.video_view);
        videolandport = (Button) findViewById(R.id.video_landport);
        videowebview = (WebView) findViewById(R.id.video_webview);
        WebSettings ws = videowebview.getSettings();
        /**
         * setAllowFileAccess 启用或禁止WebView访问文件数据 setBlockNetworkImage 是否显示网络图像
         * setBuiltInZoomControls 设置是否支持缩放 setCacheMode 设置缓冲的模式
         * setDefaultFontSize 设置默认的字体大小 setDefaultTextEncodingName 设置在解码时使用的默认编码
         * setFixedFontFamily 设置固定使用的字体 setJavaSciptEnabled 设置是否支持Javascript
         * setLayoutAlgorithm 设置布局方式 setLightTouchEnabled 设置用鼠标激活被选项
         * setSupportZoom 设置是否支持变焦
         * */
        ws.setBuiltInZoomControls(true);// 隐藏缩放按钮
        ws.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);// 排版适应屏幕
        ws.setUseWideViewPort(true);// 可任意比例缩放
        ws.setLoadWithOverviewMode(true);// setUseWideViewPort方法设置webview推荐使用的窗口。setLoadWithOverviewMode方法是设置webview加载的页面的模式。
        ws.setSavePassword(true);
        ws.setSaveFormData(true);// 保存表单数据
        ws.setJavaScriptEnabled(true);
        ws.setGeolocationEnabled(true);// 启用地理定位
        ws.setGeolocationDatabasePath("/data/data/org.itri.html5webview/databases/");// 设置定位的数据库路径
        ws.setDomStorageEnabled(true);
        xwebchromeclient = new xWebChromeClient();
        videowebview.setWebChromeClient(xwebchromeclient);
        videowebview.setWebViewClient(new xWebViewClientent());
    }
 
    class Listener implements OnClickListener {
        @Override
        public void onClick(View v) {
            // TODO Auto-generated method stub
            switch (v.getId()) {
            case R.id.video_landport:
                if (islandport) {
                    setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
                    videolandport.setText("全屏不显示该按扭,点击切换横屏");
                }else {
                    setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
                    videolandport.setText("全屏不显示该按扭,点击切换竖屏");
                }
                break;
            default:
                break;
            }
        }
    }
       @Override
        public boolean onKeyDown(int keyCode, KeyEvent event) {
            if (keyCode == KeyEvent.KEYCODE_BACK) {
                if (inCustomView()) {
                    hideCustomView();
                    return true;
                }else {
                videowebview.loadUrl("about:blank");
//                    mTestWebView.loadData("", "text/html; charset=UTF-8", null);
                MainActivity.this.finish();
                    Log.i("testwebview", "===>>>2");
            }
            }
            return true;
        }
       /**
        * 判断是否是全屏
        * @return
        */
        public boolean inCustomView() {
             return (xCustomView != null);
         }
         /**
          * 全屏时按返加键执行退出全屏方法
          */
         public void hideCustomView() {
             xwebchromeclient.onHideCustomView();
         }
    /**
     * 处理Javascript的对话框、网站图标、网站标题以及网页加载进度等
     * @author
     */
    public class xWebChromeClient extends WebChromeClient {
        private Bitmap xdefaltvideo;
        private View xprogressvideo;
        @Override
        //播放网络视频时全屏会被调用的方法
        public void onShowCustomView(View view, WebChromeClient.CustomViewCallback callback)
        {
            if (islandport) {
            }
            else{
                
//                ii = "1";
//                setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
            }
            setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
            videowebview.setVisibility(View.GONE);
            //如果一个视图已经存在,那么立刻终止并新建一个
            if (xCustomView != null) {
                callback.onCustomViewHidden();
                return;
            }           
            videoview.addView(view);
            xCustomView = view;
            xCustomViewCallback = callback;
            videoview.setVisibility(View.VISIBLE);
        }
        
        @Override
        //视频播放退出全屏会被调用的
        public void onHideCustomView() {
            
            if (xCustomView == null)//不是全屏播放状态
                return;                     
            // Hide the custom view.
            setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
            xCustomView.setVisibility(View.GONE);
            
            // Remove the custom view from its container.
            videoview.removeView(xCustomView);
            xCustomView = null;
            videoview.setVisibility(View.GONE);
            xCustomViewCallback.onCustomViewHidden();
            
            videowebview.setVisibility(View.VISIBLE);
            
            //Log.i(LOGTAG, "set it to webVew");
        }
        //视频加载添加默认图标
        @Override
        public Bitmap getDefaultVideoPoster() {
            //Log.i(LOGTAG, "here in on getDefaultVideoPoster");  
            if (xdefaltvideo == null) {
                xdefaltvideo = BitmapFactory.decodeResource(
                        getResources(), R.drawable.videoicon);
            }
            return xdefaltvideo;
        }
        //视频加载时进程loading
        @Override
        public View getVideoLoadingProgressView() {
            //Log.i(LOGTAG, "here in on getVideoLoadingPregressView");
            
            if (xprogressvideo == null) {
                LayoutInflater inflater = LayoutInflater.from(MainActivity.this);
                xprogressvideo = inflater.inflate(R.layout.video_loading_progress, null);
            }
            return xprogressvideo;
        }
        //网页标题
         @Override
         public void onReceivedTitle(WebView view, String title) {
            (MainActivity.this).setTitle(title);
         }
 
//         @Override
//       //当WebView进度改变时更新窗口进度
//         public void onProgressChanged(WebView view, int newProgress) {
//             (MainActivity.this).getWindow().setFeatureInt(Window.FEATURE_PROGRESS, newProgress*100);
//         }     
    }
    /**
     * 处理各种通知、请求等事件
     * @author
     */
    public class xWebViewClientent extends WebViewClient {
         @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                Log.i("webviewtest", "shouldOverrideUrlLoading: "+url);
                return false;
            }
    }
    /**
     * 当横竖屏切换时会调用该方法
     * @author
     */
    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        Log.i("testwebview", "=====<<<  onConfigurationChanged  >>>=====");
         super.onConfigurationChanged(newConfig);
         
         if(newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE){
             Log.i("webview", "   现在是横屏1");
             islandport = false;
            }else if(newConfig.orientation == Configuration.ORIENTATION_PORTRAIT){
             Log.i("webview", "   现在是竖屏1");
             islandport = true;
            }
    }
}


代码里面我写了好多注释,相信大家都能看得懂,当然本人是菜鸟,可能有些地方理解错了!知道的可以跟我说。然后我在里面加了一个功能,就是点击webview上面按钮切换横竖屏!还有就是当点击全屏播放的时候强制横屏全屏播放,点击返回时回到竖屏!我这里没有用手机重力感应切换横竖屏!代码里面还加了个播放进度的布局文件,大家在源码里可以看到!
最后说下AndroidManifest.xml设置;
访问网络权限加上这句
<uses-permission android:name="android.permission.INTERNET"/>
当切换横竖屏时为了不重新调用onCreate等方法,要加个这句:
android:configChanges="orientation|keyboardHidden|screenSize"
差不多这样就可以实现全屏播放了,如果有看不懂的问题可以问我,

我想问一下对于优酷,腾讯,土豆,56网的视频,android使用webView把各大网站的视频通过iframe嵌入进行播放,我参照你这篇文章是可以实现全屏播放,但是我遇到了一个奇怪的问题:视频先播放,然后在全屏,程序没问题;但如果先全屏后播放,程序报错并且退出应用。
对于这个问题,我也尝试解决过,发现在android 在不同手机版本,在 onShowCustomView方法中的参数view是不同的。我尝试过如下解决方法,但错误依然存在,所以,我想请教以下大神!
                   FrameLayout frameLayout = (FrameLayout) view;
            View focusedChild = frameLayout.getFocusedChild();
            if (focusedChild instanceof VideoView){
             // VideoView (typically API level <11)
             System.out.print("VideoView");
            }else{
                         // HTML5VideoFullScreen (typically API level 11+)
 // Handle HTML5 video ended event
                if (webview != null && webview.getSettings().getJavaScriptEnabled()){
                    // Run javascript code that detects the video end and notifies the interface
                    String js = "javascript:";
                    js += "_ytrp_html5_video = document.getElementsByTagName('video')[0];";
                    js += "if (_ytrp_html5_video !== undefined) {";
                    {
                        js += "function _ytrp_html5_video_ended() {";
                        {
                            js += "_ytrp_html5_video.removeEventListener('ended', _ytrp_html5_video_ended);";
                            js += "_VideoEnabledWebView.notifyVideoEnd();"; // Must match Javascript interface name and method of VideoEnableWebView
                        }
                        js += "}";
                        js += "_ytrp_html5_video.addEventListener('ended', _ytrp_html5_video_ended);";
                    }
                    js += "}";
                    webview.loadUrl(js);                 }                       }

设为首页 | 联系站长 | 友情链接 | 网站地图 |

copyright©youerw.com 优尔论文网 严禁转载
如果本毕业论文网损害了您的利益或者侵犯了您的权利,请及时联系,我们一定会及时改正。