Messaggi: 578
Discussioni: 47
Registrato: Nov 2008
Reputazione:
0
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
Messaggi: 1.323
Discussioni: 171
Registrato: Nov 2006
Reputazione:
2
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;
}
}
Mattia!
Messaggi: 578
Discussioni: 47
Registrato: Nov 2008
Reputazione:
0
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...
Messaggi: 1.323
Discussioni: 171
Registrato: Nov 2006
Reputazione:
2
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.
Mattia!
Messaggi: 578
Discussioni: 47
Registrato: Nov 2008
Reputazione:
0
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
Messaggi: 1.323
Discussioni: 171
Registrato: Nov 2006
Reputazione:
2
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".
Mattia!
Messaggi: 578
Discussioni: 47
Registrato: Nov 2008
Reputazione:
0
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;
}
}
Messaggi: 1.323
Discussioni: 171
Registrato: Nov 2006
Reputazione:
2
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');
Mattia!
Messaggi: 578
Discussioni: 47
Registrato: Nov 2008
Reputazione:
0
30/09/2013 20:30
(Questo messaggio è stato modificato l'ultima volta il: 30/09/2013 20:55 da Chandler.)
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>
Messaggi: 1.323
Discussioni: 171
Registrato: Nov 2006
Reputazione:
2
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.
Mattia!
Messaggi: 578
Discussioni: 47
Registrato: Nov 2008
Reputazione:
0
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.
Messaggi: 578
Discussioni: 47
Registrato: Nov 2008
Reputazione:
0
che dici, c'è un modo o devo modificare i parametri fissi?
Messaggi: 1.323
Discussioni: 171
Registrato: Nov 2006
Reputazione:
2
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.
Mattia!
Messaggi: 578
Discussioni: 47
Registrato: Nov 2008
Reputazione:
0
In che senso quando cambia l'URL??
Messaggi: 1.323
Discussioni: 171
Registrato: Nov 2006
Reputazione:
2
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.
Mattia!
Messaggi: 578
Discussioni: 47
Registrato: Nov 2008
Reputazione:
0
Ma a me interessa solo ridimensionare questo video. La maggior parte delle volte utilizzo i video di youtube e per quelli non ho problemi...
Messaggi: 1.323
Discussioni: 171
Registrato: Nov 2006
Reputazione:
2
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).
Mattia!
Messaggi: 578
Discussioni: 47
Registrato: Nov 2008
Reputazione:
0
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
Messaggi: 578
Discussioni: 47
Registrato: Nov 2008
Reputazione:
0
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
Messaggi: 1.323
Discussioni: 171
Registrato: Nov 2006
Reputazione:
2
A dir la verità, non saprei. Se intendi il loading di YouTube, ogni tanto succede anche guardando i video via browser su desktop.
Mattia!
Messaggi: 578
Discussioni: 47
Registrato: Nov 2008
Reputazione:
0
Si, è il loading di youtube, ma mi da sempre questo problema con ogni video di ogni pagina, solo sull'app Android...
Messaggi: 1.323
Discussioni: 171
Registrato: Nov 2006
Reputazione:
2
Facendo una ricerca veloce, ho notato che è un problema molto diffuso.
Prova a seguire questa guida e vedi se riesci a risolvere.
Mattia!
Messaggi: 578
Discussioni: 47
Registrato: Nov 2008
Reputazione:
0
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
|