Video diversi, per diversi dispositivi
Questo script mi è servito per far vedere un video Vimeo diverso per ogni tipo di dispositivo usando le Api di Vimeo.
Per esempio, su un pc veniva mostrato un bel video 16:9, mentre su uno smartphone veniva mostrato un video allungato quasi a tutto schermo.
Questa cosa si poteva fare benissimo con un CSS, ma il problema erano le scritte nel video originale tutte a sinistra. Su un telefonino venivano completamente tagliate e quindi ci si è mossi verso questa direzione.
<div id="maravmeo"></div> <script src="https://player.vimeo.com/api/player.js"></script> <script> (function ($) { $(document).ready(function () { var windowWidth = window.innerWidth ? window.innerWidth : $(window).width(); if (windowWidth < 768 ) { //mobile var options = { url: "https://player.vimeo.com/video/3414985930", //width:100, background: 1, muted:0, badge:0 }; } else if (windowWidth >= 768 && windowWidth < 1200) { //Mobile var options = { url: "https://player.vimeo.com/video/00194860515", //width:100, background: 1, muted:0, badge:0 }; } else { //Tablet var options = { url: "https://player.vimeo.com/video/7830260854", //width:100, background: 1, muted:0, badge:0 }; } var videoPlayer = new Vimeo.Player('maravmeo', options); videoPlayer.on('play', function() { console.log('Played the video'); }); var mute= $('.mute'); var unmute =$('.unmute'); unmute.on('click touch', function(e){ videoPlayer.setMuted(0); $(this).css("display", "none"); $(this).parent('.trigger-volume').find('.mute').css("display", "block"); }); mute.on('click touch', function(e){ videoPlayer.setMuted(1); $(this).css("display", "none"); $(this).parent('.trigger-volume').find('.unmute').css("display", "block"); }); $(window).resize(function(){location.reload();}); }); })(jQuery); </script>
Lascia un Commento
Vuoi partecipare alla discussione?Sentitevi liberi di contribuire!