jQuery Mobile - video iframe

Descrizione

Puoi specificare un frame inline che incorpori un documento all'interno di un altro documento, come il contenuto di un'altra fonte, un annuncio pubblicitario, ecc.

Esempio

L'esempio seguente mostra l'uso del video iframe in jQuery Mobile Framework.

<!DOCTYPE html>
<head>
   <title>iframe Video</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
      
      <script>
         $( document ).on( "pagecreate", function() {
         
            function scale( width, height, padding, border ) {
               var scrWidth = $( window ).width() - 30,
               scrHeight = $( window ).height() - 30,
               ifrPadding = 2 * padding,
               ifrBorder = 2 * border,
               ifrWidth = width + ifrPadding + ifrBorder,
               ifrHeight = height + ifrPadding + ifrBorder,
               h, w;
               
               if ( ifrWidth < scrWidth && ifrHeight < scrHeight ) {
                  w = ifrWidth;
                  h = ifrHeight;
               } else if ( ( ifrWidth / scrWidth ) > ( ifrHeight / scrHeight ) ) {
                  w = scrWidth;
                  h = ( scrWidth / ifrWidth ) * ifrHeight;
               } else {
                  h = scrHeight;
                  w = ( scrHeight / ifrHeight ) * ifrWidth;
               }
               return {
                  'width': w - ( ifrPadding + ifrBorder ),
                  'height': h - ( ifrPadding + ifrBorder )
               };
            };
            
            $( ".ui-popup iframe" )
            .attr( "width", 0 )
            .attr( "height", "auto" );
            
            $( "#popup_video" ).on({
               popupbeforeposition: function() {
               
                  // here calling custom function scale() to get the width and height
                  var size = scale( 497, 298, 15, 1 ),
                  w = size.width,
                  h = size.height;
                  $( "#popup_video iframe" )
                  .attr( "width", w )
                  .attr( "height", h );
               },
               
               popupafterclose: function() {
                  $( "#popup_video iframe" )
                  .attr( "width", 0 )
                  .attr( "height", 0 );
               }
            });
         });
      </script>
   </head>
   
   <body>
      <div data-role = "page">
         <div data-role = "header">
            <h2>Header</h2>
         </div>
         
         <a href = "#popup_video" data-rel = "popup" data-position-to = "window" 
            class = "ui-btn ui-btn-inline">Play Video</a>
         <div data-role = "popup" id = "popup_video" data-theme = "a" 
            data-tolerance = "15,15" class = "ui-content">
            <iframe src = "/jquery_mobile/images/video.mp4" width = "400" 
               height = "200"></iframe>
         </div>
         
         <div data-role = "footer">
            <h2>Footer</h2>
         </div>
         
      </div>
   </body>
</html>

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:

  • Salva il codice html sopra come jqm_iframes_video.html file nella cartella principale del server.

  • Apri questo file HTML come http: //localhost/jqm_iframes_video.html e verrà visualizzato il seguente output.