zoukankan      html  css  js  c++  java
  • Android中webview html5 自动播放本地视频

    MainActivity代码

    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>
    

      三,html文件(这里用的是html5的video标签来设置自动播放和循环播放)在main下创建 assets文件夹,再创建
    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

    完成

    参考于:https://blog.csdn.net/qiushi_1990/article/details/51438198

    webview 播放video视频 如何实现自动播放

    <video ref="videoAuto" width="1080px" height="1920px" loop > 
         <source src="../../../static/image/logo.mp4" type="video/mp4">
    </video>
    这是自动播放的js
    autoVido(){
            let self= this
            let videos = self.$refs.videoAuto; 
            videos.loop = 'loop';
            videos.play();
        }
  • 相关阅读:
    多测师讲解htm_L标题标签001_高级讲师 肖sir
    Shell特殊变量介绍与实践 $0
    shell 变量定义技巧总结
    shell 环境变量的知识小结
    前端 chrome查看html样式基本操作
    shell 命令 env
    date 命令
    shell 命令 set命令
    shell export 命令
    前端 html span标签
  • 原文地址:https://www.cnblogs.com/changyiqiang/p/11138907.html
Copyright © 2011-2022 走看看