Forum di Matriz

Versione completa: Aprire video Youtube direttamente in FULL SCREEN
Al momento stai visualizzando i contenuti in una versione ridotta. Visualizza la versione completa e formattata.
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
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;
    }
}
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...
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.
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
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".
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;
    }
}
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');
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>
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.
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.
che dici, c'è un modo o devo modificare i parametri fissi?
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.
In che senso quando cambia l'URL??
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.
Ma a me interessa solo ridimensionare questo video. La maggior parte delle volte utilizzo i video di youtube e per quelli non ho problemi...
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/...=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/...=Reportime con width = 600 e height = 300).
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
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
A dir la verità, non saprei. Se intendi il loading di YouTube, ogni tanto succede anche guardando i video via browser su desktop.
Si, è il loading di youtube, ma mi da sempre questo problema con ogni video di ogni pagina, solo sull'app Android...
Facendo una ricerca veloce, ho notato che è un problema molto diffuso.
Prova a seguire questa guida e vedi se riesci a risolvere.
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