安卓webview html5 自動(dòng)播放本地視頻，網(wǎng)上視頻，可以循環(huán)播放

們做安卓開發(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)步驟和原理

一，我們?cè)谠O(shè)置的WebViewClient中覆蓋方法：

不要忘記了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>

三，html文件（這里用的是html5的video標(biāo)簽來設(shè)置自動(dòng)播放和循環(huán)播放）

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í)例圖片

效果圖

有任何關(guān)于編程的問題都可以私信我，我看到后會(huì)及時(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為何會(huì)被淘汰？
如何設(shè)置視頻播放？
視頻播放支持哪幾種視頻格式？

flash崛起--網(wǎng)頁標(biāo)準(zhǔn)的恥辱

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)推廣受阻。

flash衰敗--HTML5崛起并全面普及

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興起衰敗皆因自己

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ī)的耗電量。

html5媒體新標(biāo)準(zhǔn)--Video標(biāo)簽

作用是在 HTML 頁面中嵌入視頻元素。Video定義視頻，比如電影片段或其他視頻流。

視頻播放

Video標(biāo)簽的屬性

src 視頻的播放源
controls 瀏覽器自帶的控制條
width 視頻寬度
height 視頻高度
poster 視頻封面
autoplay 自動(dòng)播放
preload 預(yù)加載

有四個(gè)是必須的屬性：src、controls、width、height屬性。

視頻播放代碼

source標(biāo)簽

<video> 元素支持三種視頻格式： MP4, WebM, 和 Ogg。

<source> 元素可以鏈接不同格式的視頻文件。瀏覽器將使用第一個(gè)可識(shí)別的格式。

src 視頻的播放源
Type 視頻格式 MP4, WebM, 和 Ogg

支持多格式的視頻

總結(jié)

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
在代碼中加入：

在線咨詢

上一篇：Web 性能優(yōu)化：使用 CSS font-display 控制字體加載和替換
下一篇：38個(gè)基于Python的Web 開發(fā)框架

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商