iPadOS 16.4 Public Beta 上的 Safari 页面崩溃（如果我们在 adminLTE 主题上使用 videojs 的视频）-解网

问：

当我尝试在 AdminLTE 2.4.5 主题上添加带有 Video.js 的视频时，Safari 页面崩溃了。

我在 jsfiddle 上复制了这个问题，这就是发生的事情。

以下是我们可以在 iPadOS 16.4 Public Beta 版本上测试的小提琴： https://jsfiddle.net/po579jah/2/

代码如下：（使用 VideoJS）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Test Page</title>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.4.5/css/AdminLTE.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.20.2/video-js.min.css">
</head>
<body class="hold-transition layout-top-nav">
<div class="wrapper fixed-header">
    <header class="main-header">
        <!-- Header Navbar -->
        <nav class="navbar navbar-static-top">
        </nav>
    </header>


    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
      <video class="video-js vjs-default-skin vjs-big-play-centered" preload="none" controls="controls" width="400" height="300">
        <source type="video/mp4" src="https://www.w3schools.com/html/mov_bbb.mp4">
      </video>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.4.5/js/adminlte.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.20.2/video.min.js"></script>
<script>
$(document).ready(function() {
  if($('.video-js').length) {
    var vid = $('.video-js').get();
    for(var i in vid) {
      var player = videojs(vid[i], {
        preload: 'auto',
        controlBar: {fullscreenToggle: true},
        playbackRates: [0.8, 1, 1.25, 1.5, 1.75, 2]
      });
    }
  }
});
</script>
</body>
</html>

该问题仅发生在该测试版上，但有什么方法可以解决它吗？

如果有样式（我从videojs中模仿），就会发生这种情况。这是为此的小提琴：https://jsfiddle.net/Lwr4b9u2/<video>position: relative;

代码如下：（不使用 VideoJS）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Test Page</title>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.4.5/css/AdminLTE.min.css">
  <style>
    video {
      position: relative;
    }
  </style>
</head>
<body class="hold-transition layout-top-nav">
<div class="wrapper fixed-header">
    <header class="main-header">
        <!-- Header Navbar -->
        <nav class="navbar navbar-static-top">
        </nav>
    </header>


    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
      <video preload="none" controls="controls" width="400" height="300">
        <source type="video/mp4" src="https://www.w3schools.com/html/mov_bbb.mp4">
      </video>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.4.5/js/adminlte.min.js"></script>
</body>
</html>

css twitter-bootstrap-3 video.js adminlte ipados16

答： 暂无答案

上一个：如何在 Bootstrap 5 的轮播界面中显示上一张和下一张图片的预览

下一个：CSS 变量覆盖 [duplicate]

iPadOS 16.4 Public Beta 上的 Safari 页面崩溃（如果我们在 adminLTE 主题上使用 videojs 的视频）

The Safari page on iPadOS 16.4 Public Beta crashed (if we have video using videojs on adminLTE theme)

评论