Question

在移动游戏中，每当我点击包含HTML5视频的可滚动区域的边缘时，我都会注意到屏幕闪烁。此外，滚动似乎在其他各种时刻闪烁。

我有一个codepen在这里复制这个问题 - https://codepen.io/anon/pen/ZxabYR

这是我的HTML：

<div class="item-content">
  <img src="https://res.cloudinary.com/storyforj/image/upload/c_limit,w_1500,f_auto,fl_lossy.preserve_transparency.progressive,q_auto/ugc/3Y7A8506_izkrbg">
  <img src="https://res.cloudinary.com/storyforj/image/upload/c_limit,w_1500,f_auto,fl_lossy.preserve_transparency.progressive,q_auto/ugc/3Y7A8506_izkrbg">
  <video controls loop autoplay controlslist="nodownload" playsinline>
    <source src="https://res.cloudinary.com/storyforj/video/upload/c_limit,w_1500,f_auto,fl_lossy,q_auto/ugc/Chop1_compressed_i4x9gt.webm" type="video/webm">
    <source src="https://res.cloudinary.com/storyforj/video/upload/c_limit,w_1500,f_auto,fl_lossy,q_auto/ugc/Chop1_compressed_i4x9gt.mp4" type="video/mp4">
    <source src="https://res.cloudinary.com/storyforj/video/upload/c_limit,w_1500,f_auto,fl_lossy,q_auto/ugc/Chop1_compressed_i4x9gt.ogv" type="video/ogg"> 
  </video>
</div>

和CSS：

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.item-content {
  width: 100%;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

我尝试过的事情：
1.尝试使用translate：transform3d和。进行硬件加速观点。
2.当你碰到屏幕边缘时试图禁用弹性带效果（我在这方面没有成功 - 是否有可能没有更多）。

任何想法都会非常感激！

Answer 1

所以我填写了一个针对webkit的错误 - https://bugs.webkit.org/show_bug.cgi?id=184025

一个临时解决方案是用基于画布的视频播放器替换视频播放器 - 这是一个演示https://codepen.io/anon/pen/JLOGWE。这里有一大堆代码，但是通过使用这个https://github.com/Stanko/html-canvas-video-player示例，您可以像这样初始化画布视频：

var canvasVideo = new CanvasVideoPlayer({
    videoSelector: '.js-video',
    canvasSelector: '.js-canvas'
});
canvasVideo.play();

这当然有其自身的问题，并且需要重新实现普通视频播放器具有的一些基本功能。尽管如此，它似乎在iOS上相当稳定。

由于视频

1 个答案: