Android WebView访问网页+自动播放视频+自动全屏+切换横屏 您所在的位置:网站首页 videojs全屏下网页伪全屏 Android WebView访问网页+自动播放视频+自动全屏+切换横屏

Android WebView访问网页+自动播放视频+自动全屏+切换横屏

2024-07-10 21:48| 来源: 网络整理| 查看: 265

一、引言

        近期,我发现电视家、火星直播等在线看电视直播的软件都已倒闭,而我奶奶也再无法通过这些平台看电视了。她已六十多岁,快七十岁啦。这些平台的倒下对我来说其实没有多大的影响,但是对于文化不多的她而言,生活中却是少了一大乐趣。因为自己学过编程,所以我想帮她解决这个问题。她只听得懂白话,又最爱看“广东珠江台”,因此,我通过Android的编程技术,为她专门定制一款可以自动看广东珠江台的App,打开即用,免了点来点去的麻烦。虽说需求很小、只够她一人使用,但实现起来却并不简单呀。通过两天时间的深入钻研,最终我还是把这个小需求给实现了。为此编写一篇博客,如果日后自己还需要解决这样的问题时,我就直接ctrl+c加ctrl+v。当然,也希望这篇博客能够为你提供一些指导和帮助。

二、访问网页视频+自动播放的实现思路

        由于许多的m3u8链接都已经失效,现在看电视直播只能通过一些官方网页来实现,比如央视网等等。那么,访问网页的话是可以通过Android的WebView来实现,实现的方法非常简单,就是在Activity界面之中添加一个WebView空间,然后通过下面的代码来访问网页:

main_wv = findViewById(R.id.main_wv); main_wv.setWebViewClient(new WebViewClient()); main_wv.setWebChromeClient(new WebChromeClient()); main_wv.loadUrl("https://***.***");

        但是这样的话,最多也只能够竖屏中观看视频,显示十分地有限,而且还不会自动播放,如图:

        所以,这里先介绍实现网页访问+自动播放的思路。WebView可以通过自定义的设置来控制它是否支持JavaScript脚本注入,即通过js来实现网页视频的自动播放。第一步是对WebView进行设置,而第二步是执行js自动播放视频的脚本,代码如下:

        设置WebView支持js脚本

WebSettings settings = main_wv.getSettings(); // main_wv为WebView控件 settings.setJavaScriptEnabled(true);

        执行js自动播放视频的脚本

String js = "javascript:"; js += "var videos = document.getElementsByTagName('video');"; js += "var video_last;"; js += "var video = videos[videos.length-1];"; js += "if (video != undefined && video != video_last) {"; { js += "video_last = video;"; js += "function video_start() {"; { js += "_VideoEnabledWebView.notifyVideoStart();"; } js += "}"; js += "video.addEventListener('play', video_start);"; } js += "}"; main_wv.loadUrl(js); // main_wv为WebView控件

        忘了介绍,该js脚本在什么时候执行了。这里补充一下,为了使得页面自动播放视频,需要重写一个WebViewClient类,类名可以随你定义,比如“MyWebViewClient”,然后重写public void onPageFinished(WebView view, String url)方法,如下:

