时间戳

首页 > 解决方案 > Laravel 视频标签未在 Safari 或任何其他 IOS 设备中显示，但可以在 Chrome、Mozilla Firefox 和 IE 中显示

php - Laravel 视频标签未在 Safari 或任何其他 IOS 设备中显示，但可以在 Chrome、Mozilla Firefox 和 IE 中显示

问题描述

我创建了一个大学网站，由于某种原因，HTML 视频标签不适用于 Safari 的最新版本，但适用于苹果和 Windows 的 Chrome 和 Mozilla。

我已经尝试了 stackoverflow HTML5 Video tag not working in Safari、iPhone 和 iPad中的问题之一的解决方案，但没有运气。

我还尝试从两个操作系统检查控制台，Windows 没有错误，但从苹果控制台，它只显示引导程序和 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>

标签： phphtmllaravelvideovoyager

解决方案

推荐阅读