android webview 播放 video经验总结

 

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

 

下面一段html

 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 </head>
 5 <body onload="test()">
 6  <video id="video01" autoplay="autoplay">
 7   <source src="mov_bbb.mp4" type="video/mp4" />
 8   <p>no support text</p>
 9  </video>
10 </body>
11 <script>
12    
13 function test() {
14     var video01 = document.getElementById("video01");
15     video01.preload = "auto";
16     video01.autoplay = true;
17     video01.loop = true;
18 }
19 </script>
20 </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()方法让其自动播放呢?

 

修改一下代码

 

 1 function test() {
 2 
 3     var video01 = document.getElementById("video01");
 4  var timer = null;
 5  var playing = false;
 6 
 7  video01.addEventListener("playing", function() {
 8   playing = true;
 9  });
10 
11  timer = setInterval(playInterval, 1000);
12 
13 
14  function playInterval() {
15   if (playing === false) {
16    video01.play();
17   } else {
18    if (timer !== null) {
19     clearInterval(timer);
20    }
21   }
22  }
23 }
代码很简单,就是如果视频没有播放则不停的去调用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方式改用本地代码实现。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。