Android WebView Video完全详解（第二篇）-H5前端开发人员

最新推荐文章于 2021-05-26 18:44:50 发布
最新推荐文章于 2021-05-26 18:44:50 发布
阅读量670 收藏
点赞数
分类专栏： WebView

需要注意的点 
android客户端无法全屏，需要特殊的js处理下，而且js的执行需要前端判断下当前运行

<script id="jsbin-javascript">
    var videoWrapperElements = document.querySelectorAll('.videoWrapper');

    var showFullscreenButton = document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitFullscreenEnabled ? true : false;

    for(var i = 0; i < videoWrapperElements.length; i++) {
      setUpVideoElement(videoWrapperElements[i]);
    }

    function setUpVideoElement(videoWrapperElement) {
      var videoElement = videoWrapperElement.querySelector('video');
      var fullscreenBtn = videoWrapperElement.querySelector('.fullscreenBtn');
      if(fullscreenBtn) {
        if(showFullscreenButton) {
          fullscreenBtn.addEventListener('click', function () {
            // Following code from: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
            if (videoElement.requestFullscreen) {
              videoElement.requestFullscreen();
            } else if (videoElement.msRequestFullscreen) {
              videoElement.msRequestFullscreen();
            } else if (videoElement.mozRequestFullScreen) {
              videoElement.mozRequestFullScreen();
            } else if (videoElement.webkitRequestFullscreen) {
              videoElement.webkitRequestFullscreen();
            }
          });
        } else {
          fullscreenBtn.style.display = 'none';
        }
      }

      videoElement.addEventListener('click', function(evt) {
        if (evt.target.paused) {
          evt.target.play();
        } else {
          evt.target.pause();
        }
      });
    }
  </script>


以上就是特别处理的点，大概是需要点击的时候主动调一下全屏的方法，一定是只有android才加载这个js

再来一段更直接的直接给你判断好

var fullscreen = function(elem) {
    var prefix = 'webkit';
      if ( elem[prefix + 'EnterFullScreen'] ) {
        return prefix + 'EnterFullScreen';
      } else if( elem[prefix + 'RequestFullScreen'] ) {
        return prefix + 'RequestFullScreen';
      };
    return false;
};
function autoFullScrenn(v){
    var ua   = navigator.userAgent.toLowerCase();  
    var Android = String(ua.match(/android/i)) == "android";
    // if(!Android) return;//非android系统不使用;
    var video  = v,doc = document;
    var fullscreenvideo = fullscreen(doc.createElement("video"));
    if(!fullscreen) {
        alert("不支持全屏模式");
        return;
    }
    video.addEventListener("webkitfullscreenchange",function(e){
        if(!doc.webkitIsFullScreen){//退出全屏暂停视频
            this.pause();
            // this.pause();
        };
    }, false);
    video.addEventListener("click", function(){
        this.play();
        video[fullscreenvideo]();
    }, false);
    video.addEventListener('ended',function(){
        doc.webkitCancelFullScreen(); //播放完毕自动退出全屏
    },false);
};
// autoFullScrenn(video_obj)



