我对android 4.4+的webview的新实现有一个问题。
我的HTML代码:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://s.videos.globo.com/p2/j/api.min.js" type="text/javascript"></script>
<style type="text/css" media="all">
#player-wrapper, #image-wrapper {
width: 100% !important;
height: 100% !important;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
#image-wrapper {
z-index: 999;
background-color: white;
}
</style>
</head>
<body>
<div id="player-wrapper"></div>
<img id="image-wrapper">
<script type="text/javascript">
var element = document.getElementById('player-wrapper');
var image = document.getElementById('image-wrapper');
var player = new WM.Player({
autoPlay: true,
width: 640,
height: 360
});
player.attachTo(element);
image.onclick = function() {
player.playVideo();
image.style.visibility = 'hidden';
};
</script>
</body>
但是规则宽度:100%不起作用,#播放器 Package 器比网页视图大。奇怪的是只有#播放器受到影响,#图像是正确的。
有人能帮我吗?
2条答案
按热度按时间2mbi3lxu1#
问题出在WM.player构造函数上,它将播放器的宽度设置为640 px,这可能比你的viewport要大。在WM.Player构造函数中没有max-width参数,所以你必须使用一个 meta标记。尝试在HTML的head部分添加
<meta name="viewport" content="width=640px">
,这样viewport的大小就可以适应WM.Player构造函数中设置的640 px宽度。okxuctiv2#
这个html标记可能会有用。