@Override public void onPageFinished(WebView view, String url) { super.onPageFinished(view, url); String js = "javascript:"; js += "var videos = document.getElementsByTagName('video');"; js += "var video_last;"; js += "var video = videos[videos.length-1];"; js += "if (video != undefined && video != video_last) {"; { js += "video_last = video;"; js += "function video_start() {"; { js += "_VideoEnabledWebView.notifyVideoStart();"; } js += "}"; js += "video.addEventListener('play', video_start);"; } js += "}"; main_wv.loadUrl(js); // main_wv为WebView控件 }

        至此,还请记得改

main_wv.setWebViewClient(new WebViewClient()); // main_wv为WebView控件

        为

main_wv.setWebViewClient(new MyWebViewClient()); // main_wv为WebView控件

        这样,在访问网页时,视频就可以自动播放啦。

三、网页自动全屏思路

        网页全屏的实现思路比较复杂,因为Android开发者的初衷是使网页设计者无法通过js的方式直接全屏地播放视频。也就是说,通过js注入的方式无法直接在WebView中实现网页的全屏播放。为什么呢?根据其他人的说法,这是因为Android开发者担心你的手机不小心访问到一个流氓网页,然后该网页直接全屏,使你的手机失控,被它播放的视频霸占许久、不能退出。我想了想,觉得这个理由倒是有些许合理的。因此执行js脚本注入无法直接在WebView中实现网页视频的全屏播放。

        但是网页全屏的实现是完全没有问题的。大体的思路是:重写WebChromeClient和WebView这两个类,通过重写其中的内部方法,在加载完网页后,再调用js脚本注入,进而触发视频的全屏播放。而触发视频的全屏播放的js脚本为:

"javascript:(" + "function() { " + " var videos = document.getElementsByTagName('video'); " + " var video = videos[0]; " + " if (!document.webkitFullScreen && video.webkitEnterFullscreen) {" + " video.webkitEnterFullscreen(); " + " } " + " })()"

        由于实现的细节很多,再加上我只是简单地研究了一下,所以没法更详细地展开说说了。请大家看后边“全部代码”的章节部分,了解更多细节。

四、手机默认横屏思路

        手机默认横屏的思路实现起来非常简单,简单得不得了,只需要在Manifest.xml这个清单文件中对指定的Activity声明相关的属性即可。例如,用于播放的Activity为MainActivity,那么就这样设置:

        其中,最关键的两行代码为

android:theme="@android:style/Theme.NoTitleBar.Fullscreen" android:screenOrientation="landscape"

        上面一行说的是让app在手机上运行时不显示标题栏(这个可以看你个人需求,有的人喜欢留着,有的人喜欢去掉),而下面一行则是实现横屏的开关,landscape指的是风景,意为通过手机横屏的方式欣赏图片中的风景,以尽可能地使你更加清楚地目睹一张横向的风景图。

五、全部代码

        项目的代码目录,其中画横线部分是重点,我从创建项目到生成可运行且有效果的App只改动过这些文件。下面我将每个框中的文件中的代码罗列出来。

        AndroidManifest.xml

        MainActivity.java

package ***.***.***; import android.annotation.SuppressLint; import android.app.Activity; import android.content.Context; import android.content.Intent; import android.net.ConnectivityManager; import android.net.NetworkInfo; import android.os.Bundle; import android.view.ViewGroup; import android.webkit.WebSettings; import android.webkit.WebView; import android.webkit.WebViewClient; import android.widget.LinearLayout; import android.widget.RelativeLayout; public class MainActivity extends Activity { VideoEnabledWebView mainWebView; RelativeLayout mainNonVideoRelativeLayout; ViewGroup mainVideoLayout; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); initView(); // initialize ui components setWebView(); // set webview's settings loadVideoUrl(); // load video url } private void initView() { setContentView(R.layout.activity_main); mainNonVideoRelativeLayout = (RelativeLayout) findViewById(R.id.main_rl_non_video); mainVideoLayout = (ViewGroup)findViewById(R.id.main_rl_video); } @SuppressLint("SetJavaScriptEnabled") private void setWebView() { // create a webview instance mainWebView = new VideoEnabledWebView(this); mainWebView.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)); // add the webview instance to the main layout mainNonVideoRelativeLayout.addView(mainWebView); // set general settings of webview WebSettings settings = mainWebView.getSettings(); settings.setAllowFileAccess(true); settings.setBuiltInZoomControls(false); settings.setJavaScriptEnabled(true); settings.setBuiltInZoomControls(false); // create a WebChromeClient instance and use it to set the webview VideoEnabledWebChromeClient videoEnabledWebChromeClient = new VideoEnabledWebChromeClient(mainNonVideoRelativeLayout, mainVideoLayout,null, mainWebView); mainWebView.setWebChromeClient(videoEnabledWebChromeClient); // create a WebViewClient for webview mainWebView.setWebViewClient(new WebViewClient(){ @Override public void onPageFinished(WebView view, String url) { super.onPageFinished(view, url); // execute a javascript to automatically play the video String js = "javascript:"; js += "var videos = document.getElementsByTagName('video');"; js += "var video_last;"; js += "var video = videos[videos.length-1];"; js += "if (video != undefined && video != video_last) {"; { js += "video_last = video;"; js += "function video_start() {"; { js += "_VideoEnabledWebView.notifyVideoStart();"; } js += "}"; js += "video.addEventListener('play', video_start);"; } js += "}"; mainWebView.loadUrl(js); } }); } private void loadVideoUrl() { mainWebView.loadUrl("https://******"); // your url that contains the video } }

        activity_main.xml

        VideoEnabledWebChromeClient.java

package ***.***.***; import android.media.MediaPlayer; import android.view.SurfaceView; import android.view.View; import android.view.ViewGroup; import android.webkit.WebChromeClient; import android.widget.FrameLayout; public class VideoEnabledWebChromeClient extends WebChromeClient implements MediaPlayer.OnPreparedListener, MediaPlayer.OnCompletionListener, MediaPlayer.OnErrorListener { public interface ToggledFullscreenCallback { void toggledFullscreen(boolean fullscreen); } private View activityNonVideoView; private ViewGroup activityVideoView; private View loadingView; private VideoEnabledWebView webView; // Indicates if the video is being displayed using a custom view (typically full-screen) private boolean isVideoFullscreen; private FrameLayout videoViewContainer; private CustomViewCallback videoViewCallback; private ToggledFullscreenCallback toggledFullscreenCallback; /** * Never use this constructor alone. * This constructor allows this class to be defined as an inline inner class in which the user can override methods */ @SuppressWarnings("unused") public VideoEnabledWebChromeClient() { } /** * Builds a video enabled WebChromeClient. * @param activityNonVideoView A View in the activity's layout that contains every other view that should be hidden when the video goes full-screen. * @param activityVideoView A ViewGroup in the activity's layout that will display the video. Typically you would like this to fill the whole layout. */ @SuppressWarnings("unused") public VideoEnabledWebChromeClient(View activityNonVideoView, ViewGroup activityVideoView) { this.activityNonVideoView = activityNonVideoView; this.activityVideoView = activityVideoView; this.loadingView = null; this.webView = null; this.isVideoFullscreen = false; } /** * Builds a video enabled WebChromeClient. * @param activityNonVideoView A View in the activity's layout that contains every other view that should be hidden when the video goes full-screen. * @param activityVideoView A ViewGroup in the activity's layout that will display the video. Typically you would like this to fill the whole layout. * @param loadingView A View to be shown while the video is loading (typically only used in API level


【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有