The safari page crashed when I tried to add a video with Video.js on AdminLTE 2.4.5 theme.
I replicated the issue on jsfiddle and this is what happened.
Here's the fiddle that we can test on iPadOS 16.4 Public Beta version: https://jsfiddle.net/po579jah/2/
Here's the code: (Using 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>
The issue only occurred on that beta version, but is there any ways how to fix it?
It happened if the <video> has position: relative; style (which I mimicked from videojs). Here's the fiddle for this: https://jsfiddle.net/Lwr4b9u2/
Here's the code: (Without using 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>
