{% extends "t_article.twig" %}

{% block article_content %}
     <script>
        videojs.options.flash.swf = "Utilities/MediaPlayer/video-js.swf";
    </script>
 {% set videos = data.videos %}
    <ul class="breadcrumb">

         <li><a href="?action=index">Accueil</a></li>
        <li><a href="?controller=listing&action=mediatheque">Médiathèque</a></li>
        <li><a href="?controller=listing&action=videos">Videos</a></li>
        <li class="active">{{rawing(videos.TITLE)}}</li>

    </ul>

{% if videos %}
   
    <div class=" col-xs-12 article_container">
        <div class="article_title">
            {{rawing(videos.TITLE)}}
           
        </div>
            
             <div class="article_date">
            
              {{rawing(videos.DESCR)}}
             </div>
             <!--div class="article_date">
            
              {{'Le '~ rawing(videos.DATE)}}
             </div-->
             <div class="video_article" style="margin-bottom: 20px;">
			  <div class="col-xs-12" style="margin-bottom:10px;">
           <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="100%" height="320"
                       poster="Media/videos/images/{{videos.IMAGE |raw}}"
                       data-setup="{}">
                    <source src="Media/videos/{{videos.FILE |raw}}" type='video/flv' />

                    {#   <track kind="captions" src="demo.captions.vtt" srclang="fr" label="Francais"></track><!-- Tracks need an ending tag thanks to IE9 -->
                       <track kind="subtitles" src="demo.captions.vtt" srclang="fr" label="Francais"></track><!-- Tracks need an ending tag thanks to IE9 -->
                       #}<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
           </video>
		    </div>
           </div>
    </div>
                    
                       {% else %}
                     
                      <div class="article_container" >
            <div class="article_title">
                Pas de contenu disponible 
            </div>
                            </div>
        {% endif %}
{% endblock %}