HTML MULTIMEDIA: sound, music, videos, movies, and animations

HTML 5 Audio and Video

The Audio and the Video components implement the corresponding HTML5 <audio> and <video> tags. With them it is possible to view video and audio streams.

The Source component specifies media resources for Audio and Video media components. With the Source components it is possible to specify alternative media files which the browser may choose from, based on its media type or codec support.

  • HTML5 <audio> and <video> example code
    1. <?php
    2.  
    3. namespace Sphp\Html\Media\Multimedia;
    4.  
    5. (new Audio("https://upload.wikimedia.org/wikipedia/commons/0/0a/Pl-Bytom.ogg"))
    6.         ->showControls(true)
    7.         ->printHtml();
    8.  
    9. $video = new Video();
    10. $video->addSource("http://techslides.com/demos/sample-videos/small.webm");
    11. $video->addSource("http://techslides.com/demos/sample-videos/small.ogv");
    12. $video->addSource("http://techslides.com/demos/sample-videos/small.mp4");
    13. $video->addSource("http://techslides.com/demos/sample-videos/small.3gp");
    14.  
    15. $video->showControls(true)
    16.         ->setLazy(true)
    17.         ->printHtml();
    18.  
    Highlighted with GeSHi 1.0.9.1
  • Execution result as highlighted code
    1. <audio controls>
    2.     <source src="https&#x3A;&#x2F;&#x2F;upload.wikimedia.org&#x2F;wikipedia&#x2F;commons&#x2F;0&#x2F;0a&#x2F;Pl-Bytom.ogg">
    3.         <p>Your browser does not support the &lt;audio&gt; tag!</p>
    4.     </audio>
    5.     <video controls>
    6.         <source class="lazy-hidden lazy-loaded" data-src="http&#x3A;&#x2F;&#x2F;techslides.com&#x2F;demos&#x2F;sample-videos&#x2F;small.webm">
    7.             <source class="lazy-hidden lazy-loaded" data-src="http&#x3A;&#x2F;&#x2F;techslides.com&#x2F;demos&#x2F;sample-videos&#x2F;small.ogv">
    8.                 <source class="lazy-hidden lazy-loaded" data-src="http&#x3A;&#x2F;&#x2F;techslides.com&#x2F;demos&#x2F;sample-videos&#x2F;small.mp4">
    9.                     <source class="lazy-hidden lazy-loaded" data-src="http&#x3A;&#x2F;&#x2F;techslides.com&#x2F;demos&#x2F;sample-videos&#x2F;small.3gp">
    10.                         <p>Your browser does not support the &lt;video&gt; tag!</p>
    11.                     </video>
    Highlighted with GeSHi 1.0.9.1
  • HTML5 <audio> and <video> example results

The VideoJs component

Video.js is an open source library for working with video on the web, also known as an HTML video player. The VideoJs Implements video.js for PHP.

  • PHP code
    1. <?php
    2.  
    3. namespace Sphp\Html\Media\Multimedia;
    4.  
    5. $videoJS = new VideoJs();
    6. $videoJS->addSource("http://techslides.com/demos/sample-videos/small.webm");
    7. $videoJS->addSource("http://techslides.com/demos/sample-videos/small.ogv");
    8. $videoJS->addSource("http://techslides.com/demos/sample-videos/small.mp4");
    9. $videoJS->addSource("http://techslides.com/demos/sample-videos/small.3gp");
    10. $videoJS->showControls()
    11.         ->setPoster("manual/pics/LEGO_logo.png")
    12.         ->setWidescreen("4-3")
    13.         ->printHtml();
    14.  
    Highlighted with GeSHi 1.0.9.1
  • Execution result as HTML5 flow

Video hosting services Dailymotion, Youtube, Vimeo ,... etc.

The VideoPlayer interface has an abstract implementation AbstractVideoPlayer. This class is extended to support following subscribers.

  • Example code for Youtube, Vimeo and DailyMotion video
    1. <?php
    2.  
    3. namespace Sphp\Html\Media\Multimedia;
    4.  
    5. (new YoutubePlayer("VjDnB9xWodM"))
    6.         ->loop(false)
    7.         ->setLazy()
    8.         ->setEndTime(5)
    9.         ->setWidth(150)
    10.         ->setHeight(113)
    11.         ->printHtml();
    12.  
    Highlighted with GeSHi 1.0.9.1
  • Example results

The Embed and The ObjectTag components

The Embed class models the HTML <embed> tag. This component can be used for setting external external applications or interactive contents (plug-ins).

The ObjectTag class models the HTML <object> tag. This component can be used for setting external external applications or interactive contents (plug-ins).

The <object> tag defines an embedded object within an HTML document. Use this element to embed multimedia (like audio, video, Java applets, ActiveX, PDF, and Flash) in your web pages.

You can also use the it to embed another webpage into your HTML document.

You can use the param tag to pass parameters to plugins that have been embedded with the object

  • HTML embed> and <object> example code
    1. <?php
    2.  
    3. namespace Sphp\Html\Media\Multimedia;
    4.  
    5. $embed = new Embed('http://www.w3schools.com/tags/helloworld.swf');
    6. $embed->inlineStyles()->setProperty('border', 'solid 1px #555');
    7. $embed->printHtml();
    8.  
    9. $object = new ObjectTag('manual/snippets/demodoc.pdf');
    10. $object->addParam('foo', 'bar')->setAttribute('data-foo', 'blaa');
    11. $object->inlineStyles()->setProperty('border', 'solid 1px #555');
    12. $object->setType('application/pdf')->printHtml();
    13.  
    Highlighted with GeSHi 1.0.9.1
  • Execution result as highlighted code
    1. <embed src="http&#x3A;&#x2F;&#x2F;www.w3schools.com&#x2F;tags&#x2F;helloworld.swf" style="border:solid 1px #555;">
    2.     <object data="manual&#x2F;snippets&#x2F;demodoc.pdf" style="border:solid 1px #555;" type="application&#x2F;pdf">
    3.         <param name="foo" value="bar" data-foo="blaa">
    4.             <p>Your browser does not support the &lt;object&gt; tag!</p>
    5.         </object>
    Highlighted with GeSHi 1.0.9.1
  • HTML example results

    Your browser does not support the <object> tag!