在目前PC浏览器上，对video的支持基本都没什么问题了。但是如果用webview去跑这样的页面就会遇到许多问题。

下面一段html

 <!DOCTYPE html>

 <html>

 <head>

 </head>

 <body onload="test()">

  <video id="video01" autoplay="autoplay">

   <source src="mov_bbb.mp4" type="video/mp4" />

   <p>no support text</p>

  </video>

 </body>

 <script>

 function test() {

     var video01 = document.getElementById("video01");

     video01.preload = "auto";

     video01.autoplay = true;

     video01.loop = true;

 }

 </script>

 </html>

用js控制视频的自动播放，循环播放等特性，在PC上都没啥问题。但是如果用webview去装载的话，自动播放和循环播放可能用不了。

在android的webview上autoplay自动播放这个特性支持跟设备有关系，和android的版本号没关系（这个试过的）。并且大多数设备都是不能自动播放的。并且loop这个特性也基本上是不支持的。

在webview经历了以下调试过程。
如果将video的controls打开，让它显示控件。点击播放控件是可以正常播放的。这个可以证明播放mp4视频本身是没有问题的。
 

如果在页面上自己添加一个按钮，通过点击按钮来调用video.play()方法，能不能播放呢。

        <div>

            <button id="playBtn01">play</button>

        </div>

js代码

var playBtn01 = document.getElementById("playBtn01");

playBtn01.addEventListener("click", function() {

 video01.play();

});

这样是可以正常播放的。

于是便会想到能不能在某个特定的时候（例如某个事件发生，或者定时器时间到）调用video.play()方法让其自动播放呢？

修改一下代码

 function test() {

     var video01 = document.getElementById("video01");

  var timer = null;

  var playing = false;

  video01.addEventListener("playing", function() {

   playing = true;

  });

  timer = setInterval(playInterval, 1000);

  function playInterval() {

   if (playing === false) {

    video01.play();

   } else {

    if (timer !== null) {

     clearInterval(timer);

    }

   }

  }

 }
代码很简单，就是如果视频没有播放则不停的去调用video.play方法。如果成功了就清空js的计时器。
因为前面的按钮事件调用video.play是可以正常播放的，所以刚开始以为这个方案能成。但实际上这种方案是走不通的。
 
疑惑了许久也不知道为什么，代码都是一样的没问题。再后来才知道原因，
原来autoplay自动播放在移动设备上可能会导致很不好的用户体验，因此大多数移动设备不支持自动播放。如果要播放必须用户手工主动触发，比如点击一个按钮或者其他操作。类似setInterval此类没有用户参与过程的播放是行不通的。
 
使用setInterval或者其他非用户交互的事件来触发video的播放看起来现在是不可能了。但是有一个唯一的例外。
这个唯一的例外就是android native段的onPageFinishload方法中的回调是可以的。也就是说如果在onPageFinishload调用js来执行video.play方法则也是可以自动播放的。onPageFinishload是webview装载完内容后触发的，虽然没有用户交互但是它可以用来做自动播放。
 
修改一下android段的代码，重写WebViewClient的onPageFinished方法，利用loadUrl来执行一个js函数。
@Override

public void onPageFinished(WebView view, String url) {

 super.onPageFinished(view, url);

 //......

 view.loadUrl("javascript:onPageFinished();");

}

在js端

function onPageFinished() {

    console.log("page -- onPageFinished");

    //在这里调用video.play播放便可以了

    var video01 = document.getElementById("video01");

    video01.play();

}

这样便可以自动播放了。

loop的问题
其实最后Loop的问题我也没有解决。不过还是愿意写出来大家看看，看有没有哪位朋友知道怎么回事。
 
因为设备很有可能不支持loop循环。但是通过上面的方法自动播放是可以了。于是想到，等到视频播放完成后的pause事件，这个事件一出来，我们将webview重新load一遍或者webview销毁重新建一个webview。等于是重头来了一遍了，重头来一遍也是自动播放。这样给人感觉就是自动loop了。
 
但这样的效果不佳，一方面是播放完成后重新load页面知道视频播放出来，中间会有间断的过程，看起来不是很连贯。
另外一个很致命的问题是，我尝试过webview销毁，重建这种循环，但是来回几次后，程序就crash掉了。这个crash原因很复杂，并且也是认机器的，所以也就不多说了。
 
总之现在移动设备对html5 的video支持的还不是很好，用起来各种各样的麻烦。最后我的项目也还是放弃了html5方式改用本地代码实现。

