JavaScript - Html5/javascript Video System

var duration = document.getElementById('vid').duration

var buffered = document.getElementById('vid').buffered

<div id="slider" class="span-24 last">
            
                <div id="slide2Left"> &larr;</div>
                    <div id="slideFrame">
                        <div id="slideBoard">
                          <!-- the slides -->
                            <div class="slidePoint">
                             Slide 1 Goes Here
                            </div>
                            <div class="slidePoint">
                             Slide 2 Goes Here
                            </div>
                            <div class="slidePoint">
                             Slide 3 Goes Here
                            </div>
                          <!-- end slideBoard -->
                        </div>
                        <div id="slideReference"></div>
                    <!-- end slideFrame -->
                    </div>
<div id="slide2Right" class="last"> &rarr;</div>
                
        <!-- end slider section -->    
        </div>

// JavaScript Document
$(document).ready(function(){						
	var slideTime = 700;
	var currentSlide = 1;
	var totalSlides = $("#slideBoard > div").size();
	var slideWidth = $('#slideFrame').css('width');
	var slideAmount = parseInt(slideWidth);
	function slideLeft(){
		if(currentSlide > 1){
			$("#slideBoard").animate({
				left: ['+='+slideAmount, 'swing']
				}, slideTime );
			currentSlide += -1;
		}
	}
	function slideRight(){
		if(currentSlide < totalSlides){
			$("#slideBoard").animate({ 
				left: ['+=-'+slideAmount, 'swing']
				}, slideTime );
			currentSlide += 1;
		}
	}
	function slideTo(slideNumber){
		///*
		slideNumber = parseInt(slideNumber);
		slidePos = slideNumber -1;
		var p1 = $('#slideBoard');
		var position1 = p1.position();
		
		var p2 = $('#slideBoard div:nth-child(' + slideNumber + ')');
		//alert(p2.html());
		var position2 = p2.position();
		var slideFor = 	(-position1.left) - position2.left;

		//alert('p1: '+ position1.left + ' p2: '+ position2.left + ' Sliding: '+slideFor);
		$("#slideBoard").animate({ 
			left: ['+='+slideFor, 'swing']
			}, slideTime );
		currentSlide = slideNumber;
		
		//*/
	}
	$('#slide2Left').click(function(){
		slideLeft();
	});
	$('#slide2Right').click(function(){
		slideRight();
	});
	
	$(document).keydown(function(e){
		 if(e.keyCode == 37){ 
			 //alert( "left pressed" );
			slideLeft();
			return false;
		 }
		 if(e.keyCode == 39){ 
			 //alert( "rigt pressed" );
			slideRight();
			return false;
		 }
	});

	//# Slide Reference Tool
	for(i = 1; i < (totalSlides+1); i++){
		$('#slideReference').append('<div class="slideNumber">'+i+'</div>');
	}
	$('.slideNumber').click(function(){
		slideTo($(this).html());
	});
	$(".slidePoint").touchwipe({
     wipeLeft: function() { 	slideRight(); },
     wipeRight: function() { 	slideLeft(); },
     min_move_x: 20,
     preventDefaultEvents: true
	});
});

/* CSS Document */
					#slider {
						position: relative;
						margin: 79px 0 50px 0;
						height: 500px;
						padding-bottom: 50px;
						border-bottom: 1px solid #9B9B9B;
					}
					#slideFrame { 
						width:870px;
						left: 40px;
						min-height:460px;
						height:460px;
						overflow:hidden;
						position:relative;
						border:#CCC solid 0px;
					}
					#test { 
						width:30px; 
						min-height:460px;
						height:460px;
						overflow:hidden;
						position:relative;
						border:#CCC solid 0px;
					}
					#slideBoard {
						position:absolute;
						top:0px;
						left:0px;
						width:3000px;
						min-height:400px;	
						margin:0px;
						padding:0px;
						background: #ccc;
						opacity: .3;
					}
					.slidePoint {
						width:870px; 
						min-height:400px;
						height:410px;
						display:inline-block;
						margin:0px;
						padding:0xp;
						float:left;
					}
					.slidePoint p {
						padding:5px;
					}
					#slide2Left, #slide2Right{
						position:absolute;
						top: 200px;
						bottom: 5px;
						cursor:pointer;
						width:20px;
						height:20px;
						color:#9B9B9B;
						border:#9B9B9B solid 1px;
						border-radius: 5px;
						padding:3px;
						text-align:center;
						display: inline-block;
					}
					#slide2Right{
						left: 920px;
					}
					
					#slideReference {
						position:absolute;
						width: 770px;
						min-height:10px;
						bottom:5px;
						left:50px;
						text-align:center;
					}
					.slideNumber {
						border-radius: 2px;
						background:#929292;
						color:#ffffff;
						cursor:pointer;
						display:inline-block;
						padding:3px;
						margin:3px;
						text-align:center;
						min-height:15px;
						min-width:15px;
					}

