Multimedia HTML




CS174

Chris Pollett

Dec 5, 2016

Outline

Multimedia and HTML 5

Mobile HTML 5

A Template HTML 5 Document with jQuery Mobile

<!DOCTYPE html>
<html> 
    <head> 
    <title>Hello HTML 5</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script></head> 
<body> 

<div data-role="page">

    <div data-role="header">
        <h1>My First HTML APP!</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <p>This is an HTML 5 app.</p>        
    </div><!-- /content -->

</div><!-- /page -->

</body>
</html>

Hello HTML 5 app.

The Head of a Document

Remarks on the Body of our Example

Where to Find Examples

jQuery

Detecting Orientation Changes in HTML 5

Orientation Change Code

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Portrait or Landscape</title> 
    <meta id="myview" name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <script>
    $(function(){
        // Orientation Change
        // When orientation changes event is triggered
        // exposing an orientation property of either
        // landscape or portrait
        $('body').bind('orientationchange', function(event){
            changeOrientation(event.orientation)
        })

        // Change the style depending on orientation
        function changeOrientation(ori) {
            // Remove all classes
            $("#orientation").removeClass('portrait landscape');
            $("#orientation").addClass(ori);
            $("#orientation").html("<p>"+ori.toUpperCase()+"</p>");
        }

        $("body").trigger("orientationchange");
    })
    </script>
    <style>
    div.portrait {
      background-color: blue;
      width: 100%;
      height: 100%;
    }
    div.landscape {
      background-color: red;
      width: 100%;
      height: 100%;
    }
    p {
        font-size:24px;
        color:white;
    }
    </style>
</head> 
<body> 

<div data-role="page">
 
    <div data-role="header">
        <h1>Orientation</h1>
    </div><!-- /header -->
 
    <div data-role="content">
    <div id="orientation" class="portrait" ></div>
    </div><!-- /content -->
 
    <div data-role="footer">
        <h4>My Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

</body>
</html>

Quiz

Which of the following statements is true?

  1. Our example of using Stripe in class did not involve using cURL.
  2. Content delivery networks are often implemented using distributed hash tables.
  3. ASCII is a newer encoding than Unicode used to encode all the world's languages.

Quiz

Which of the following statements is true?

  1. A memcache is often implemented using a .mo file.
  2. Our example of using Stripe in class did not involve using XHR
  3. Gettext can be used to localize a website to a specific language.

HTML 5 Local Storage

Ajax in jQuery

Two-Dimensional Graphics in HTML

Canvas Tag

Touch Events HTML5

Video and Audio Tags

Supporting Streaming and Seeking Playback

<?php
/**
 * Simple server to allow progressive downloads and http pseudo-streaming
 * This code uses the request variable f to determine the file to server
 * from the current directory. If a range request is made, it serves it
 * appropriately.
 */

// Exit if not requested to server a file
if (empty($_REQUEST['f']) || preg_match("/(\/|\\\)/",$_REQUEST['f'])) {
    header('HTTP/1.1 403 Forbidden');
    exit("403 Forbidden");
}
// Determine path to file and make sure a unix path
$path = str_replace("\\", "/", realpath(__DIR__)) ."/". $_REQUEST['f'];
if (file_exists($path)) {
    $finfo = new \finfo(FILEINFO_MIME);
    $mime_type = $finfo->file($path);
    $size = filesize($path);
    $start = 0;
    $end = $size - 1;
    /* say the filetype we are server, and say that we accept range requests
       and so are capable of pseudo-streaming
     */
    header("Content-type: $mime_type");
    header("Accept-Ranges: bytes");
    // Check for range requests
    if (!empty($_SERVER['HTTP_RANGE'])) {
        //found range info, try to serve
        serveRangeRequest($path);
        return;
    }
    // Serve non-range request
    header("Content-Length: " . $size);
    header("Content-Range: bytes $start-$end/$size");
    readfile($path);
} else  {
    header('HTTP/1.1 404 Not Found');
    exit("404 Not Found");
}
/**
 * Handles resource file serving to browser in the range request setting
 *
 * @param string $file file name to serve from current directory
 */
function serveRangeRequest($file)
{
    $size = filesize($file);
    $start = 0;
    $end = $size - 1;
    $current_start = $start;
    $current_end = $end;
    /*
        We first parse the Range: header and see if its valid.
        The header for a range request looks like:
        Range: bytes=some_start_value-some_end_value
        (either of some_start_value or some_end_value might be omitted)
        split into at most 2 element with last having rest of string
        The $_SERVER['HTTP_RANGE'] variable gets the values of the
        Range header. I.e., what's after the word Range:.
     */
    list(, $range) = explode('=', $_SERVER['HTTP_RANGE'], 2);
    if (strpos($range, ',') !== false) {
        header('HTTP/1.1 416 Requested Range Not Satisfiable');
        header("Content-Range: bytes $start-$end/$size");
        return;
    }
    if ($range == '-') {
        $current_start = $size - 1;
    } else {
        $range = explode('-', $range);
        $current_start = trim($range[0]);
        $current_end = (isset($range[1]) && is_numeric(trim($range[1])))
            ? trim($range[1]) : $size;
        if ($current_start === "") {
            $current_start = max(0, $size - $range[1] - 1);
        }
    }
    $current_end = ($current_end > $end) ? $end : $current_end;
    if ($current_start > $current_end || $current_start > $size - 1 ||
        $current_end >= $size) {
        header('HTTP/1.1 416 Requested Range Not Satisfiable');
        header("Content-Range: bytes $start-$end/$size");
        return;
    }
    /*
        We've now determined the range to serve was valid, so we output
        a 206 partial content header and say the range we are going to send
        back. Then we actually send it.
     */
    $start = $current_start;
    $end = $current_end;
    $length = $end - $start + 1;
    $fp = @fopen($file, 'rb');
    fseek($fp, $start);
    header('HTTP/1.1 206 Partial Content');
    header("Content-Range: bytes $start-$end/$size");
    header("Content-Length: " . $length);
    $buffer = 8192;
    $position = 0;
    /* try to output 8Kb at a time until done range. Use ftell to check if fread
       happens to get less than 8Kb and then update current position
       appropriately.
     */
    while(!feof($fp) && $position <= $end && connection_status() == 0) {
        $position = ftell($fp);
        if ($position + $buffer > $end) {
            $buffer = $end - $position + 1;
        }
        echo fread($fp, $buffer);
        flush();
    }
    fclose($fp);
}

Determining Location in HTML 5