HTML Multimedia

Multimedia on the web consists of sound, music, videos, movies, and animations. SPHPLayground contains numerous multimedia components for different media types.

Sizeable media content and Lazy loading

SizeableMedia is implemented by components that display resizeable visual media content.

Lazy Loading delays loading of LazyMedia components in long web pages. LazyMedia components outside of viewport are not loaded until user scrolls to them. Using Lazy Loading on large web pages will make the page load faster. In some cases it can also help to reduce server load.

Lazy Load XT jQuery plugin

This framework uses Lazy Load XT jQuery plugin. It is Mobile-oriented, fast and extensible jQuery plugin with build-in support of jQueryMobile framework.

Trait implementations of these interfaces:

Both of these traits can be used e.g with Component when implementing new visual media content.

The Img and the Figure components

Img component implements HTML <img> tag via ImgInterface interface.

  • PHP code
    1. <?php
    2.  
    3. namespace Sphp\Images;
    4.  
    5. use Sphp\Html\Media\Img;
    6.  
    7. $image = new ImagineImage('manual/pics/example.jpg');
    8.  
    9. $cache = new SimpleCache('manual/pics/cache');
    10. $cachedFile = $cache->save($image->widen(50));
    11. echo new Img('manual/pics/example.jpg', 'Example');
    12. echo new Img($cachedFile, 'Example');
    13. echo new Img('manual/pics/example.jpg.php?scale=.5', 'Example image');
    14.  
    Highlighted with GeSHi 1.0.9.1
  • Execution result as highlighted code
    1. <img alt="Example" src="manual&#x2F;pics&#x2F;example.jpg">
    2. <img alt="Example" src="manual&#x2F;pics&#x2F;cache&#x2F;0d603fc8e7e326f6fbee9976627800c5.jpg">
    3. <img alt="Example&#x20;image" src="manual&#x2F;pics&#x2F;example.jpg.php&#x3F;scale&#x3D;.5">
    Highlighted with GeSHi 1.0.9.1
  • Execution result as HTML5 flow
    ExampleExampleExample image
  • PHP code
    1. <?php
    2.  
    3. namespace Sphp\Html\Media;
    4.  
    5. use Sphp\Images\ImagineImage;
    6. use Sphp\Images\SimpleCache;
    7.  
    8. (new Img('http://data.samiholck.com/images/crossbones.png', 'Original Skull'))
    9.         ->setLazy(true)
    10.         ->printHtml();
    11.  
    12. $image = new ImagineImage("./manual/pics/face-modified.jpg");
    13. $cache = new SimpleCache('manual/pics/cache');
    14.  
    15. $fitted = $cache->save($image->scaleToFit(100, 60));
    16. (new Img($fitted, "Fitted Skull"))
    17.         ->setLazy(true)
    18.         ->printHtml();
    19.  
    20. $scaled = $cache->save($image->scale(1.5));
    21. (new Img($scaled, 'Widen Skull'))
    22.         ->setLazy(true)
    23.         ->printHtml();
    24.  
    25. $widen = $cache->save($image->widen(50));
    26. (new Img($widen, 'Widen Skull'))
    27.         ->setLazy(true)
    28.         ->printHtml();
    29.  
    Highlighted with GeSHi 1.0.9.1
  • Execution result as HTML5 flow
    Original SkullFitted SkullWiden SkullWiden Skull

The Figure component implements the <figure> tag. A Figure component consists of an Img component and an optional FigCaption component.

A Figure component specifies a self-contained content. While its content is related to the main flow, its position is independent of the main flow, and if removed it should not affect the flow of the document.

  • PHP code
    1. <?php
    2.  
    3. namespace Sphp\Html\Media;
    4.  
    5. $fig = (new Figure("http://placehold.it/350x150/0f0/fff", "Empty placeholder image"));
    6. $fig->getImg()->setLazy();
    7. $fig->printHtml();
    8.  
    Highlighted with GeSHi 1.0.9.1
  • Execution result as HTML5 flow
    Empty placeholder image

HTML Imagemap components

  • Map defines a client-side image-map
  • Area defines an area inside an image-map:

A Map object is a container for Area components

  • PHP code
    1. <?php
    2.  
    3. namespace Sphp\Html\Media;
    4.  
    5. $img = (new Img('http://playground.samiholck.com/manual/pics/shapes.png', 'Basic shapes'))
    6.         ->useMap('shapes')
    7.         ->setLazy(true)
    8.         ->printHtml();
    9. $map = (new ImageMap\Map('shapes'))
    10.         ->append((new ImageMap\Circle(361, 132, 96))
    11.                 ->setAttribute('title', 'Circle in Wikipedia')
    12.                 ->setHref('https://en.wikipedia.org/wiki/Circle')
    13.                 ->setTarget('_blank'))
    14.         ->append((new ImageMap\Rectangle(21, 28, 222, 228))
    15.                 ->setAttribute('title', 'Rectangle in Wikipedia')
    16.                 ->setHref('https://en.wikipedia.org/wiki/Rectangle')
    17.                 ->setTarget('_blank'))
    18.         ->printHtml();
    19.  
    Highlighted with GeSHi 1.0.9.1
  • Execution result as HTML5 flow
    Basic shapes

The Iframe component

The Iframe class models the HTML <iframe> tag (HTML inline frame). Iframe embeds a document into an HTML document so that embedded data is displayed inside a subwindow of the browser's window. This does not mean full inclusion; the two documents are independent, and both them are treated as complete documents.

  • PHP code
    1. <?php
    2.  
    3. namespace Sphp\Html\Media;
    4.  
    5. $inlineStyles = [
    6.     'overflow' => 'auto',
    7.     'width' => '100%',
    8.     'height' => '373px',
    9.     'border' => 'none'];
    10. $iframe = new Iframe();
    11. $iframe->setSrc('https://docs.google.com/present/embed?id=dcn37mcz_22cmnwnwf8')
    12.         ->setWidth(200)
    13.         ->setHeight(150)
    14.         ->setLazy()
    15.         ->printHtml();
    16.  
    17. $widget = (new Iframe('https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1968.6436457032405!2d22.300180715499756!3d60.43458932895583!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x468c7727a6466e41%3A0xa7ad26a37594a821!2sRakuunatie+59%2C+20720+Turku!5e0!3m2!1sen!2sfi!4v1565166196128!5m2!1sen!2sfi'))
    18.         ->setLazy();
    19. $widget->inlineStyles()->setProperties($inlineStyles);
    20. $widget->printHtml();
    21.  
    Highlighted with GeSHi 1.0.9.1
  • Execution result as HTML5 flow