integration/media.html
author durandn
Tue, 28 Apr 2015 15:49:06 +0200
changeset 159 2c995c53bd88
parent 141 f1b68efb360a
permissions -rw-r--r--
Django 1.8 upgrade: adding app_label to models Meta + Using string instead of classes in ForeignKey fields

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="description" content="Interface d'édition de Hashcuts (Mashups vidéo cliquables)" />
        <meta name="copyright" content="Institut de Recherche et d'Innovation (IRI), 2012" />
        <meta name="author" content="Anthony Ly, Raphaël Velt" />
        <title>Hashcut &gt; Media</title>
        <link rel="stylesheet" href="lib/jquery-ui.css" />
        <link rel="stylesheet" href="css/reset.css" />
        <link rel="stylesheet" href="css/common.css" />
        <link rel="stylesheet" href="css/players.css" />
    </head>
    <body>
        <div class="wrap-header-top">
            <div class="wrap-header-top-content">
                <a title="Bibliothèque Publique d'Information" href="#"><img src="img/pompidou-logo.png" alt="Bibliothèque centre Pompidou" /></a>
            </div>
        </div><!-- wrap-header-top -->
        
        <div class="wrap-header">  
            <div class="header">

            <!-- popin user -->
                <div class="popin user info" id="user">
                    <div class="pointer"></div>
                    <div class="popin-content">
                        <h2>Mashup75</h2>
                        <h3>mash@cinecast.fr</h3>
                        <a href="#" class="nb-hashcut">12 Hashcuts</a>
                        <p>
                            <a href="#" class="change-account button">Changer de compte</a>
                        </p>
                    </div>
                </div><!-- popin user info-->

                <div class="popin user signup">
                    <div class="pointer"></div>
                    <div class="popin-content">
                        <h2>Créer un compte :</h2>
                        <form action="#" class="signup-form">
                            <p>
                                <label for="signup-pseudo">Pseudonyme : </label>
                                <input type="text" id="signup-pseudo" name="" />
                            </p>
                            <p>
                                <label for="signup-email">Email : </label>
                                <input type="text" id="signup-email" name="" />
                            </p>
                            <p>
                                <label for="signup-password">Mot de passe : </label>
                                <input type="password" id="signup-password" name="" />
                            </p>
                            <p>
                                <label for="signup-password">Confirmer le mot de passe : </label>
                                <input type="password" id="signup-password" name="" />
                            </p>
                            <p>
                                <input class="button" type="submit" value="Créer le compte">
                            </p>
                        </form>
   
                    </div>
                </div><!-- popin user signup-->

                <div class="popin user login">
                    <div class="pointer"></div>
                    <div class="popin-content">
                        <h2>Connexion :</h2>
                        <form action="#" class="login-form">
                            <p>
                                <label for="signup-pseudo">E-mail : </label>
                                <input type="text" id="signup-pseudo" name="" />
                            </p>
                            <p >
                                <label for="signup-email">Mot de passe : </label>
                                <input type="password" id="signup-email" name="" />
                            </p>
                            <p>
                                <input class="button" type="submit" value="Se connecter">
                            </p>
                            <p>
                                <a class="button signup-button" href="#">Créer un compte</a>
                            </p>
                        </form>
   
                    </div>
                </div><!-- popin user login-->
                
            <!-- /popin user -->
            
                <h1><a title="Hashcut - Le Mashup cliquable" class="clearfix" href="#">
                    <img src="img/hashcut-logo.png" alt="Hashcut" />
                    <span>Le Mashup<br />Cliquable</span>
                </a></h1>
                <div class="title-video-wrap">
                    <p class="title-video" href="#">
                        <span class="category">Vidéo</span>
                        <span class="separator">&raquo;</span>
                        Titre du Média
                    </p>
                </div>
                <div class="Ldt-Social">
                    <div class="Ldt-Social-Url-Container">
                        <a href="#" target="_blank" class="Ldt-Social-Square Ldt-Social-Url" title="Partager le lien"></a>
                        <span class="Ldt-Social-UrlPop">
                            <input class="Ldt-Social-Input"/>
                            <div class="Ldt-Social-CopyBtn">Copier</div>
                        </span>
                    </div>
                    <a href="#" target="_blank" class="Ldt-Social-Fb Ldt-Social-Ext" title="Partager sur Facebook"></a>
                    <a href="#" target="_blank" class="Ldt-Social-Twitter Ldt-Social-Ext" title="Partager sur Twitter"></a>
                    <a href="#" target="_blank" class="Ldt-Social-Gplus Ldt-Social-Ext" title="Partager sur Google+"></a>
                    <a href="#" target="_blank" class="Ldt-Social-Mail" title="Partager par mail"></a>
                </div>
                <div class="profil-wrap">
                    <ul>
                        <li><a href="#" class="all-hashcut">Accueil</a></li>
                        <li><a href="edition.html" class="new-hashcut">Créer un Hashcut</a></li>
                        <li><a href="#user" class="my-profil open-popin">Mon profil</a></li>
                    </ul>
                </div>
            </div><!-- header -->
        </div><!-- wrap-header -->    
            
        <div class="wrapper">   
            <div class="wrap">
                <div class="content clearfix">

                    <div class="left-content">
                        <h2>Lire le Média</h2>
                        <div class="bloc-video">
                            <div class="video">
                                <div class="video-wait"></div>
                            </div>
                            <div class="widget">
                            <div class="Ldt-Slider-Container">
                                <div class="Ldt-Slider"></div>
                            </div>
                            <div class="Ldt-Slider-Time"></div>
        
                            <div class="Ldt-Ctrl">
                                <div class="Ldt-Ctrl-Left">
                                    <div title="Lecture" class="Ldt-Ctrl-button Ldt-Ctrl-Play Ldt-Ctrl-Play-PlayState"></div>
                                    <div class="Ldt-Ctrl-spacer"></div>
                                    <div class="Ldt-Ctrl-InOutBlock">
                                        <div title="Débuter le segment ici" class="Ldt-Ctrl-button Ldt-Ctrl-SetIn"></div>
                                        <div class="Ldt-Ctrl-spacer"></div>
                                        <div title="Finir le segment ici" class="Ldt-Ctrl-button Ldt-Ctrl-SetOut"></div>
                                        <div class="Ldt-Ctrl-spacer"></div>
                                    </div>
                                </div>
                                <div class="Ldt-Ctrl-Right">
                                   <div class="Ldt-Ctrl-spacer"></div>
                                   <div class="Ldt-Ctrl-Time">
                                       <div title="Temps écoulé" class="Ldt-Ctrl-Time-Elapsed">00:00</div>
                                       <div class="Ldt-Ctrl-Time-Separator">/</div>
                                       <div title="Temps total" class="Ldt-Ctrl-Time-Total">1:03:30</div>
                                   </div>
                                   <div class="Ldt-Ctrl-spacer"></div>
                                   <div title="Couper le son" class="Ldt-Ctrl-button Ldt-Ctrl-Sound Ldt-Ctrl-Sound-Full"></div>
                                </div>
                                <div title="Changer le volume" class="Ldt-Ctrl-Volume-Control">
                                   <div class="Ldt-Ctrl-Volume-Bar"></div>
                                </div>
                            </div>
                            
                        </div>
                            <div class="media-segments"></div>
                        </div><!-- bloc-video -->
                    </div><!-- left-content -->
                    
                    <div class="right-content">
                        <h2>Plus d’informations</h2>
                        <div class="more-info-wrap">
                            <table class="more-info ">
                                <tbody>
                                    <tr class="info-title">
                                        <th>Titre :</th>
                                        <td><a href="#">Titre du Média</a></td>
                                    </tr>
                                    <tr class="info-duration">
                                        <th>Durée :</th>
                                        <td></td>
                                    </tr>
                                    <tr class="info-description">
                                        <th>Description : </th>
                                        <td></td>
                                    </tr>
                                    <tr class="info-tags">
                                        <th>Tags : </th>
                                        <td></td>
                                    </tr>
                                </tbody>
                            </table>
    <!--                        <a href="#" class="button cloner">Cloner le Hashcut</a> -->
                        </div>
                        </ul>
                        <h2>Hashcuts utilisant le média</h2>
                        <ul class="list-video">
                            
                        </ul>
                    </div><!-- right-content -->



                </div><!-- content -->

                <div class="footer clearfix">
                    <ul class="links-left">
                        <li><a href="#">Mentions légales</a></li>
                        <li><a href="#">Contacts</a></li>
                    </ul>
                    <ul class="links-right">
                        <li><a title="IRI" href="http://www.iri.centrepompidou.fr/" target="_blank"> <img src="img/logo-iri.png" alt="iri" /></a></li>
                        <li><a title="Cinecast" href="http://cinecast.fr/" target="_blank"><img src="img/logo-cinecast.png" alt="cinecast" /></a></li>
                        <li>© 2012</li>
                    </ul>
                </div><!-- footer -->
            </div><!-- wrap -->
        </div><!-- wrapper --> 
        <!-- JavaScript -->
        <script type="text/javascript" src="lib/jquery.min.js"></script>
        <script type="text/javascript" src="lib/jquery-ui.min.js"></script>
        <script type="text/javascript" src="lib/underscore-min.js"></script>
        <script type="text/javascript" src="lib/ZeroClipboard.js"></script>
        <script type="text/javascript" src="js/hashcut.js"></script>
        <script type="text/javascript" src="js/i18n.js"></script>
        <script type="text/javascript" src="js/common.js"></script>
        <script type="text/javascript">
        
    IriSP.endpoints = {
        content: "/pf/ldtplatform/api/ldt/1.0/contents/",
        project: "/pf/ldtplatform/api/ldt/1.0/projects/",
        segment: "/pf/ldtplatform/api/ldt/1.0/segments/",
        ldt: "http://capsicum//pf/ldtplatform/ldt/cljson/id/__PROJECT_ID__",
        hashcut_page: "hashcut.html?project=__PROJECT_ID__"
    };
    
    var mediarx = /media=([^&#]+)/,
        match = document.location.href.match(mediarx),
        mediaid = match ? match[1] : "f72aa2f4-29bb-11e2-a193-08002791f1b7";
    
    $(function() {
        IriSP.mediaplayer({
            id: mediaid
        });
        social();
    });
        </script>
    </body>
</html>