举个栗子

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
  <style id="jsbin-css">
    html, body {
      margin: 0;
      padding: 0;
    }

    body {
      padding: 16px;
      box-sizing: border-box;
    }

    video {
      width: 100%;
      max-width: 100%;

      background-color: #ffffff;
    }

    .videoWrapper {
      position: relative;
      padding-bottom: 56.25%; /* 16:9 */
      padding-top: 25px;
      height: 0;
    }

    .videoWrapper object,
    .videoWrapper embed,
    .videoWrapper video{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .videoWrapper .fullscreenBtn {
      position: absolute;
      bottom: 0;
      right: 0;

      width: 48px;
      height: 48px;

      background: none;
      border: 0;

      margin: 0;
      padding: 8px;
    }

    .videoWrapper .fullscreenBtn svg {
      width: 32px;
      height: 32px;

      fill: #4355B6;
    }
  </style>
</head>
<body>

  <h1>No Poster Attribute</h1>
  <div class="videoWrapper">
    <video controls>
        <source src="http://simpl.info/video/video/chrome.webm" type="video/webm">
        <source src="http://simpl.info/video/video/chrome.mp4" type="video/mp4">
      <p>This browser does not support the video element.</p>
    </video>
  </div>

  <h1>Poster Attribute</h1>
  <div class="videoWrapper">
    <video controls poster="file:///android_asset/www/poster.jpg">
        <source src="http://simpl.info/video/video/chrome.webm" type="video/webm">
        <source src="http://simpl.info/video/video/chrome.mp4" type="video/mp4">
      Your browser does not support HTML5 video.
    </video>
  </div>

  <h1>No Controls</h1>
  <div class="videoWrapper">
    <video>
        <source src="http://simpl.info/video/video/chrome.webm" type="video/webm">
        <source src="http://simpl.info/video/video/chrome.mp4" type="video/mp4">
      Your browser does not support HTML5 video.
    </video>
    <button class="fullscreenBtn">
      <!-- Icon from: https://useiconic.com/open/ -->
      <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
        <path d="M0 0v4l1.5-1.5 1.5 1.5 1-1-1.5-1.5 1.5-1.5h-4zm5 4l-1 1 1.5 1.5-1.5 1.5h4v-4l-1.5 1.5-1.5-1.5z" />
      </svg>
    </button>
  </div>

  <script id="jsbin-javascript">
    var videoWrapperElements = document.querySelectorAll('.videoWrapper');

    var showFullscreenButton = document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitFullscreenEnabled ? true : false;

    for(var i = 0; i < videoWrapperElements.length; i++) {
      setUpVideoElement(videoWrapperElements[i]);
    }

    function setUpVideoElement(videoWrapperElement) {
      var videoElement = videoWrapperElement.querySelector('video');
      var fullscreenBtn = videoWrapperElement.querySelector('.fullscreenBtn');
      if(fullscreenBtn) {
        if(showFullscreenButton) {
          fullscreenBtn.addEventListener('click', function () {
            // Following code from: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
            if (videoElement.requestFullscreen) {
              videoElement.requestFullscreen();
            } else if (videoElement.msRequestFullscreen) {
              videoElement.msRequestFullscreen();
            } else if (videoElement.mozRequestFullScreen) {
              videoElement.mozRequestFullScreen();
            } else if (videoElement.webkitRequestFullscreen) {
              videoElement.webkitRequestFullscreen();
            }
          });
        } else {
          fullscreenBtn.style.display = 'none';
        }
      }

      videoElement.addEventListener('click', function(evt) {
        if (evt.target.paused) {
          evt.target.play();
        } else {
          evt.target.pause();
        }
      });
    }
  </script>
</body>
</html>

3个video 分别展示三种对视频全屏按钮的样式 
Android开发人员可以直接把这个文件拷贝下 名字随便index.html 
就可以扔在本地调试了。

Luckie stone
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CrossWalk WebView添加支持WebRTC及H264编解码
bingdele的专栏
06-05 5257
背景 可行方案 获取代码 编译 gn args out/Android-Release ninja -C out/Android-Release xwalk_core_library
Android离线webview调试工具,开发H5混合应用必备
05-14
在Android平台上，开发混合应用程序（Hybrid App）时，经常需要用到WebView来加载和展示H5内容。然而，对于H5页面的调试工作，开发者通常依赖于Chrome浏览器的开发者工具（Chrome DevTools），其中的`chrome://...
安卓webview中html.requestFullscreen无效的解决方法
A498930275的博客
04-23 2389
安卓的webview默认不支持html元素的全屏方法。 资料 安卓文档 onShowCustomView 文档显示要全屏，必须实现 onShowCustomView和onHideCustomView方法 Notify the host application that the current page has entered full screen mode. After this call, web content will no longer be rendered in the WebView, b
Android WebView Video完全详解（第一篇）-Android开发人员
长江某菜鸟的博客
11-01 583
转载请注明出处 http://blog.csdn.net/u014513456/article/details/54381361 Author：ruanjianjiagou@163.com 背景 最近公司某项功能需要WebView加载H5的Video，搜索很多资料后发现很多问题，都是关键代码片段，因为每个项目每个人产生的问题不同，Video在webview中加载不出来原因很多，可能是客户端少了参...
WebView遇坑记 Refused to load the image ‘android-webview-video-poster:default_video_poster/
u010232308的博客
09-11 1028
WebView去加载一个H5的时候，加载一个Video的标签遇到的错误 Refused to load the image 'android-webview-video-poster:default_video_poster/4241030533028907709' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'img-src' was not ex
android webview 全屏播放H5 （Playing HTML5 video on fullscreen in android webview）
weixin_33762130的博客
09-14 575
最近关于webview的问题遇到的比较多，关于如何在webview中全屏播放视频，网上有很多种解决方法，这里也有一种方法，试了几种后发现还是这种比较好用。 这里就拿出来与大家分享，出自http://stackoverflow.com/questions/15768837/playing-html5-video-on-fullscreen-in-android-webview#userconsen...
Android开发之在Webview中全屏播放视频
ShuSheng007的程序人生
08-25 1419
【版权申明】非商业目的可自由转载 博文地址： 出自：shusheng007 系列文章 Android开发之Webview中原生与JS交互 Android开发之从Webview中选择本机文件 概述 出于对成本或者其他原因的考虑，在移动开发中有时会采用混合开发的方式,其中一种方式就是让Web页面跑在原生的WebView里面。本文我们来谈论一下如何在webview中全屏播放视频。 实现方法 本文只谈...
Android WebView组件用法详解
01-06
本文实例讲述了Android WebView组件用法。分享给大家供大家参考，具体如下： 如果想WebView能够访问网络，必须在AndroidManifest.xml里面添加权限 <uses android:name=android.permission.INTERNET> main.xml很...
Android的WebView与H5前端JS代码交互的实例代码
08-29
Android WebView 与 H5 前端 JS 代码交互是移动应用开发中的一项重要技术，本篇文章将介绍 Android 的 WebView 与 H5 前端 JS 代码交互的实例代码，解决了 Android 应用程序中 WebView 与 H5 前端 JS 代码之间的交互...
腾讯x5webview和JS交互的三方库-Android开发
05-26
X5Bridge X5Bridge Android本机和JavaScript之间的桥梁的库Google本机具有一组通信，实际上，它也可以完成回调交互i X5Bridge X5Bridge Android本机和JavaScript之间的桥梁的库一组通信，实际上，它也可以完成回调...
Android Webview视频播放器
04-17
Android下使用Webview实现的HTML5视频播放器，播放本地视频时请加载video目录下的1.html
详解android webView独立进程通讯方式
01-20
在Android开发中，WebView是一个非常重要的组件，它允许我们在应用程序中嵌入网页内容。然而，WebView在加载复杂或资源密集型网页时可能会消耗大量内存，甚至导致应用程序出现内存溢出（Out Of Memory, OOM）问题。...
webview 播放video 标签视频 可全屏播放代码
deyi2016的博客
09-30 398
WebViewMovie01Activity.java public class WebViewMovie01Activity extends AppCompatActivity { /** * DEMO04: */ HTML5WebView mWebView; public String url = "http://zy.512wx.com...
WebView实现全屏播放的一种方法
秉心说
10-21 7129
用过WebView的开发者们肯定都知道这里面的坑数不胜数，加载缓慢，内存泄露，文件选择……没错，全屏播放视频，这又是一个大坑。一个没有修饰过的原生WebView几乎不可能在某一个主流视频网站实现全屏播放，倘若在客户端自己实现简单的播放器，链接拿过来，摆个VideoView，想怎么全屏怎么全屏，放在WebView上，一切就悲剧了，大多数情况下点击全屏按钮是没有反应的，或者无法实现横屏全屏。今天来介绍一
webview是用软解码或者硬解码可能导致视频播放有声音没有图像
Leon的小黑屋
11-07 2255
//Rendering mode // //                    if (Build.VERSION.SDK_INT >= 11) { //                        mCurrentWebView.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null); //                  
webview编码
u010527630的专栏
03-29 457
web.loadData(s, "text/html; charset=UTF-8", null);//这种写法可以正确解码
android webview video标签,Android WebView支持html5 video标签
weixin_33212915的博客
05-26 641
看到这个标题很兴奋了吧，但是内容肯定会让你失望。。。这先告诉结果了，我没在2.3上搞出什么名堂来。起因是项目需要在android 2.3.*的版本上调用有video标签的页面，调研是否支持。百度，google一大堆，首先确定的是2.3以上是对html有支持的，3.0以上支持的比较好，2.3.*系列貌似问题比较多。支持依据可以看看以下两个网站：3.0以上版本webview对html5的支持也是默认关...
android webview 播放 video经验总结
weixin_34198453的博客
02-10 391
在目前PC浏览器上，对video的支持基本都没什么问题了。但是如果用webview去跑这样的页面就会遇到许多问题。 下面一段html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 </head> 5 <body onload="test()"> 6 <v...
Android webview 添加请求头Access-Control-Allow-Origin
最新发布
02-21
在Android WebView中添加请求头Access-Control-Allow-Origin可以通过以下步骤实现： 1. 创建一个自定义的WebViewClient类，继承自WebViewClient，并重写shouldOverrideUrlLoading方法。 ```java public class ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值