I created a university website and for some reason the HTML video tag is not working on Safari's latest versions but working in Chrome and Mozilla of apple and windows.
I already tried the solution from one of the questions here in stackoverflow HTML5 Video tag not working in Safari , iPhone and iPad but no luck.
I also tried inspecting the console from both OS there's no error from windows but from apple console, it only shows "failed to load resource" of bootstrap and jquery. Is there any connection from it that it cause Safari's video issue?
Here is my code for showing the videos.
@php
$vids = DB::SELECT("SELECT * FROM videos WHERE video_department = 'Testimonials' ORDER BY created_at DESC LIMIT 1");
@endphp
@foreach ($vids as $videos)
@php
$getString = $videos->Video_Link;
$trimmed = trim($getString, '[{download_link":"');
$getString1 = $trimmed;
$trimmed1 = explode(",",$getString1);
$trimmed2 = stripslashes($trimmed1[0]);
$trimmed3 = rtrim($trimmed2,'"');
@endphp
<video controls="true" class="video" width="100%" controlsList="nodownload" preload="none" muted playsinline>
<source src='{{ asset("storage/$trimmed3") }}' type="video/mp4" />
<source src='{{ asset("storage/$trimmed3") }}' type="video/webm" />
<source src='{{ asset("storage/$trimmed3") }}' type="video/ogg" />
Your browser does not support the video tag.
</video>
And if you're wondering what's in my header and footer. Here is the HEADER
<head>
<meta charset="utf-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="../images/favicon-16x16.png" sizes="16x16" />
<link rel="shortcut icon" href="{{ voyager_asset('images/logo-icon.png') }}" type="image/x-icon">
<meta name="description" content="">
<meta name="keywords" content="">
<title>University</title>
@yield('toplinkscript')
<link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css">
<link href="{{ asset('css/style.css') }}" rel="stylesheet">
<link href="{{ asset('css/jquery-ui.css') }}" rel="stylesheet">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="{{ asset('js/jquery-1.11.3.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/jssor.slider-27.1.0.min.js') }}" type="text/javascript"></script>
@yield('styles')
<script>
$(window).on('load',function(){
$('#CookiesModal').modal('show');
});
function zoom() {
document.body.style.zoom = "85%"
}
$.ajaxSetup({
headers:
{
'X-CSRF-TOKEN': $('[name="_token"]').val()
}
});
$(document).ready(function(){
$(document).ajaxStart(function(){
$("#preloader").css("display", "block");
});
$(document).ajaxComplete(function(){
$("#preloader").css("display", "none");
});
});
$(document).ready(function() {
$("video").bind("contextmenu",function(){
return false;
});
} );
</script>
<style media="screen">
.designButton {
padding: 4px 25px;
font-size: 14px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: #f5bd03;
border: none;
border-radius: 7px;
box-shadow: 0 6px #999;
}
.designButton:hover {background-color: #003399}
.designButton:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
</style>
<link rel="shortcut icon" href="/images/logos/Logo.png">
</head>
And here is my footer
@yield('botlinkscript')
<script type="text/javascript">
$("button").click(function() {
$('html,body').animate({
scrollTop: $(".second") .offset().top},
'slow');
});
</script>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('sw.js');
});
}
</script>
<script src="{{ asset('js/jquery.min.js') }}" type="text/javascript"></script>
<script src="../../js/bootstrap.min.js" type="text/javascript"></script>
<script src="../../js/menumaker.js" type="text/javascript"></script>
</body>
</html>
