Android默认的WebView(Android 4.4以前)无法完全支持HTML5视频的所有功能,包括刮擦功能。但是可以通过使用第三方WebView库(例如CrossWalk)来解决此问题,或者使用JavaScript来模拟刮擦功能。以下是一个使用JavaScript模拟刮擦功能的示例代码:
HTML:
CSS:
#scrubberWrapper {
position: relative;
}
#scrubber {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 10px;
background-color: red;
opacity: 0.5;
z-index: 100;
}
JavaScript:
var videoPlayer = document.getElementById('videoPlayer');
var scrubber = document.getElementById('scrubber');
var isMouseDown = false;
videoPlayer.addEventListener('timeupdate', function() {
scrubber.style.width = (videoPlayer.currentTime / videoPlayer.duration) * 100 + '%';
});
scrubber.addEventListener('mousedown', function() {
isMouseDown = true;
});
document.addEventListener('mousemove', function(event) {
if (isMouseDown) {
var scrubberWrapper = document.getElementById('scrubberWrapper');
var deltaX = event.pageX - scrubberWrapper.offsetLeft;
var percent = deltaX / scrubberWrapper.offsetWidth;
videoPlayer.currentTime = percent * videoPlayer.duration;
}
});
document.addEventListener('mouseup', function() {
isMouseDown = false;
});