source: spip-zone/_plugins_/owlcarousel/trunk/noisettes/owl-video-player.html @ 108981

Last change on this file since 108981 was 108981, checked in by arnaud.berard@…, 18 months ago

mieux cibler les id quand il a plusieurs videos players dans une page

  • Property svn:eol-style set to native
File size: 3.8 KB
Line 
1[(#REM)<!-- # Owl Video player
2
3
4VideoPlayer avec Owl Carousel et oembed
5
6@see - http://owlgraphic.com/owlcarousel/index.html#customizing
7@param objet -
8@param id_objet -  lister les medias vidéos associés a un objet/id_objet
9@param id_document {array} - un tableau de documents
10@param id-carousel - selecteur id unique du carousel
11@param navigation {str} (oui|non) - affiche les boutons précédents suivants
12@param dots {str} (oui|non) - affiche les point de navigation
13@param : lazyLoad : true (false par défaut) : ne charge que les images visibles pour optimiser le chargement.
14@param afficher_thumbnails {str} (oui|non) - Affichage des miniatures de navigation
15@param thumbs_loop {str} (oui|non) - Rotation infinie des miniatures
16-->]
17
18#SET{id-carousel, #ENV{id-carousel,owlvideoplayer} }
19<style>
20[#(#GET{id-carousel})] .owl-stage-outer {
21        /*height: 40rem;*/
22}
23
24[#(#GET{id-carousel})] .owl-slide {
25        display: block;
26        width: 100%;
27        margin: 0 auto;
28}
29
30.video_thumbs .owl-slide {
31        padding:.5em;
32        border: 1px solid black;
33        border-radius: 3px;
34        margin-right: .5em;
35}
36.video_thumbs .owl-slide:hover,
37.video_thumbs .owl-slide.active {
38        border: 1px solid silver;
39}
40.video_thumbs .owl-slide > a {
41        display: block;
42}
43</style>
44[(#REM) <!-- Active item -->]
45<div id="#GET{id-carousel}" class="owl-carousel owl-theme">
46        <BOUCLE_listDocs(DOCUMENTS spip_documents_liens){mode=document}{objet ?}{id_objet ?}{id_document ?}{media=video}>
47        <div class="owl-slide" data-hash="#GET{id-carousel}_#ID_DOCUMENT" id="#GET{id-carousel}_#ID_DOCUMENT">
48                        [(#OEMBED|oembed{})]
49        </div>
50        </BOUCLE_listDocs>
51</div>
52[(#REM)<!-- Video thumbnails  -->]
53<B_docs>
54<div class="video_thumbs">
55    <div id="[(#GET{id-carousel})_video-thumbnails]" class="diapo_thumbnails owl-carousel">
56    <BOUCLE_docs(DOCUMENTS spip_documents_liens){objet ?}{id_objet ?}
57                                                                                                                                                                        {id_document ?}
58                                                                                                                                                                        {si #ENV{afficher_thumbnails}|=={oui} }{mode=document}{media=video}>
59        [<div class="owl-slide">
60            <a class="video_thumbnail[ (#ENV{doc}|=={#GET{id-carousel}_#ID_DOCUMENT}|oui)active]"
61               href="#[(#GET{id-carousel})_#ID_DOCUMENT]"
62               [ title="(#TITRE|couper{80}|texte_backend)"]>
63                                (#LOGO_DOCUMENT|image_recadre{16:9,'center','transparent'}|image_reduire{200,0}|inserer_attribut{alt,[(#TITRE|couper{80}|texte_backend)]})
64            </a>
65        </div>]
66    </BOUCLE_docs>
67    </div>
68</div>
69</B_docs>
70
71<script>
72jQuery(function($){
73    var mainCarousel = $("[#(#GET{id-carousel})]");
74    mainCarousel.owlCarousel({
75        loop:true,
76        margin:0,
77        items: 1,
78                                autoHeight:true,
79                                autoplay:false,[
80        dots:(#ENV{dots,true}|=={oui}|?{true,false}),][
81        nav:(#ENV{navigation, false}),][
82        lazyLoad: (#ENV{lazyLoad}),]
83        responsive:{
84                                        0:{
85                                                items:1
86                                        }
87                                },
88        URLhashListener:true,
89        startPosition: 'URLHash'
90    });
91
92
93    $("#[(#GET{id-carousel})_video-thumbnails]").owlCarousel({[
94        loop:(#ENV{thumbs_loop,true}|=={oui}|?{true,}),]
95        navigation:false,
96        navText: ["<:owlcarousel:prec:>","<:owlcarousel:suiv:>"],
97        pagination:true,
98        paginationNumbers:true,
99        responsive:{
100                                0:{
101                                        items:2,
102                                        nav:false
103                                },
104                                600:{
105                                        items:3,
106                                        nav:false
107                                },
108                                1000:{
109                                        items:5,
110                                        nav:true,
111                                        loop:false
112                                }
113                }
114    });
115
116        [(#REM)<!--
117        // Arreter le player en cours
118        // quand on clic sur un thumbnail
119        -->]
120        $('.video_thumbnail').each(function(){
121
122                $(this).on('click', function(){
123                        var uid = $(this).attr('href');
124                        var activePlayer = $('.owl-item.active');
125                        var playButton = '<button onclick="jQuery(this).parent().trigger(\'click\');">Lecture</button>';
126
127                        activePlayer.find('.oembed_video .rwd-video-container')
128                                                .removeClass('loading')
129                                                .addClass('oe-play-button')
130                                                .append(playButton)
131                                                .find('iframe').remove();
132                });
133        });
134});
135</script>
Note: See TracBrowser for help on using the repository browser.