Visualizzazione dei risultati da 1 a 5 su 5
  1. #1
    Utente di HTML.it
    Registrato dal
    Apr 2013
    Messaggi
    3

    API Youtube - Url da variabile

    Salve a tutti. Mi sono appena iscritto al forum, spero di imparare il più possibile da tutti voi.

    Bando alle ciancie, passo subito al mio primo quesito.

    Premetto che mi sto or ora inoltrando nel mondo della programmazione web, sia lato server (PHP) che lato client (Javascript), quindi portate pazienza. Ho un po di esperienza in VB ma per il resto sono davvero alle primissime armi.

    Dunque, sto cercando di capirci qualcosa con gli API di youtube.

    Ho creato una prima pagina (a.php) con questo codice:

    codice:
    <form id="form1" name="form1" method="get" action="b.php">
    <fieldset>
    <label for="urlmyvideo">Inserisci url</label>
    <input name="urlmyvideo" id="urlmyvideo" /> 
    <input type="submit" name="invio" id="invio" /> 
    </fieldset> 
    </form>
    Nella seconda pagina (b.php) ho inserito il codice di esempio fornito da Youtube, ovvero:
    codice:
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>YouTube Player API Sample</title>
        <style type="text/css">
          #videoDiv { 
            margin-right: 3px;
          }
          #videoInfo {
            margin-left: 3px;
          }
        </style>
        <script src="http://www.google.com/jsapi" type="text/javascript"></script>
        <script type="text/javascript">
          google.load("swfobject", "2.1");
        </script>    
        <script type="text/javascript">
          /*
           * Chromeless player has no controls.
           */
          
          // Update a particular HTML element with a new value
          function updateHTML(elmId, value) {
            document.getElementById(elmId).innerHTML = value;
          }
          
          // This function is called when an error is thrown by the player
          function onPlayerError(errorCode) {
            alert("An error occured of type:" + errorCode);
          }
          
          // This function is called when the player changes state
          function onPlayerStateChange(newState) {
            updateHTML("playerState", newState);
          }
          
          // Display information about the current state of the player
          function updatePlayerInfo() {
            // Also check that at least one function exists since when IE unloads the
            // page, it will destroy the SWF before clearing the interval.
            if(ytplayer && ytplayer.getDuration) {
              updateHTML("videoDuration", ytplayer.getDuration());
              updateHTML("videoCurrentTime", ytplayer.getCurrentTime());
              updateHTML("bytesTotal", ytplayer.getVideoBytesTotal());
              updateHTML("startBytes", ytplayer.getVideoStartBytes());
              updateHTML("bytesLoaded", ytplayer.getVideoBytesLoaded());
              updateHTML("volume", ytplayer.getVolume());
            }
          }
          
          // Allow the user to set the volume from 0-100
          function setVideoVolume() {
            var volume = parseInt(document.getElementById("volumeSetting").value);
            if(isNaN(volume) || volume < 0 || volume > 100) {
              alert("Please enter a valid volume between 0 and 100.");
            }
            else if(ytplayer){
              ytplayer.setVolume(volume);
            }
          }
          
          function playVideo() {
            if (ytplayer) {
              ytplayer.playVideo();
            }
          }
          
          function pauseVideo() {
            if (ytplayer) {
              ytplayer.pauseVideo();
            }
          }
          
          function muteVideo() {
            if(ytplayer) {
              ytplayer.mute();
            }
          }
          
          function unMuteVideo() {
            if(ytplayer) {
              ytplayer.unMute();
            }
          }   
          
          // This function is automatically called by the player once it loads
          function onYouTubePlayerReady(playerId) {
            ytplayer = document.getElementById("ytPlayer");
            // This causes the updatePlayerInfo function to be called every 250ms to
            // get fresh data from the player
            setInterval(updatePlayerInfo, 250);
            updatePlayerInfo();
            ytplayer.addEventListener("onStateChange", "onPlayerStateChange");
            ytplayer.addEventListener("onError", "onPlayerError");
            //Load an initial video into the player
            ytplayer.cueVideoById("ylLzyHk54Z0");
          }
          
          // The "main method" of this sample. Called when someone clicks "Run".
          function loadPlayer() {
            // Lets Flash from another domain call JavaScript
            var params = { allowScriptAccess: "always" };
            // The element id of the Flash embed
            var atts = { id: "ytPlayer" };
            // All of the magic handled by SWFObject (http://code.google.com/p/swfobject/)
            swfobject.embedSWF("http://www.youtube.com/apiplayer?" +
                               "version=3&enablejsapi=1&playerapiid=player1", 
                               "videoDiv", "480", "295", "9", null, null, params, atts);
          }
          function _run() {
            loadPlayer();
          }
          google.setOnLoadCallback(_run);
        </script>
      </head>
    
    <body style="font-family: Arial;border: 0 none;">
    
        <table>
        <tr>
        <td><div id="videoDiv">Loading...</div></td>
        <td valign="top">
          <div id="videoInfo">
            
    
    Player state: <span id="playerState">--</span></p>
            
    
    Current Time: <span id="videoCurrentTime">--:--</span> | Duration: <span id="videoDuration">--:--</span></p>
            
    
    Bytes Total: <span id="bytesTotal">--</span> | Start Bytes: <span id="startBytes">--</span> | Bytes Loaded: <span id="bytesLoaded">--</span></p>
            
    
    Controls: Play | Pause | Mute | Unmute</p>
            
    
    <input id="volumeSetting" type="text" size="3" />&lt;- Set Volume | Volume: <span id="volume">--</span></p>
          </div>
        </td></tr>
        </table>
    
    
    </body>
    Poi ho sostituito la riga:
    codice:
    ytplayer.cueVideoById("ylLzyHk54Z0");
    con
    codice:
            var urlmyvideo_js = "<?php print ($_GET['urlmyvideo']); ?>";
            urlmyvideo_js = urlmyvideo_js.substring((urlmyvideo_js.lastIndexOf('=')+1));
            document.write(urlmyvideo_js);
            ytplayer.cueVideoById(urlmyvideo_js);
    In pratica sto cercando di fare questo:
    invece di impostare un url preimpostato, vorrei inserire l'url del video da visualizzare in una casella di testo nella pagina a.php, e poi visualizzare il video nella pagina b.php.
    Nel codice che ho sostituito ho creato un'espressione che mi restituisce solo la parte di url dopo il simbolo "=", che è quello che a me serve.

    La terza riga è provvisoria, l'ho inserita solo per verificare il corretto funzionamento del GET e del passaggio della variabile da PHP a JavaScript. Tutto corretto.

    Ma il video non parte. Dove sbaglio?

  2. #2
    Ciao,

    Togli pure la riga provvisoria document.write(urlmyvideo_js); , fatto questo poi il video si carica correttamente.

  3. #3
    Utente di HTML.it
    Registrato dal
    Apr 2013
    Messaggi
    3
    Funziona! Grazie mille.

    Incredibile, era solo questo il problema. Mi stavo facendo venire il mal di testa per niente.

    Ora mi chiedo come mai quel semplice document.write bloccasse il funzionamento dello script. Non capisco...

    Comunque, grazie ancora.

  4. #4
    Il document.write sovrascrive tutto il contenuto della finestra corrente creando una pagina nuova, è per questo non vedevi più il video.
    Per il debug puoi usare in alternativa il metodo alert();

  5. #5
    Utente di HTML.it
    Registrato dal
    Apr 2013
    Messaggi
    3
    Chiarissimo.

    Grazie ancora

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.