Web 2.0
Multimédia
Internet - AI
Programmation...



Intégrateur Multimédia Web - Raphael Lecerf Gestionnaire Plateforme
bandeau
 

Player natif & API de VIMEO

20 juillet 2015 VIDEO, LABO & TESTS

Le player natif utilise la classe javascript "froogaloop2.min.js" & "jquery.min.js" version 1.11. Dans l'interface client, il est possible d'y insérer des captions ou sous-titres au format SRT, mais il existe une table de sous-titrage online. Dans cette exemple, les sous-titres sont indépendant du player, il est possible de charger différents sous-titres au format SRT et de les enrichir (gras, italique,couleur...).

 


Avancer le lecteur 30 sec. 45 sec. 60 sec.

 

code de l'embed [ <iframe width="630" height="354" frameborder="0" id="player1" src="https://player.vimeo.com/video/44560200?api=1&amp;player_id=player1&amp;portrait=0&amp;byline=0&amp;title=0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe> ]

quelques explications :

api=1 : pour activer les fonctions de l'API

portrait=0 : ne pas afficher l'avatar de l'utilisateur dans l'embed

byline=0 : ne pas afficher le titre de la vidéo

autoplay=1 : lire la vidéo directement sans cliquer sur play (par défaut 0)

title=0 : ne pas afficher le titre de la vidéo dans l'embed

 

code javascript [ <script>
$(function () {
    var iframe = $('#player1')[0];
    var player = $f(iframe);
    var status = $('.status');
    player.addEvent('ready', function () {
        status.text('ready');
        player.addEvent('pause', onPause);
        player.addEvent('finish', onFinish);
        player.addEvent('seek', seek); 
        player.addEvent('playProgress', onPlayProgress);
    });
    $('button').bind('click', function () {
        player.api($(this).text().toLowerCase());
    });
    function onPause(id) {
        status.text('paused');
    }

    function onFinish(id) {
        status.text('finished');
    }
    function onPlayProgress(data, id) {
        status.text(data.seconds + 's played');
    }
    var iframe = document.getElementById('player1');
    var player = $f(iframe);
    $('.timecode').on('click', function (e) {
        e.preventDefault();
        var seekVal = $(this).attr('data-seek');
        player.api('seekTo', seekVal);
       
    });
   
});
//@ sourceURL=pen.js
</script>

//chargement des sous-titres

<script type="text/javascript">
            $(document).ready(function(){
              var $player = $("#player1");
             $player.vimeoSrt({srt: 'samples/Draculafr.srt'});

                $('#change').click(function () {
                    $player.vimeoSrt('load', 'samples/Draculauk.srt);
                })
            });
        </script>

Dans cette rubrique