javascript - Brightcove 视频在 Fancybox 中卡住

Question

当通过 Fancybox 播放时，我遇到了多个 Brightcove 视频卡住在 :19 秒的问题。这是一个示例:https://jsfiddle.net/qrqwy0qt/1/

重现步骤:

1. 点击“在 Fancybox 中播放视频”按钮
2. 观看视频正确播放
3. 刷新页面，或者点击jsfiddle中的“运行”
4. 在 Fancybox 中再次播放视频，看到它在 19 秒处卡住。

5. 等待大约一分钟，视频显示“无法下载视频。错误代码:PLAYER_ERR_TIMEOUT”，并且控制台中显示以下错误:

   VIDEOJS: ERROR: (CODE:-2 undefined)  i {code: -2, type: "PLAYER_ERR_TIMEOUT", message: ""}
   h @ index.html?videoId=5002405584001&autoplay=1:1300
   
   g.error @ index.html?videoId=5002405584001&autoplay=1:1300
   
   b @ index.html?videoId=5002405584001&autoplay=1:1307
   
   db @ index.html?videoId=5002405584001&autoplay=1:1297
   
   (anonymous function) @ index.html?videoId=5002405584001&autoplay=1:1308
   

当视频正常嵌入到页面上时，这种情况似乎不会发生，您也可以在 jsfiddle 中看到。

此外，对于某些视频播放器，您甚至可以在缓冲区进度栏中看到问题形成:

Video Progress Bar Image

您可以在 19 秒处看到进度条上的颜色变化。视频似乎在加载此点之后的内容时出现问题，除非您手动搜索该点之外的内容。

我在使用其他灯箱(例如 Brightcove 的模态)时也遇到过这个问题。谁能帮我找到解决这个问题的方法吗？

更新:

似乎只有当视频高度超过 270px 时才会出现此问题，不包括视频播放器的“信箱”。您可以使用以下 CSS 属性对此进行测试:

.fancybox-inner{
    max-height:270px; // No freezing issue
    //min-height:275px; // Results in freezing
}

这并不是真正的永久解决方案，因为它会妨碍较大分辨率的响应，但希望这些信息能让我们更接近真正的解决方案。

Answer 1

可以指定浏览器吗？我在 Firefox 和 Chrome 上进行了测试，运行良好。