<div id="randomdiv1" class="article_example_div">
<embed src="Black Hawk Down - Music Video - Riot.mp3" width=25 height=25 autostart=false repeat=true loop=true></embed>
</div>

// ===== VARIABLES =====
var isPlaying = false;
var curNote = 0;
var curTempo = 100;

// ===== FUNCTIONS =====
// playTune: Play the next note!
function playTune() {
	if (isPlaying !== false) {
		var nextNote = 60000 / curTempo / 4;
		// Turn off all lights on the tracker's row
		$("#tracker li.track").removeClass("active");
		// Light up the tracker on the current track
		$("#tracker li.track.col_" + curNote).addClass("active");
		// Find each active note, play it
		var tmpAudio;
		$(".playBar[id^=control] li.track.active.col_" + curNote).each(function(i){
			tmpAudio = document.getElementById($(this).data('sound_id'));
			if (!tmpAudio.paused) {
				// Pause and reset it
				tmpAudio.pause();
				tmpAudio.currentTime = 0.0;
			}
			tmpAudio.play();
		});
		// Move the track forward
		curNote = (curNote + 1) % 16;
	} // if (isPlaying)
} // playTune

// Make a new hash
function buildHash() {
	// Start it
	var newhash = '';
	// For each track, check and add in a 0/1 as appropriate
	$(".playBar[id^=control] li.track").each(function(i){
		newhash += $(this).is('.active') ? '1' : '0';
	});
	// Separate it
	newhash += '|';
	// Now, toss in the note
	newhash += $('#temposlider').slider('value');
	// Check and see if we really need to update
	if (location.hash != '#' + newhash) location.hash = newhash;
} // buildHash

// Read in our hash
function parseHash() {
	if (location.hash.length > 0) {
		// Split it up, work it out, removing the actual hashmark
		var pieces = location.hash.substring(1).split('|');
		// Set the lights
		var lights = pieces[0];
		$(".playBar[id^=control] li.track").each(function(i){
			// Make sure we haven't exceeded
			if (i >= lights.length) return false;
			// Check our location, turn on class if need be
			if (lights.charAt(i) == '1') {
				$(this).addClass('active');
			}
		});
		// Set the tempo
		if (typeof pieces[1] !== 'undefined') {
			$('#temposlider').slider('value', parseInt(pieces[1]));
			$('#tempovalue').innerHTML = pieces[1];
			curTempo = parseInt(pieces[1]);
		}
	}
} // parseHash

// Clear it!
function clearAll() {
	$(".playBar[id^=control] li.active").removeClass('active');
}

// Run on DOM ready
$(document).ready(function(){
	// Process each of the audio items, creating a playlist sort of setup
	$("audio").each(function(i){
		// Make a self reference for ease of use in click events
		var self = this;

		// Make a sub-list for our control
		var $ul = $('<ul id="control_' + this.id + '" class="playBar">');
		$ul.append('<li class="header">' + this.title + '</li>');
		// Add 16 list items!
		for (j = 0; j < 16; j++) {
			var $li =
				$('<li class="track col_'+j+'">'+self.id+'</li>')
				.click(function(){
					$(this).toggleClass('active');
					buildHash();
				})
				.data('sound_id', self.id);
			$ul.append($li);
		} // for (i = 0; i < 16; i++)
		// Append it up
		$('<li>').append($ul).appendTo('#lights');
	});

	// Bind up a click for our button
	$("#soundstart").click(function(){
		if (isPlaying === false) {
			// Start the playing!
			curNote = 0;
			isPlaying = setInterval(playTune, 60000 / curTempo / 4);
			// Change our display
			this.innerHTML = "Stop";
		} else {
			clearInterval(isPlaying);
			isPlaying = false;
			$("#tracker li.track").removeClass("active");
			$("audio").each(function(){
				this.pause();
				this.currentTime = 0.0;
			});
			this.innerHTML = "Play";
		}
	});

	$('#clearall').click(clearAll);
	$('#reload').click(parseHash);

	// ===== Misc =====
	// Build or read the hash
	if (location.hash == '') {
		// I was building this at load - but now, no, just to be safe
		//buildHash();
	} else {
		parseHash();
	}

	// Show our value, now that we've built off of the hash
	$('#tempovalue').html(curTempo);
	// Make our tempo slider
	$('#temposlider').slider({
		'value': curTempo,
		'min': 30,
		'max': 170,
		'step': 2,
		'slide': function(e, ui) {
			curTempo = ui.value;
			$('#tempovalue').html(curTempo);
			if (isPlaying !== false) {
				clearInterval(isPlaying);
				isPlaying = setInterval(playTune, 60000 / curTempo / 4);
			}
		},
		'stop': function(e, ui) {
			buildHash();
		}
	});
});