this.videoView = plus.webview.create("","videoView",{
height:350,
position:'static',
scrollIndicator:'none',
dock:'top',
top:0
},{src:this.vedioUrl})
this.videoView.loadURL("/hybrid/html/local.html")
currentWebview.append(this.videoView);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1,maximum-scale=1,viewport-fit=cover">
<title>商品详情</title>
<style type="text/css">
.playerBox{
width: 100%;
background: #000;
position: relative;
}
.video{
width: 100%;
height: 350px;
background: #000;
}
#player{
position: absolute;
width: 80px;
height: 80px;
z-index: 100;
background: url('data:image/png;base64,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') no-repeat;
background-size: 100%;
left: 50%;
top:50%;
margin-left: -40px;
margin-top: -40px;
}
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body class="content">
<div class="playerBox">
<video id="video" class="video" src="" controls autoplay>您的浏览器不支持video标签</video>
</div>
<!-- uni 的 SDK -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
<script type="text/javascript">
var plusReady = function (callback) {
if (window.plus) {
callback();
} else {
document.addEventListener('plusready', callback);
}
}
plusReady(function(){
var cur = plus.webview.currentWebview();
var video = document.getElementById('video');
video.setAttribute("src",cur.src);
//var player = document.getElementById("player");
// player.addEventListener('click', function(){
// player.style.display = "none";
// video.play();
// });
})
</script>
</body>
</html>
- 发布:2020-06-02 19:03
- 更新:2020-06-05 15:08
- 阅读:4110
产品分类: uni小程序SDK
手机系统: iOS
手机系统版本号: iOS 13.2
手机厂商: 苹果
手机机型: iphone8plus
页面类型: vue
SDK版本号: 2.7.9.20200527
示例代码:
操作步骤:
iOS13以上的系统,webView全屏播放视频没法退出。
iOS13以上的系统,webView全屏播放视频没法退出。
预期结果:
全屏播放可以看到进度条,可以退出播放,就像在safari浏览器上播放视频差不多。
全屏播放可以看到进度条,可以退出播放,就像在safari浏览器上播放视频差不多。
实际结果:
看不到进度条,看不到退出按钮,
看不到进度条,看不到退出按钮,
bug描述:
iOS webView播放视频问题
描述:拿了一个iOS12的手机测试了一下,全屏之后可以看到进度条,可以退出播放,但是用iOS13之后就有问题了,全屏播放退不出来 ,难道还跟iOS系统有关?
1 个回复
DCloud_iOS_XHY
请提供一个完整的测试工程