们做安卓开发时,webview中发现html5 视频的autoplay根本没实现,查看了下android 源码HTMLVideoElement.cpp也未见相应处理,网上有资料显示,这可能关乎UI线程与后台线程的协调性,我看,以后的升级版本总会解决这个问题的。
html5标签属性不支持,那只有通过javascript来处理了
演示apk下载地址:http://download.csdn.net/detail/qiushi_1990/9513038
github源码下载:https://github.com/qiushi123/H5Demo
下面是实现步骤和原理
不要忘记了webview.getSettings().settings.setJavaScriptEnabled(true)启用javascript,AndroidManifest加入INTERNET权限
@Override
public void onPageFinished( WebView view, String url) {
view.loadUrl("javascript:try{autoplay();}catch(e){}");
}
实例代码
public class Html5VideoAutoPlay extends Activity { WebView webview = null; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.html5video); webview = (WebView)findViewById(R.id.webview); webview.getSettings().setJavaScriptEnabled(true); webview.setWebViewClient(new WebViewClient(){ /** * 当前网页的链接仍在webView中跳转 */ @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true; } /** * 处理ssl请求 */ @Override public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) { handler.proceed(); } /** * 页面载入完成回调 */ @Override public void onPageFinished(WebView view, String url) { super.onPageFinished(view, url); view.loadUrl("javascript:try{autoplay();}catch(e){}"); } }); webview.setWebChromeClient(new WebChromeClient() { /** * 显示自定义视图,无此方法视频不能播放 */ @Override public void onShowCustomView(View view, CustomViewCallback callback) { super.onShowCustomView(view, callback); } }); webview.loadUrl("file:///sdcard/html/video.html"); } @Override protected void onPause() { if(null != webview) { webview.onPause(); } super.onPause(); } }
html5video.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <WebView android:id="@+id/webview" android:layout_width="match_parent" android:layout_height="match_parent"/> </LinearLayout>
video.html
<body> <video id="video" src="b.mp4" width="480" height="320" controls loop> don't support html5 </video> </body> <script type="text/javascript"> var video = document.getElementById("video"); video.play(); </script>
上面的src可以引入本地视频b.mp4,
也可以引入网上视频:http://2449.vod.myqcloud.com/2449_43b6f696980311e59ed467f22794e792.f20.mp4
个人觉得html5结合Android会让未来各种技术实现越来越简单。到我的个人博客查看更多h5与安卓的结合案例。
也可以关注我github里的其他开源项目。
github:https://github.com/qiushi123?tab=repositories
实例图片
效果图
编程小石头,为分享干货而生!据说,每个年轻上进,颜值又高的互联网人都关注了编程小石头。
频是网页承载内容很重要的一个元素,也是必不可少的网页表现形式(图、文、表、视、音)之一。曾经网页要想播放视频、制作游戏,必须得用第三方插件flash。不仅编写代码要使用额外的语言,浏览器也必须得装第三方插件,非常不方便。随着html5标准逐渐普及,移动端、pc端开始抛弃flash,如今几乎所有的浏览器都使用html5来制作视频。
目标
flash是Adobe公司其中之一的产品。它发起于W3C与WHATWG的第五代web标准之争,它捡了个大便宜,乘机定义网页媒体标准。
W3C与WHATWG的第五代web标准之争
flash填补了当时网页只有文字和图片的单调世界,将媒体(视频、音频、游戏)引入了网页,将网页带进多彩的世界。
Flash能够用仅仅十几K到几百K的体积,呈现出放大也不会失真的矢量彩色动图,甚至还能够做出足以令人沉迷一整天的Flash小游戏。
火柴人
Flash用第三方插件的身份,几乎制霸了网页媒体的标准,让W3C尴尬不已,甚至从某种程度上说,让真正的网页标准推广受阻。
2010年4月,苹果CEO公开表示从此苹果所有产品不再支持flash。flash从此慢慢丧失移动端的市场和地位。
乔布斯支持html5
2012年,安卓宣布不再支持Flash,从此flash彻底失去了移动端市场和地位。
2012年html5标准确立,html5在逐渐制霸移动端的地位时,也直接冲击了flash仅剩的桌面市场,flash桌面市场的份额在逐步下降。
各大浏览器逐步默认禁用Flash,现2019年几乎都全部禁用。
默认禁用Flash
Adobe将在2020年停止开发和更新flash。
2020年停止开发和更新flash
Flash以第三方插件的身份,做着平台该做的事情,但没有推动行业标准统一化,反而企图私立标准。
随着功能的增多,能解码编码H.264,能进行3D渲染,能播放7.1声道环绕声等,功能集于一身变得臃肿,效率变得低下。
Flash非常不安全。Flash能够运行相当复杂的代码,这让Flash非常容易被渗透。加上Adobe在安全方面的不上心,这令Flash安全问题频发。
Flash很不稳定。作为一个插件,它自身频频崩溃也就罢了,还经常拉着浏览器乃至操作系统一起殉情。
Flash加剧了手机的耗电量。
作用是在 HTML 页面中嵌入视频元素。Video定义视频,比如电影片段或其他视频流。
视频播放
有四个是必须的属性:src、controls、width、height属性。
视频播放代码
<video> 元素支持三种视频格式: MP4, WebM, 和 Ogg。
<source> 元素可以链接不同格式的视频文件。浏览器将使用第一个可识别的格式。
支持多格式的视频
video标签体系
.使用VedioView
VideoView videoView = (VideoView)findViewById(R.id.video);
String src = "rtsp://v6.cache7.c.youtube.com/CjYLENy73wIaLQlSNwWysTZuKRMYESARFEIJbXYtZ29vZ2xlSARSBXdhdGNoYP6mvvezrYeZTgw=/0/0/0/video.3gp";
videoView.setVideoURI(Uri.parse(src));
videoView.setMediaController(new MediaController(this));
videoView.requestFocus();
videoView.start();
使用VedioView可以播放本地视频文件,使用setVideoPath
如果播放网络视频的话,据传说上面的方法可以。
哥不相信传说,哥只相信干出来的效果。于是实际测试,没有办法播放!
于是到网上爬文,得知一般的视频播放是先加载完再播放,而RTSP格式的数据流,是边加载边播放。
如何得到youtube视频的rtsp链接呢?
参考网址:http://stackoverflow.com/questions/7937903/get-rtsp-url-from-youtube
不过先要有youtube的帐号才可以,可以随便用一个邮箱登录。
这样得到视频rtsp后,替换到程式中。
失败!!提示,无法播放此视频!!!
是什么原因?不清楚。是不是字符串中的字符解析出了问题呢?
找了很久不知道原因,暂时放弃这个解决方案。
另外,使用MediaPlayer也可以播放视频文件,videoview是调用MediaPlayer实现视频播放的。
这个方案以后有时间再研究,因为想到另外一个更加简便的解决方案。
2. 使用WebView
android中可以利用WebView来打开网页,而youtube提供视频嵌入代码,允许用户在自己的网页嵌入。
这样的话,如果用WebView来打开html格式嵌入的视频,是不是可以直接播放视频呢?
马上开始实验,一般WebView都是直接load一个url,那先调查下使用WebView可否直接加载html,实验结果,loadData可以满足要求。
于是有了下面的代码
browser = (WebView) findViewById(R.id.webview);
browser.requestFocus();
browser.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
WebSettings setting = browser.getSettings();
setting.setJavaScriptEnabled(true);
setting.setSupportZoom(true);
setting.setBuiltInZoomControls(true);
setting.setAllowFileAccess(true);
setting.setJavaScriptCanOpenWindowsAutomatically(true);
setting.setAppCachePath("/data/data/" + getPackageName() + "/app_path/");
setting.setAppCacheEnabled(true);
setting.setUserAgent(0);
setting.setLoadsImagesAutomatically(true);
setting.setSavePassword(true);
setting.setLightTouchEnabled(true);
setting.setPluginsEnabled(true);
setting.setPluginState(PluginState.ON);
setting.setUserAgentString("Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_4; zh-tw) AppleWebKit/533.16 (KHTML, like Gecko) Version/5.0 Safari/533.16");
browser.setWebViewClient(new WebViewClient());
html = "<html><body>hello,hello!" +
"<iframe width=\"1120\" height=\"630\" src=\"http://www.youtube.com/embed/XseHQvZw1vA?autoplay=1\" frameborder=\"0\" allowfullscreen></iframe>" +
"</body></html>"; html = html.replace("?", "%3f"); browser.loadData(html, "text/html", "utf-8");
如何取得youtube视频的嵌入代码,可以参考youtube的官方网站介绍:
http://support.google.com/youtube/bin/answer.py?hl=zh-Hans&answer=171780
上面的代码中还设置了视频可以自动播放。
视频的其他属性的设定可以参考google开发的官方网页:
https://developers.google.com/youtube/player_parameters#enablejsapi
另外,关于特殊字符的替代,可以使html正确加载。
参考:http://stackoverflow.com/questions/7125976/android-use-webview-with-loaddata
在代码中加入:
*请认真填写需求信息,我们会在24小时内与您取得联系。