安卓 andriod 4.2 html5 video标签loop属性不循环播放的问题

给威海税务大厅调整试电视机顶盒APP时,APP里面是一个HTML5网页,遇到HMLT5无法循环播放视频的问题。经过上网查资料,发现andriod4.2确实会存在这个问题,解决的办法就是不用loop属性,使用Js来控制循环播放。
代码如下:

// 注意下面的代码是在jquery的 $(function(){    }); 里面执行的,也就是页面加载完成之后
var videoDom = $('#video-player'); // 使用Jquery获取video标签
var videofile = videoDom.attr('data');  // 获取video标签的data属性,这个data里面其实是要播放的文件
var video = document.getElementById('video-player'); //使用js获取video标签
video.addEventListener('ended', play); // 给video标签添加播放结束事件,事件函数是play()
play();   // 调用一次play开始播放

// 定义事件函数play
function play() {
    video.src = videofile; // 设置要播放的视频文件
    video.load();  // 加载视频,若视频很短,加载完后再播放,监听canplaythrough事件即可  
    video.play();   // 开始播放            
}   

附上从网上找到的代码:

<video autoplay="autoplay" id = "video" playsinline webkit-playsinline&gt;
   <source type="video/mp4" src="path" />
   <preference name="AllowInlineMediaPlayback" value="true" />
</video>
<script>
      var video = document.getElementById("video");
      video.loop = false;
      video.addEventListener('ended', function() {
      video.currentTime=0.1; video.play(); }, false);
      video.play();
  </script>

关于webview不能自动播放的问题,我在app的代码里进行解决了,代码如下:

// 在onCreate函数里调用
/*加上下面四行代码,可以让WebView里的video标签自动播放,(android4.5下测试通过)*/
int SDK_INT = android.os.Build.VERSION.SDK_INT;
if (SDK_INT > 16) {
	engine.getSettings().setMediaPlaybackRequiresUserGesture(false);  // 这段代码在模拟器上报错,要注释掉
}

根据查到的资料:
webView加载HTML可能出现包括autopaly loop等属性都不能用的情况,可以考虑用更强大的CrossWalk代替,不过会增加包的大小

本文为“老吴笔记”的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注