Video not working in Safari using HTML5, Symfony and Twig

Question

EDIT: I can't display a video using twig, for example using, {{ asset('public/index/img/video.mp4') }}, however it works if I use a direct link, such as http://www.video.mp4

Any help on how to use twig to display the video as opposed to a link would be greatly appreciated.

The code can be seen below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>LOREM IPSUM</title>

    <!-- Bootstrap Core CSS -->
    <link href="{{ asset('public/index/vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="{{ asset('public/index/vendor/font-awesome/css/font-awesome.min.css') }}" rel="stylesheet" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>

    <!-- Plugin CSS -->
    <link href="{{ asset('public/index/vendor/magnific-popup/magnific-popup.css') }}" rel="stylesheet">

    <!-- Theme CSS -->
    <link href="{{ asset('public/index/css/creative.css') }}" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        #background {
            position: fixed;
            top: 50%;
            left: 50%;
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            z-index: -100;
            -webkit-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
            background-size: cover;
        }
        .container h1 {
            color: white;
        }
    </style>
</head>
<body id="page-top">
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
            </button>
            <a class="navbar-brand page-scroll" href="#page-top">LOREM IPSUM </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a class="page-scroll" href="#about">about</a>
                </li>
                <li>
                    <a class="page-scroll" href="#services">services</a>
                </li>
                <li>
                    <a class="page-scroll" href="#portfolio">Portfolio</a>
                </li>
                <li>
                    <a class="page-scroll" href="#contact">Contac</a>
                </li>

            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>

<header>
    <div class="header-content">
        <div class="header-content-inner">

            <h1 id="homeHeading">LOREM IPSUM</h1>
            <hr>
            <p id="hed">LOREM IPSUMLOREM IPSUMLOREM IPSUMLOREM IPSUMLOREM IPSUMe</p>
            <a href="#" class="btn btn-primary btn-xl page-scroll">Explore</a>
        </div>
    </div>

</header>

<video muted autoplay loop preload="auto" poster="{{  asset('public/index/img/video.jpg') }}" id="background" >
    <source src="{{  asset('public/index/img/video.mp4') }}" type="video/mp4" >
    <source src="{{  asset('public/index/img/video.webm') }}" type="video/webm">
    <source src="{{  asset('public/index/img/video.ogv') }}" type="video/ogg">
</video>


<section class="bg-primary" id="about">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 text-center">
                <h2 class="section-heading">LOREM IPSUMLOREM IPSUM</h2>
                <hr class="light">
                <p class="text-faded">LOREM IPSUMLOREM IPSUMLOREM IPSUMLOREM IPSUMLOREM IPSUM</p>

            </div>
        </div>
    </div>
</section>

