們做安卓開發(fā)時(shí),webview中發(fā)現(xiàn)html5 視頻的autoplay根本沒實(shí)現(xiàn),查看了下android 源碼HTMLVideoElement.cpp也未見相應(yīng)處理,網(wǎng)上有資料顯示,這可能關(guān)乎UI線程與后臺(tái)線程的協(xié)調(diào)性,我看,以后的升級(jí)版本總會(huì)解決這個(gè)問題的。
html5標(biāo)簽屬性不支持,那只有通過javascript來處理了
演示apk下載地址:http://download.csdn.net/detail/qiushi_1990/9513038
github源碼下載:https://github.com/qiushi123/H5Demo
下面是實(shí)現(xiàn)步驟和原理
不要忘記了webview.getSettings().settings.setJavaScriptEnabled(true)啟用javascript,AndroidManifest加入INTERNET權(quán)限
@Override
public void onPageFinished( WebView view, String url) {
view.loadUrl("javascript:try{autoplay();}catch(e){}");
}
實(shí)例代碼
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(){ /** * 當(dāng)前網(wǎng)頁的鏈接仍在webView中跳轉(zhuǎn) */ @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true; } /** * 處理ssl請(qǐng)求 */ @Override public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) { handler.proceed(); } /** * 頁面載入完成回調(diào) */ @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,
也可以引入網(wǎng)上視頻:http://2449.vod.myqcloud.com/2449_43b6f696980311e59ed467f22794e792.f20.mp4
個(gè)人覺得html5結(jié)合Android會(huì)讓未來各種技術(shù)實(shí)現(xiàn)越來越簡(jiǎn)單。到我的個(gè)人博客查看更多h5與安卓的結(jié)合案例。
也可以關(guān)注我github里的其他開源項(xiàng)目。
github:https://github.com/qiushi123?tab=repositories
實(shí)例圖片
效果圖
編程小石頭,為分享干貨而生!據(jù)說,每個(gè)年輕上進(jìn),顏值又高的互聯(lián)網(wǎng)人都關(guān)注了編程小石頭。?
頻是網(wǎng)頁承載內(nèi)容很重要的一個(gè)元素,也是必不可少的網(wǎng)頁表現(xiàn)形式(圖、文、表、視、音)之一。曾經(jīng)網(wǎng)頁要想播放視頻、制作游戲,必須得用第三方插件flash。不僅編寫代碼要使用額外的語言,瀏覽器也必須得裝第三方插件,非常不方便。隨著html5標(biāo)準(zhǔn)逐漸普及,移動(dòng)端、pc端開始拋棄flash,如今幾乎所有的瀏覽器都使用html5來制作視頻。
目標(biāo)
flash是Adobe公司其中之一的產(chǎn)品。它發(fā)起于W3C與WHATWG的第五代web標(biāo)準(zhǔn)之爭(zhēng),它撿了個(gè)大便宜,乘機(jī)定義網(wǎng)頁媒體標(biāo)準(zhǔn)。
W3C與WHATWG的第五代web標(biāo)準(zhǔn)之爭(zhēng)
flash填補(bǔ)了當(dāng)時(shí)網(wǎng)頁只有文字和圖片的單調(diào)世界,將媒體(視頻、音頻、游戲)引入了網(wǎng)頁,將網(wǎng)頁帶進(jìn)多彩的世界。
Flash能夠用僅僅十幾K到幾百K的體積,呈現(xiàn)出放大也不會(huì)失真的矢量彩色動(dòng)圖,甚至還能夠做出足以令人沉迷一整天的Flash小游戲。
火柴人
Flash用第三方插件的身份,幾乎制霸了網(wǎng)頁媒體的標(biāo)準(zhǔn),讓W(xué)3C尷尬不已,甚至從某種程度上說,讓真正的網(wǎng)頁標(biāo)準(zhǔn)推廣受阻。
2010年4月,蘋果CEO公開表示從此蘋果所有產(chǎn)品不再支持flash。flash從此慢慢喪失移動(dòng)端的市場(chǎng)和地位。
喬布斯支持html5
2012年,安卓宣布不再支持Flash,從此flash徹底失去了移動(dòng)端市場(chǎng)和地位。
2012年html5標(biāo)準(zhǔn)確立,html5在逐漸制霸移動(dòng)端的地位時(shí),也直接沖擊了flash僅剩的桌面市場(chǎng),flash桌面市場(chǎng)的份額在逐步下降。
各大瀏覽器逐步默認(rèn)禁用Flash,現(xiàn)2019年幾乎都全部禁用。
默認(rèn)禁用Flash
Adobe將在2020年停止開發(fā)和更新flash。
2020年停止開發(fā)和更新flash
Flash以第三方插件的身份,做著平臺(tái)該做的事情,但沒有推動(dòng)行業(yè)標(biāo)準(zhǔn)統(tǒng)一化,反而企圖私立標(biāo)準(zhǔn)。
隨著功能的增多,能解碼編碼H.264,能進(jìn)行3D渲染,能播放7.1聲道環(huán)繞聲等,功能集于一身變得臃腫,效率變得低下。
Flash非常不安全。Flash能夠運(yùn)行相當(dāng)復(fù)雜的代碼,這讓Flash非常容易被滲透。加上Adobe在安全方面的不上心,這令Flash安全問題頻發(fā)。
Flash很不穩(wěn)定。作為一個(gè)插件,它自身頻頻崩潰也就罷了,還經(jīng)常拉著瀏覽器乃至操作系統(tǒng)一起殉情。
Flash加劇了手機(jī)的耗電量。
作用是在 HTML 頁面中嵌入視頻元素。Video定義視頻,比如電影片段或其他視頻流。
視頻播放
有四個(gè)是必須的屬性:src、controls、width、height屬性。
視頻播放代碼
<video> 元素支持三種視頻格式: MP4, WebM, 和 Ogg。
<source> 元素可以鏈接不同格式的視頻文件。瀏覽器將使用第一個(gè)可識(shí)別的格式。
支持多格式的視頻
video標(biāo)簽體系
.使用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
如果播放網(wǎng)絡(luò)視頻的話,據(jù)傳說上面的方法可以。
哥不相信傳說,哥只相信干出來的效果。于是實(shí)際測(cè)試,沒有辦法播放!
于是到網(wǎng)上爬文,得知一般的視頻播放是先加載完再播放,而RTSP格式的數(shù)據(jù)流,是邊加載邊播放。
如何得到y(tǒng)outube視頻的rtsp鏈接呢?
參考網(wǎng)址:http://stackoverflow.com/questions/7937903/get-rtsp-url-from-youtube
不過先要有youtube的帳號(hào)才可以,可以隨便用一個(gè)郵箱登錄。
這樣得到視頻rtsp后,替換到程式中。
失敗!!提示,無法播放此視頻!!!
是什么原因?不清楚。是不是字符串中的字符解析出了問題呢?
找了很久不知道原因,暫時(shí)放棄這個(gè)解決方案。
另外,使用MediaPlayer也可以播放視頻文件,videoview是調(diào)用MediaPlayer實(shí)現(xiàn)視頻播放的。
這個(gè)方案以后有時(shí)間再研究,因?yàn)橄氲搅硗庖粋€(gè)更加簡(jiǎn)便的解決方案。
2. 使用WebView
android中可以利用WebView來打開網(wǎng)頁,而youtube提供視頻嵌入代碼,允許用戶在自己的網(wǎng)頁嵌入。
這樣的話,如果用WebView來打開html格式嵌入的視頻,是不是可以直接播放視頻呢?
馬上開始實(shí)驗(yàn),一般WebView都是直接load一個(gè)url,那先調(diào)查下使用WebView可否直接加載html,實(shí)驗(yàn)結(jié)果,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的官方網(wǎng)站介紹:
http://support.google.com/youtube/bin/answer.py?hl=zh-Hans&answer=171780
上面的代碼中還設(shè)置了視頻可以自動(dòng)播放。
視頻的其他屬性的設(shè)定可以參考google開發(fā)的官方網(wǎng)頁:
https://developers.google.com/youtube/player_parameters#enablejsapi
另外,關(guān)于特殊字符的替代,可以使html正確加載。
參考:http://stackoverflow.com/questions/7125976/android-use-webview-with-loaddata
在代碼中加入:
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。