Forum di Matriz
Aprire video Youtube direttamente in FULL SCREEN - Versione stampabile

+- Forum di Matriz (https://www.matriz.it/forum)
+-- Forum: Programmazione Web (https://www.matriz.it/forum/forum-26.html)
+--- Forum: (X)HTML, CSS & JavaScript (https://www.matriz.it/forum/forum-28.html)
+--- Discussione: Aprire video Youtube direttamente in FULL SCREEN (/thread-653.html)



Aprire video Youtube direttamente in FULL SCREEN - Chandler - 25/09/2013

Ciao Mattia,
sto creando delle pagine html5 che verranno richiamate da un'applicazione iPhone. Si tratta di piccole notizie costituite da una immagine in alto e il testo a seguire. In alcuni casi, al posto dell'img ci va il video di youtube e a questo punto sorge la mia domanda.
Si può aprire direttamente il video in FULL SCREEN senza doversi prima aprire in piccolo?? Perchè essendo adattato alla pagina, normalmente cliccando su play apre il video in piccolo e dopo se scelgo full screen e me lo adatta...io vorrei saltare questo passaggio e mandarlo direttamente in fullscreen... è possibile secondo te?? Esiste già qualche libreria che farebbe al caso mio??

Grazie dell'attenzione

Chand


RE: Aprire video Youtube direttamente in FULL SCREEN - Mattia - 25/09/2013

Esistono le API di YouTube con cui è possibile capire quando il video è in esecuzione e poi tramite JavaScript è possibile metterlo a tutto schermo.
Tenendo conto che non è possibile metterlo a tutto schermo direttamente con le API di YouTube, credo che sia una cosa poco supportata dai vari browser (per esempio, non dovrebbe essere supportato da Internet Explorer).

Questo è il codice da incorporare che dà YouTube:
Codice:
<iframe width="420" height="315" src="//www.youtube.com/embed/I9PEhuNfWG4" frameborder="0" allowfullscreen></iframe>

All'iframe si deve aggiungere un id per riuscire a distinguerlo. Quindi il codice diventerà:
Codice:
<iframe id="video" width="420" height="315" src="//www.youtube.com/embed/I9PEhuNfWG4" frameborder="0" allowfullscreen></iframe>

Questo è invece il codice JavaScript (la prima parte carica le API di YouTube e la seconda controlla l'evento "play"):
Codice:
// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// Questa funzione viene eseguita quando le API sono pronte
function onYouTubeIframeAPIReady() {
    // Dico alle API che l'iframe "video" è da trattare
    new YT.Player('video');
}

var done = false;
// Questa funzione viene eseguita quando cambia lo stato del player
function onPlayerStateChange(event) {
    // Se il video sta andando, provo a metterlo fullscreen
    if (event.data == YT.PlayerState.PLAYING && !done) {
        var el = document.getElementById('video');
        if (el.requestFullScreen) {
            el.requestFullScreen();
        } else if (el.mozRequestFullScreen) {
            el.mozRequestFullScreen();
        } else if (el.webkitRequestFullScreen) {
            el.webkitRequestFullScreen();
        }
        done = true;
    }
}



RE: Aprire video Youtube direttamente in FULL SCREEN - Chandler - 26/09/2013

Grazie Mattia per la risposta!
Ti provo ad incollare la pagina html per com'è adesso:
Codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Street food on the road</title>

<!-- Set the page non-zoomable is you have responsive CSS -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0 maximum-scale=1.0">
<!-- Android specific pixel-width value -->
<meta name="viewport" content="target-densitydpi=device-dpi">  

<!-- css -->
<link rel="stylesheet" type="text/css" href="../../css/style.css" />

</head>

<body class="bg-yellow">
    <content>
        <div class="toolbar">
            <span class="btn-home btn-rosa"><a href="../index.html">home</a></span>
            <span class="btn-categories btn-rosa"><a href="javascript:history.back();" >back</a></span>
            L'arte di mangiare (bene) per strada
        </div>
        <div class="contenuti">
            <div class="cover-img">
                <!--<img src="../../images/bolleinpentola/article_1.jpg" width="608" height="238">-->
                <iframe width="560" height="315" src="//www.youtube.com/embed/5aLsBDoXZ7Q?rel=0" frameborder="0" allowfullscreen></iframe>
            </div>
            <div class="text">
                 Lonely Planet ha di recente pubblicato una nuova guida "Street food" che viaggia per le vie di tutto il mondo. Si tratta di una raccolta di cento cibi di strada - dal salato al dolce – raccontati da un team di esperti food writer capitanati da Tom Parker Bowles, una delle massime autorità mondiali in materia. L'offerta dello street food è davvero ampia e sfiziosa ma, come ci spiega la Professoressa Evelina Flachi - Specialista in Scienza dell'Alimentazione e Nutrizionista - il cibo di strada va consumato seguendo alcune piccole accortezze.

            </div>
            
        </div>
        
    </content>
<script type="text/javascript" src="../../js/jquery-1.8.3.min.js"></script>  
<script type="text/javascript" src="../../js/script-video.js"></script>  
</body>
</html>

l'id posso aggiungerlo senza problemi, mentre il codice java dovrei metterlo in un file esterno o inserirlo nella pagina stessa??
Che la funzione in questione non sia supportata in Internet Explorer poco mi importa, dato che in realtà questa pagina verrà visualizzata da un'app iOS, quindi mi interessa che funzioni solo su iPad e iPhone e non su tutti i browser...


RE: Aprire video Youtube direttamente in FULL SCREEN - Mattia - 27/09/2013

Il codice JavaScript è sempre meglio metterlo in un file esterno.
Non so che browser venga utilizzato dentro le app di iOS. Se viene utilizzato Safari, dovrebbe funzionare.


RE: Aprire video Youtube direttamente in FULL SCREEN - Chandler - 29/09/2013

Niente da fare Mattia!
Sembra non funzionare ne da safari, ne da iPhone.
Di seguito, il codice che ho utilizzato:
Codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Street food on the road</title>

<!-- Set the page non-zoomable is you have responsive CSS -->
<meta name="viewport" content="width=device-width, user-scalable=no">
<!-- Android specific pixel-width value -->
<!--<meta name="viewport" content="target-densitydpi=device-dpi">  -->

<!-- css -->
<link rel="stylesheet" type="text/css" href="../../css/style.css" />

</head>

<body class="bg-yellow">
    <content>
        <div class="toolbar">
            <span class="btn-home btn-rosa"><a href="../index.html">home</a></span>
            <span class="btn-categories btn-rosa"><a href="javascript:history.back();" >back</a></span>
            L'arte di mangiare (bene) per strada
        </div>
        <div class="contenuti">
            <div class="cover-img">
                <!--<img src="../../images/bolleinpentola/article_1.jpg" width="608" height="238">-->
                <iframe id="video" width="560" height="315" src="//www.youtube.com/embed/5aLsBDoXZ7Q?rel=0" frameborder="0" allowfullscreen></iframe>
            </div>
            <div class="text">
                 Lonely Planet ha di recente pubblicato una nuova guida "Street food" che viaggia per le vie di tutto il mondo. Si tratta di una raccolta di cento cibi di strada - dal salato al dolce – raccontati da un team di esperti food writer capitanati da Tom Parker Bowles, una delle massime autorità mondiali in materia. L'offerta dello street food è davvero ampia e sfiziosa ma, come ci spiega la Professoressa Evelina Flachi - Specialista in Scienza dell'Alimentazione e Nutrizionista - il cibo di strada va consumato seguendo alcune piccole accortezze.

            </div>
            
        </div>
        
    </content>
<script type="text/javascript" src="../../js/jquery-1.8.3.min.js"></script>  
<script type="text/javascript" src="../../js/script-video.js"></script>  
</body>
</html>
credo di non aver sbagliato nulla...eppure non funzia Sad


RE: Aprire video Youtube direttamente in FULL SCREEN - Mattia - 29/09/2013

Per riuscire ad aiutarti a risolverlo, dovresti pubblicare anche il codice presente in "script-video.js".
P.S.: il tag content non esiste; puoi sostituirlo con un div con classe o id "content".


RE: Aprire video Youtube direttamente in FULL SCREEN - Chandler - 29/09/2013

Hai ragione! Ecco il codice:
Codice:
//-------------------------------------------------------
// RESIZE VIDEO
//-------------------------------------------------------
var videoOrigW;
var videoOrigH;

var videoNewW;
var videoNewH;

$(document).ready(function () {    
    resizeVideo();
}

);

$(window).resize(function () {    
    resizeVideo();
}

);
function resizeVideo(){
    videoOrigW=$(".contenuti .cover-img iframe").width();
    videoOrigH=$(".contenuti .cover-img iframe").height();
    
    var deviceW=window.innerWidth;
    
    var perc= (deviceW/videoOrigW)*100;
    
    var videoNewW = (videoOrigH/100)*perc;
    
    $(".contenuti .cover-img iframe").height(Math.round(videoNewW));
    $(".contenuti .cover-img iframe").width(Math.round(deviceW));
    

    
}

// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('video', {
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
      }

      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = false;
// Questa funzione viene eseguita quando cambia lo stato del player
function onPlayerStateChange(event) {
    //alert('canche')
    // Se il video sta andando, provo a metterlo fullscreen
    if (event.data == YT.PlayerState.PLAYING && !done) {
        var el = document.getElementById('vide0');
        if (el.requestFullScreen) {
            el.requestFullScreen();
        } else if (el.mozRequestFullScreen) {
            el.mozRequestFullScreen();
        } else if (el.webkitRequestFullScreen) {
            el.webkitRequestFullScreen();
        }
        done = true;
    }
}



RE: Aprire video Youtube direttamente in FULL SCREEN - Mattia - 30/09/2013

Nel file Javascript hai messo uno "0" al posto di una "o".

Devi modificare la riga:
Codice:
var el = document.getElementById('vide0');

In questo modo:
Codice:
var el = document.getElementById('video');



RE: Aprire video Youtube direttamente in FULL SCREEN - Chandler - 30/09/2013

Perfetto!! Adesso funziona correttamente

Grazie mille, come al solito

Chand

Approfitto per chiederti un'altra info. In questa pagina ho utilizzato un iframe con un video che non risiede su youtube, ed effettivamente il video viene visualizzato (tra l'altro in full screen) la domanda che mi pongo è se è possibile rendere responsive anche questo iframe visto che per quelli di youtube si adatta mentre in questo caso no. Di seguito il codice:
Codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Street food on the road</title>

<!-- Set the page non-zoomable is you have responsive CSS -->
<meta name="viewport" content="width=device-width, user-scalable=no">
<!-- Android specific pixel-width value -->
<!--<meta name="viewport" content="target-densitydpi=device-dpi">  -->  

<!-- css -->
<link rel="stylesheet" type="text/css" href="../../css/style.css" />

</head>

<body class="bg-yellow">
    <div class="content">
        <div class="toolbar">
            <span class="btn-home btn-rosa"><a href="../index.html">home</a></span>
            <span class="btn-categories btn-rosa"><a href="javascript:history.back();" >back</a></span>
            Arriva il "Verdiano"
        </div>
        <div class="contenuti">
            <div class="cover-img">
                <!--<img src="../../images/bolleinpentola/article_6.jpg" width="608" height="238">-->
                <iframe framespacing='0' frameborder='no' scrolling='no' width='398' height='223' src='http://video.corriere.it/widget/players/player_tv_video_iFrame.shtml?width=398&height=223&videoId=http://static2.video.corriereobjects.it/widget/content/video/rss/video_2b9885ce-1322-11e3-b29f-7fb8749168ea.rss&channelName=REPORTIME&advChannel=Reportime'/></iframe>
            </div>
            <div class="text">
                 Per fare il formaggio si può usare anche il caglio vegetale. È così che i ricercatori della facoltà di Veterinaria dell'università di Parma hanno creato il "Verdiano", la versione totalmente "green" del Parmigiano Reggiano, adatta anche ai consumatori vegetariani, di fede musulmana, ebraica e induista.
            </div>
            
        </div>
        
    </div>
    
<script type="text/javascript" src="../../js/jquery-1.8.3.min.js"></script>  
<script type="text/javascript" src="../../js/script-video.js"></script>    
</body>
</html>



RE: Aprire video Youtube direttamente in FULL SCREEN - Mattia - 01/10/2013

Il problema del video del Corriere è che non si adatta alle dimensioni dell'iframe, ma ha una dimensione fissa.
Infatti nell'URL del video sono presenti i parametri width e height che sono fissi.


RE: Aprire video Youtube direttamente in FULL SCREEN - Chandler - 01/10/2013

Ok, in realtà risulta leggermente "più grande" dello spazio che ho a disposizione, se non c'è un modo per autoadattarlo dovrei mettermi a fare delle prove per scalarlo manualmente, modificando i parametri fissi.


RE: Aprire video Youtube direttamente in FULL SCREEN - Chandler - 02/10/2013

che dici, c'è un modo o devo modificare i parametri fissi?


RE: Aprire video Youtube direttamente in FULL SCREEN - Mattia - 02/10/2013

Si devono modificare i valori dei parametri width e height nell'URL dell'iframe con la larghezza e l'altezza (o forse qualche pixel in meno) dell'iframe.
Ogni volta che cambia l'URL, però, viene ricaricato tutto il contenuto dell'iframe.


RE: Aprire video Youtube direttamente in FULL SCREEN - Chandler - 02/10/2013

In che senso quando cambia l'URL??


RE: Aprire video Youtube direttamente in FULL SCREEN - Mattia - 02/10/2013

All'iframe assegni tramite il parametro src un URL di una pagina (in questo caso dove c'è il video).
Modificando l'URL in base alle dimensioni dell'iframe carichi ogni volta una pagina diversa.


RE: Aprire video Youtube direttamente in FULL SCREEN - Chandler - 02/10/2013

Ma a me interessa solo ridimensionare questo video. La maggior parte delle volte utilizzo i video di youtube e per quelli non ho problemi...


RE: Aprire video Youtube direttamente in FULL SCREEN - Mattia - 02/10/2013

Per ridimensionare il video del Corriere, oltre a modificare le dimensioni dell'iframe, devi anche modificare l'URL nel parametro src dell'iframe.
Adesso l'URL è http://video.corriere.it/widget/players/player_tv_video_iFrame.shtml?width=398&height=223&videoId=http://static2.video.corriereobjects.it/widget/content/video/rss/video_2b9885ce-1322-11e3-b29f-7fb8749168ea.rss&channelName=REPORTIME&advChannel=Reportime (width = 398, height = 223), ma, se modifichi i parametri width e height noterai che le dimensioni del video cambiano (per esempio, http://video.corriere.it/widget/players/player_tv_video_iFrame.shtml?width=600&height=300&videoId=http://static2.video.corriereobjects.it/widget/content/video/rss/video_2b9885ce-1322-11e3-b29f-7fb8749168ea.rss&channelName=REPORTIME&advChannel=Reportime con width = 600 e height = 300).


RE: Aprire video Youtube direttamente in FULL SCREEN - Chandler - 02/10/2013

Ok, adesso va bene! Effettivamente non mi ero soffermato sui parametri inseriti anche all'interno dell'URL, quindi pur modificando gli id width ed height non cambiava nulla...adesso invece direi che ci siamo!

Grazie mille


RE: Aprire video Youtube direttamente in FULL SCREEN - Chandler - 05/11/2013

Ciao Mattia,
avendo la necessità di aprire le stesse pagine dalla stessa app fatta per Andoird, noto che al "Play" non parte il video ma continua a girare il loading... riesci a capire il motivo?

Grazie


RE: Aprire video Youtube direttamente in FULL SCREEN - Mattia - 05/11/2013

A dir la verità, non saprei. Se intendi il loading di YouTube, ogni tanto succede anche guardando i video via browser su desktop.


RE: Aprire video Youtube direttamente in FULL SCREEN - Chandler - 05/11/2013

Si, è il loading di youtube, ma mi da sempre questo problema con ogni video di ogni pagina, solo sull'app Android...


RE: Aprire video Youtube direttamente in FULL SCREEN - Mattia - 06/11/2013

Facendo una ricerca veloce, ho notato che è un problema molto diffuso.
Prova a seguire questa guida e vedi se riesci a risolvere.


RE: Aprire video Youtube direttamente in FULL SCREEN - Chandler - 07/11/2013

mhhhh è probabile che sia un problema di browser, ma ho avuto lo stesso risultato da diversi dispositivi con Android...quindi mi chiedo quale possa essere la soluzione