It’s weird how the UI doesn’t tell you what Safari version you’re running, but this little tidbit will. Just cut and paste it into the URL bar:
javascript:alert(navigator.userAgent)
You can also use it for Android’s browser as well.
Enable Chrome’s Hidden Features
Speed up Chrome by turning on GPU acceleration. Type this in your URL bar:
about:flags
Simply look for GPU Accelerated Canvas 2D and click on enable. If you’re running on a computer that needs a little help optimizing resources then this may help your system out by utilizing the GPU instead. Also, restart the browser, so that it’ll get it going. Remember that this is experimental and you might not even notice any difference in the performance. You can test against Internet Explorer’s Test Drive to see any improvements.
Generate a Playlist for HTML5 Video
I wanted to script a playlist generator for HTML5 without using jQuery and this is what I came up with. What it does is read files from a directory and outputs it in JSON array. It’ll pass the values to JavaScript and with a bit of DOM magic, set the MP4′s path to HTML5′s player. I could’ve easily built the front end with jQuery but I wanted to see the gears of HTML5. If you don’t care about performance then use PHP’s glob() method to find files in a directory. I also added two JS functions from Apple’s dev manual. Sometimes you don’t have to reinvent the wheel.
11/22/10
I fixed the click event bug ,so now it will load the video properly. jQuery made it easier to figure out what was wrong with the links. Basically, I attached click events with the live() method to the generated links and they should play the appropriate video when clicked.
I fixed the click event bug ,so now it will load the video properly. jQuery made it easier to figure out what was wrong with the links. Basically, I attached click events with the live() method to the generated links and they should play the appropriate video when clicked.
<?php
//Grab the files from a directory
$dir = 'vids';
if(is_dir($dir)){
if($dd = opendir($dir)){
while (($f = readdir($dd)) !== false)
if($f != '.' && $f != '..'){
$files[] = $f;
}
closedir($dd);
}
}
//Create JS's header
header("Content-type: text/javascript");
$file = array();
foreach($files as $key => $val){
//inserts the val into the array
$file[$key] = $val;
}
//creates json obj with the array
echo 'var obj = ' . json_encode($file) . ";\n";
?>
// listener function changes src
function myNewSrc() {
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src = obj[(++i)%obj.length];
myVideo.load();
myVideo.play();
}
// function adds listener function to ended event
function myAddListener(){
var myVideo = document.getElementsByTagName('video')[0];
myVideo.addEventListener('ended', myNewSrc, false);
}
$(document).ready(function(){
for(i in obj){
var text = document.createTextNode(obj[i]);
var list = document.getElementById('list');
var bullet = document.createElement('li');
var output = document.getElementById('output');
var path = "vids/" + text.nodeValue;
bullet.innerHTML= "<a href='" + path + "' onclick='return false;'>" + text.nodeValue + "</a>";
list.appendChild(bullet);
output.appendChild(list);
}
$('#list > li a').live('click', function(e){
var t = e.target;
var $this = $(this);
var path = $this.attr('href');
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src = path;
myVideo.load();
myVideo.play();
});
});
You have to place the JS source tag at the bottom of the markup otherwise it won’t parse properly. It’s just good practice to load your scripts at the bottom of the document. You can also load it by creating an init() method if you want to be really nasty. I’ve set this page up so that it fits snug with the iPad’s screen width. There are ways to have fallbacks so that it degrades to Flash but that’s outside the scope of this write up. NETTUTS goes over it a bit.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Generate HTML5 Playlist with JSON</title>
<style type="text/css">
#player {
padding-top: 6px;
}
#output{
display:block;
width:480px;
height:220px;
background-color:#CCC;
color:#000;
padding:6px;
}
#output {width:350px; height:200px; background-color:#CCC;}
#output ul, li{list-style:none;}
hgroup{list-style:none;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
</head>
<body id="index" class="home" onLoad="myAddListener()">
<header id="header" class="vid">
<div id="logo"><h1>Create a HTML5 Playlist with PHP</h1></div>
</header><!-- /#header -->
<aside id="featured" class="body">
<article>
<figure>
<video src="vids/video.mp4"
controls
id="player"
poster="bluemoon_logo.jpg"
height="480"
width="720"
type="video/mp4"></video>
</figure>
<hgroup>
<h2>Video loading playlist</h2>
<div id="output"><ul id="list"></ul></div>
</hgroup>
</article>
</aside><!-- /#featured -->
<script src="getPlaylist.php"></script>
</body>
</html>
Check out the working sample to see how it’s set up. You can only view this in Safari and Chrome but maybe by 2049 HTML5 will be fully implemented. I don’t think HTML5′s video will mature anytime soon, but it doesn’t hurt to see what the future holds. It has a lot of catching up to do if it wants to out do Flash.
Flash Video on Mobile Devices Thanks to Skyfire
I guess Flash made it to the Andriod and it’s in the beta state. A huge chunk of the web experience is now possible. It’s not perfect but it’s a great start. The best part is when Skyfire detects a viewable Flash video, it’ll notify you or you can click on menu to see if it’ll play. What I notice is that it’ll pull the video if your video’s source is rendered in the html. Small step for Android, giant leap for Flash.
Detect iPad’s Safari Browser and Redirect to HTML5 Page
I’m upset that Apple decided not to support Flash for the iPad and instead embraced html5 as their weapon of choice to implement video content. I wasn’t impressed with html5 until I saw the guys at Google ported Quake 2 over from Java. The potential dawned on me. I guess using the native language to handle the DOM isn’t so bad. You just have to roll up your sleave and tango JS into some bedroom boom boom. After all, parsing the native language is faster.
The server side script has to detect the user agent sent by the browser and this is what it’ll send in the http request.
Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10
A simple redirect with php’s header() method will send the client to the page according to the device’s browser or OS. I recommend that the script should look for stuff where it’s specific to the device. You don’t want to serve them your iPhone site if you’re checking for “mobile” in the request.
<?php
$useragent = strtolower($_SERVER['HTTP_USER_AGENT']);
preg_match('/ipad/', $useragent, $browser);
$device = $browser[0];
function get_agent($string){
if($string == 'ipad')
{
//redirect browser to the html5 page
header('Location: http://www.yoursite.com/link/to/page.html');
exit();
} else {
$foo = 'Unidentified device';
}
return $foo;
}
get_agent($device);
?>
This skeleton of html5 markup has the device’s viewport value set to a constant so that it fits the viewport of the current device such as the iPad. The controls can be skinned with Javascript and CSS to give it some DOM visual effects.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>HTML5 Video!</title>
<style type="text/css">
#player {
padding-top: 6px;
}
aside, header, footer, body{display: block;}
</style>
</head>
<body id="index" class="home">
<header id="header" class="vid">
<div id="logo"><h1>Logo</h1></div>
</header><!-- #header -->
<aside id="featured" class="body">
<article>
<figure>
<video src="http://www.site.com/your/video.mp4" controls="controls" id="player"></video>
</figure>
<hgroup>
<h2>Featured Video</h2>
<h3><a href="#">A vid</a></h3>
</hgroup>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mauris massa, tempus in eleifend id, sagittis ac urna.</p>
</article>
</aside><!-- #featured -->
<footer></footer><!-- #footer-->
</body>
</html>
So that’s the basics on how to get your site to figure out the user agent and then take them to a page that’s html5 formatted. You can view the source on the working sample in Safari or Chrome to see the structure. It’s missing other elements but the W3C Editor’s Draft outlines all the new tags. Some of the features I look forward seeing developers take advantage of will certainly give Flash reasons to fine tune their song and dance.
How to Clear Safari’s Cache
You can clear Safari 4.0.4 cache and everything from saved passwords to cookies by clicking on general settings > Reset Safari . I thought it was a little strange how they labeled the feature and so I wanted to share it. You can also clear browsing history if you’ve been checking out smut. But if your wife or girlfriend is behind you while you’re checking out porn…well, just say you’re doing research.