Видеотег Laravel не отображается в Safari или любых других устройствах IOS, но работает в Chrome, Mozilla Firefox и IE - PullRequest
Новая
       25

Видеотег Laravel не отображается в Safari или любых других устройствах IOS, но работает в Chrome, Mozilla Firefox и IE

0 голосов
/ 29 апреля 2019

Я создал университетский веб-сайт и по какой-то причине HTML-тег видео не работает в последних версиях Safari, но работает в Chrome и Mozilla для Apple и Windows.

Я уже пробовал решение по одному из вопросовздесь, в stackoverflow HTML5 Видео тег не работает в Safari, iPhone и iPad , но не повезло.

Я также попытался осмотреть консоль из обеих ОС, в Windows нет ошибки, но в консоли Apple, этопоказывает только «не удалось загрузить ресурс» из начальной загрузки и jquery.Есть ли какая-либо связь с ним, которая вызывает проблемы с видео Safari?

Вот мой код для показа видео.

@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>

И если вам интересно, что у меня в колонтитуле.Вот заголовок 

<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>

А вот мой нижний колонтитул 

    @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>
...