android webview 播放 video经验总结的更多相关文章

  1. [转]Android WebView播放视频（包括全屏播放），androidwebview

    Android WebView播放视频(包括全屏播放),androidwebview 最近项目开发中用到了WebView播放视频的功能,总结了开发中犯过的错误,这些错误在开发是及容易遇到的,所以我这里 ...

  2. Android WebView播放视频flash(判断是否安装flash插件)

    Android WebView播放flash(判断是否安装flash插件)  最近帮一个同学做一个项目,断断续续的一些知识点记录一下.一个页面中有一个WebView,用来播放swf,如果系统中未安装f ...

  3. 【转】Android WebView 播放视频总结

    今天发现 WebView里播放优酷的视频点击播放按钮后没反应,于是看官方文档和搜索解决,下面是我在别人基础上做的补充:   android webView 无法播放视频,无法暂停,继续播放视频问题,无 ...

  4. Android 中WebView中video视频自动播放

    转载于https://juejin.im/post/5d5ac7eb51882562744fae37 如果有使用过Android的WebView 播放视频的伙伴们一定会发现, 在点开视频网页的时候并没 ...

  5. video/audio在ios/android上播放兼容

    1.audio自动播放 <audio src='xxx.mp3' autoplay></audio> 上面是audio标签autoplay属性是自动播放,但是在安卓部分浏览器和 ...

  6. 使用Vitamio打造自己的Android万能播放器（6）——在线播放（播放列表）

    前言 新版本的VPlayer由设计转入开发阶段,预计开发周期为一个月,这也意味着新版本的Vitamio将随之发布,开发者们可以和本系列文章一样,先开发其他功能.本章内容为"在线视频播放列表& ...

  7. Android WebView 详解

    相关API 相关类介绍 WebResourceRequest 添加于API21,封装了一个Web资源的请求信息,包含:请求地址,请求方法,请求头,是否主框架,是否用户点击,是否重定向 WebResou ...

  8. WebView&HTML5-----使用WebView播放HTML5视频文件

    一.问题描述 HTML5提供了很多新的特性比如,视频播放.web本地存储.地理定位.应用缓存.Canvas等,但这些特性需要浏览器的支持,在Android应用中我们可以使用WebView构建Web应用 ...

  9. Atitit.android webview h5运行环境总结

    Atitit.android webview h5运行环境总结 1. WebView 的使用1 2. Js调用java1 3. Js调用java 跟个swt的比较2 3.1. Swt是BrowserF ...

随机推荐

  1. Java/Android 网络请求框架/库

    Android 图片缓存框架  最上面的最优先 com.facebook.fresco:fresco:0.12.0                7.26.2016最新 Universal-Image ...

  2. 配置idea解决乱码

    在项目开发过程中,我们一般希望在修改完代码之后不重启项目即可提现出修改的结果,那么热部署项目就显得十分必要了.在idea中将项目热部署至tomcat中的方法如下: 首先打开tomcat配置界面,在se ...

  3. linux磁盘分区fdisk命令详解

    1.什么是分区?    分区是将一个硬盘驱动器分成若干个逻辑驱动器,分区是把硬盘连续的区块当做一个独立的磁硬使用.分区表是一个硬盘分区的索引,分区的信息都会写进分区表.2.为什么要有多个分区? 防止数 ...

  4. 1、Shell命令行书写规则

    学习目标Shell命令行书写规则 正文对Shell命令行基本功能的理解有助于编写更好的Shell程序,在执行Shell命令时多个命令可以在一个命令行上运行,但此时要使用分号(;)分隔命令,例如: ro ...

  5. php对图片加水印--将图片先缩小，再在上面加水印

    方法: /**  * 图片加水印(适用于png/jpg/gif格式)  *  * @author flynetcn  *  * @param $srcImg  原图片  * @param $water ...

  6. C# WinForm API 改进单实例运行

    在普通的单实例中,第二次点击软件快捷方式的时候,往往简单提示"系统已经运行",而不是把第一次打开的软件主窗体显示出来,下面演示如果主窗体已经打开则把第一次打开的主窗体放置到最前面; ...

  7. PHP学习9——MySQL数据库

    主要内容: MySQL的启动 MySQL数据库操作 数据库表设计 创建和查看表 修改表结构 MySQL语句操作 数据库备份与恢复 PHP操作MySQL数据库 面向对象的数据库操作 MySQL数据库是目 ...

  8. C#导入Excel|读取Excel方法

    OleDbConnection读取 /// <summary>       /// 返回Excel数据源       /// </summary>       /// < ...

  9. redis(4)事务

    一.事务 一般来说,事务必须满足4个条件,也就是我们常说的ACID: 1)Atomicity 原子性:一个事务中的所有操作要么全部完成,要么全部不完成,不会结束在中间的某个环节.事务在执行过程中发生错 ...

  10. 8、springboot之定时任务

    @Configuration @EnableScheduling public class SchedulingConfig { @Scheduled(cron = "0/5 * * * * ...