{{-- Layout --}}
@extends('teacher.layout.layout')
{{-- Page Title --}}
@section('title','GAS LMS | Attachment Preview')
{{-- Breadcrumb section --}}
@section('breadcrumb')
    @include('components._breadcrumb', ['items' => ['Course Overview' => url()->previous()]])
@endsection
@section('style')
<link href="https://vjs.zencdn.net/7.20.3/video-js.css" rel="stylesheet" />

@endsection
{{-- Content --}}
@section('content')
<div class="row">

 <div class="col-md-2"></div>

 <div class="col-md-8">
<div class="card card-custom gutter-b">
    <div class="card-header">
     <div class="card-title">
      <h3 class="card-label">
       {{$material_attachment->file_name}}
       <small></small>
      </h3>
     </div>
    </div>
    <div class="card-body d-flex justify-content-center">
        <video
        id="my-video"
        class="video-js vjs-big-play-centered"
        controls
        preload="auto"
        width="auto"
        height="auto"
        poster="{{env('SECURE_ASSETS').'/assets/media/logos/logo.png'}}"
        data-setup="{}"


      >
        <source src="{{$download_url}}" type="{{$mimeType}}" />
        {{-- <source src="MY_VIDEO.webm" type="video/webm" /> --}}
        <p class="vjs-no-js">
          To view this video please enable JavaScript, and consider upgrading to a
          web browser that
        </p>
      </video>
    </div>
   </div>
</div>
   <div class="col-md-2"></div>

</div>
   @endsection
@section('js')
<script src="https://vjs.zencdn.net/7.20.3/video.min.js"></script>
<script>
 document.addEventListener('contextmenu', event => event.preventDefault());

</script>