VideoJS 暂停叠加在移动设备上无法正常工作
我正在尝试在 videojs 播放器暂停时添加叠加层，以便我可以在视频上放置一些广告。然而，移动设备上的覆盖层几乎覆盖了整个播放器，我再也找不到控制栏了。任何人都可以帮助解决这个问题吗？
这是我的代码：
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/video-js.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/video.min.js"></script>
<style>
.parent{
position:relative;
}
.child{
position:absolute;
width:450px;
height:300px;
left:50%;
top:50%;
margin-left:-225px;
margin-top:-99px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
<div id="div112" class="parent">
<video id="video123" class="video-js vjs-default-skin vjs-big-play-centered" preload="auto" data-setup='{"fluid": true, "playbackRates": [0.5, 1, 1.25, 1.5, 2],"nativeControlsForTouch": true}' controls>
<source src="videourl" type='video/mp4'>
</video>
</div>
<script>
videojs("video123").ready(function(){
var div1 = document.createElement('div');
div1.innerHTML = '<iframe src=\"https://woseller.com/woseller-juicyads-page/" width=\"310\" height=\"275\" scrolling=no frameborder=0></iframe>';
div1.className="child";
this.on("pause", function(){
document.getElementById("div112").appendChild(div1);
});
this.on("play", function(){
document.getElementById("div112").removeChild(div1);
});
});
</script>
上面的代码在电脑设备上运行正常，但在移动设备上无法正常运行。覆盖层几乎覆盖了整个播放器，我找不到控制栏。见下图： 播放器在 PC 设备上运行良好
I am trying to add an overlay on when videojs player on pause so I can place some ads on the video. However the overlay on mobile device cover almost the whole player and I can not find the control bar anymore. Can anyone help solve this problem?
Here is my code:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/video-js.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/video.min.js"></script>
<style>
.parent{
position:relative;
}
.child{
position:absolute;
width:450px;
height:300px;
left:50%;
top:50%;
margin-left:-225px;
margin-top:-99px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
<div id="div112" class="parent">
<video id="video123" class="video-js vjs-default-skin vjs-big-play-centered" preload="auto" data-setup='{"fluid": true, "playbackRates": [0.5, 1, 1.25, 1.5, 2],"nativeControlsForTouch": true}' controls>
<source src="videourl" type='video/mp4'>
</video>
</div>
<script>
videojs("video123").ready(function(){
var div1 = document.createElement('div');
div1.innerHTML = '<iframe src=\"https://woseller.com/woseller-juicyads-page/" width=\"310\" height=\"275\" scrolling=no frameborder=0></iframe>';
div1.className="child";
this.on("pause", function(){
document.getElementById("div112").appendChild(div1);
});
this.on("play", function(){
document.getElementById("div112").removeChild(div1);
});
});
</script>
The code above works fine on pc device, but it can not work normal on mobile device. The overlay cover almost the full player and I can not find the control bar. See the image below:
Player works fine on Pc device
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
尽管物理像素分辨率很高，但大多数移动设备上的逻辑像素宽度却出奇地低。 https://viewportsizer.com/devices/。因此，如果播放器是设备宽度，则定义 450x300px 覆盖层只是比播放器大。
Despite the physical pixels resolution, the logical pixel width on most mobile devices is surprisingly low. https://viewportsizer.com/devices/. So defining a 450x300px overlay is simply larger than the player if the player is the device width.