<section id="services">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2 class="section-heading">Service</h2>
                <hr class="primary">
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-6 text-center">
                <div class="service-box">
                    <i class="fa fa-4x fa-tree text-primary sr-icons"></i>
                    <h3>LOREM IPSUM</h3>
                    <p class="text-muted">LOREM IPSUMLOREM IPSUMLOREM IPSUMLOREM IPSUMLOREM IPSUM</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 text-center">
                <div class="service-box">
                    <i class="fa fa-4x fa-paper-plane text-primary sr-icons"></i>
                    <h3>LOREM IPSUMLOREM</h3>
                    <p class="text-muted">LOREM IPSUMLOREM IPSUMLOREM IPSUMLOREM IPSUMLOREM IPSUMs</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 text-center">
                <div class="service-box">
                    <i class="fa fa-4x fa-recycle text-primary sr-icons"></i>
                    <h3>LOREM IPSUMe</h3>
                    <p class="text-muted">LOREM IPSUMLOREM IPSUMLOREM IPSUMLOREM IPSUMLOREM IPSUMLOREM IPSUM.</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 text-center">
                <div class="service-box">
                    <i class="fa fa-4x fa-credit-card text-primary sr-icons"></i>
                    <h3>LOREM IPSUM</h3>
                    <p class="text-muted">LOREM IPSUMLOREM IPSUMLOREM IPSUMLOREM IPSUMLOREM IPSUMLOREM IPSUM</p>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="no-padding" id="portfolio">
    <div class="container-fluid">
        <div class="row no-gutter popup-gallery">
            <div class="col-lg-4 col-sm-6">
                <a href="{{ asset('public/index/img/portfolio/thumbnails/1.jpg') }}" class="portfolio-box">
                    <img src="{{ asset('public/index/img/portfolio/thumbnails/1.jpg') }}" class="img-responsive" alt="">
                    <div class="portfolio-box-caption">
                        <div class="portfolio-box-caption-content">
                            <div class="project-category text-faded">
                                LOREM IPSUM
                            </div>
                            <div class="project-name">
                                LOREM IPSUMLOREM IPSUMLOREM IPSUMLOREM IPSUM
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-lg-4 col-sm-6">
                <a href="{{ asset('public/index/img/portfolio/thumbnails/2.jpg') }}" class="portfolio-box">
                    <img src="{{ asset('public/index/img/portfolio/thumbnails/2.jpg') }}" class="img-responsive" alt="">
                    <div class="portfolio-box-caption">
                        <div class="portfolio-box-caption-content">
                            <div class="project-category text-faded">
                                LOREM IPSUM
                            </div>
                            <div class="project-name">
                                LOREM IPSUMLOREM IPSUMLOREM IPSUMLOREM IPSUMLOREM IPSUM
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-lg-4 col-sm-6">
                <a href="{{ asset('public/index/img/portfolio/thumbnails/3.jpg') }}" class="portfolio-box">
                    <img src="{{ asset('public/index/img/portfolio/thumbnails/3.jpg') }}" class="img-responsive" alt="">
                    <div class="portfolio-box-caption">
                        <div class="portfolio-box-caption-content">
                            <div class="project-category text-faded">
                                LOREM IPSUM
                            </div>
                            <div class="project-name">
                                LOREM IPSUMLOREM IPSUMLOREM IPSUMLOREM IPSUMLOREM IPSUMLOREM IPSUM
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-lg-4 col-sm-6">
                <a href="{{ asset('public/index/img/portfolio/thumbnails/4.jpg') }}" class="portfolio-box">
                    <img src="{{ asset('public/index/img/portfolio/thumbnails/4.jpg') }}" class="img-responsive" alt="">
                    <div class="portfolio-box-caption">
                        <div class="portfolio-box-caption-content">
                            <div class="project-category text-faded">
                                LOREM IPSUM
                            </div>
                            <div class="project-name">
                                LOREM IPSUMLOREM IPSUMLOREM IPSUMLOREM IPSUMLOREM IPSUM
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-lg-4 col-sm-6">
                <a href="{{ asset('public/index/img/portfolio/thumbnails/5.jpg') }}" class="portfolio-box">
                    <img src="{{ asset('public/index/img/portfolio/thumbnails/5.jpg') }}" class="img-responsive" alt="">
                    <div class="portfolio-box-caption">
                        <div class="portfolio-box-caption-content">
                            <div class="project-category text-faded">
                                LOREM IPSUM
                            </div>
                            <div class="project-name">
                                LOREM IPSUMLOREM IPSUMLOREM IPSUMLOREM IPSUMLOREM IPSUM
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-lg-4 col-sm-6">
                <a href="{{ asset('public/index/img/portfolio/thumbnails/6.jpg') }}" class="portfolio-box">
                    <img src="{{ asset('public/index/img/portfolio/thumbnails/6.jpg') }}" class="img-responsive" alt="">
                    <div class="portfolio-box-caption">
                        <div class="portfolio-box-caption-content">
                            <div class="project-category text-faded">
                                LOREM IPSUMLOREM IPSUM
                            </div>
                            <div class="project-name">
                                LOREM IPSUMLOREM IPSUMLOREM IPSUMLOREM IPSUMLOREM IPSUM
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</section>

<section id="caja">
    <div class="container text-center">
        <div class="call-to-action">
            <h2>LOREM IPSUM</h2>
            <a href="#" class="btn btn-default btn-xl sr-button">LOREM IPSUM</a>
        </div>
    </div>
</section>

<section id="contact">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 text-center">
                <h2 class="section-heading">LOREM IPSUMLOREM IPSUM</h2>
                <hr class="primary">
                <p>contact?</p>
            </div>
            <div class="col-lg-4 col-lg-offset-2 text-center">
                <i class="fa fa-phone fa-3x sr-contact"></i>
                <p>123456</p>
            </div>
            <div class="col-lg-4 text-center">
                <i class="fa fa-envelope-o fa-3x sr-contact"></i>
                <p><a href="#">LOREM IPSUM</a></p>
            </div>
        </div>
    </div>
</section>



<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="{{ asset('public/index/vendor/bootstrap/js/bootstrap.min.js') }}"></script>

<!-- Plugin JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="{{ asset('public/index/vendor/scrollreveal/scrollreveal.min.js') }}"></script>
<script src="{{ asset('public/index/vendor/magnific-popup/jquery.magnific-popup.min.js') }}"></script>

<!-- Theme JavaScript -->
<script src="{{ asset('public/index/js/creative.min.js') }}"></script>
</body>
</html>

Inspect your final Html with developer tools of your browser and get the final video route generated by twig. Is this correct?. You can copy that route in the address bar at a new tab and see if your web server can reach it. — Hokusai, May 31 '17 at 20:58
Sounds strange, but both have the same link. I extracted & opened both links. Only chrome worked. But got a very interesting error in safari (Failed to load resource: Plug-in handled load). Now I think will be easier to find a solution. Thank you so much Hokusai — sergiers, Jun 01 '17 at 21:51
Does this answer your question? [Failed to Load Resource, Plugin Handled Load on iOS](https://stackoverflow.com/questions/18103103/failed-to-load-resource-plugin-handled-load-on-ios) — Vega, May 07 '23 at 18:58

score 1 · Answer 1 · answered Jun 01 '17 at 21:56

1

Found the error problem: Failed to load resource: Plug-in handled load

This might be helpful for future researchers: Failed to Load Resource, Plugin Handled Load on iOS

answered Jun 01 '17 at 21:56

sergiers

31
6

Definitely, the issue is because using the php web server (bin/console server:run) is not the best idea. Works fine with apache server. – sergiers Sep 02 '17 at 18:44

Video not working in Safari using HTML5, Symfony and Twig

1 Answers1