给威海税务大厅调整试电视机顶盒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>
<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代替,不过会增加包的大小