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

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          安卓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)

          1. 了解Flash為何會(huì)被淘汰?
          2. 如何設(shè)置視頻播放?
          3. 視頻播放支持哪幾種視頻格式?

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


          主站蜘蛛池模板: 在线精品动漫一区二区无广告| 国产伦精品一区二区三区不卡| 亚洲欧洲一区二区三区| 国产香蕉一区二区三区在线视频 | 久久精品无码一区二区三区免费| 另类国产精品一区二区| 狠狠做深爱婷婷综合一区| 精品一区二区三区四区在线播放| 亚洲国产成人久久一区二区三区| 性色AV 一区二区三区| 亚洲一区中文字幕| 冲田杏梨高清无一区二区| 无码乱人伦一区二区亚洲| 国产在线精品一区二区高清不卡| 亚洲天堂一区二区三区四区| aⅴ一区二区三区无卡无码| 亚洲国产精品无码第一区二区三区 | 亚洲一区在线视频| 国产伦理一区二区| 国产伦精品一区二区三区视频猫咪| 中文字幕一区二区三区精彩视频| 亚洲一区二区视频在线观看| 一区二区三区内射美女毛片| 免费精品一区二区三区在线观看| 日产亚洲一区二区三区| 国产AV午夜精品一区二区三| 久久精品国产亚洲一区二区三区| 精品国产一区二区二三区在线观看| 精品少妇人妻AV一区二区 | 成人免费区一区二区三区| 国产成人高清精品一区二区三区 | 天堂va在线高清一区| 青青青国产精品一区二区| 色窝窝无码一区二区三区成人网站| 中文字幕一区二区三区有限公司 | 丝袜人妻一区二区三区网站| 亚洲乱色熟女一区二区三区丝袜| 国偷自产av一区二区三区| 性色AV一区二区三区| 国产Av一区二区精品久久| 免费无码AV一区二区|