HTML5 video notes.txt

=================================
NOTES - HTML5 video
=================================

TO-DO
1. DONE check if browser supports HTML5 video (and create alternative/polyfill)
2. DONE add BS and style buttons etc
3. add fullscreen functionality?
4. DONE add fast forward/back
5. DONE add captioning
6. add audio description
7. DONE add namespaces for CSS; and remove IDs?
8. DONE optimize JS
9. use variables for text labels for seekInterval, useSlider, fallback, w/h, volume


=================================

CAPTIONATOR
Asked from @dennisl May 20 2:40PT
@cgiffard @silviapfeiffer Captionator looks awesome! Do you have an example of how to use custom renderer?

=================================
? for Terrill Thompson

>> Can you access show/hide captions in native player, and if controls are off?

Captionator?!

vtt has to be on server?!!

-webm for FF and Opera
-controls poor overall, captions? have to use JS to display captions???
-dotsub, castingwords? http://www.automaticsync.com/ and *http://amara.org/en/


=================================
CONTROLS

<button id="rewind"><img src="" alt="rewind 10 seconds" /></button>
<button id="rewind"><span aria-label="rewind 10 seconds">&lt;&lt;</span></button>

<input class="ump-rewind" type="image" title="Rewind 10 seconds" style="left:68px" value="" src="images/media-rewind-white.png">
<input class="ump-forward" type="image" title="Advance 10 seconds" style="left:102px" value="" src="images/media-forward-white.png">


=================================
2 EXAMPLES (second with WEBM)

<video id="myvid" width="640" height="360" poster="media/poster_PayPal_Austin2.jpg" autobuffer>
	<source src="https://www.paypalobjects.com/webstatic/mktg/videos/PayPal_AustinSMB_baseline.mp4" type="video/mp4" />
	<!-- <source src="https://www.paypalobjects.com/webstatic/mktg/videos/PayPal_AustinSMB_baseline.webm" type="video/webm" /> -->
	<track kind="captions" label="English captions" src="media/captions_PayPal_Austin_en.vtt" srclang="en" />
</video>

<video id="myvid" width="640" height="360" poster="http://w3.org/2014/03/HorribleHistories.jpg" autobuffer controls>
	<source src="hhttp://w3.org/2014/03/HorribleHistories.mp4" type="video/mp4">
	<source src="http://w3.org/2014/03/HorribleHistories.webm" type="video/webm">
	<track kind="captions" label="English captions" src="media/captions_HorribleHistories_en.vtt" srclang="en" default="" />
</video>


=================================
Fullscreen
https://developer.mozilla.org/en-US/Apps/Build/Manipulating_media/cross_browser_video_player

<button id="fs">Fullscreen</button>

	// Check if the browser supports the Fullscreen API
	var fullScreenEnabled = !!(document.fullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled || document.webkitSupportsFullscreen || document.webkitFullscreenEnabled || document.createElement('video').webkitRequestFullScreen);
	// If the browser doesn't support the Fulscreen API then hide the fullscreen button
	if (!fullScreenEnabled) {
		document.getElementById('fs').style.display = 'none';
	}
   	var handleFullscreen = function() {
   		// If fullscreen mode is active...	
		if (isFullScreen()) {
			if (document.exitFullscreen) document.exitFullscreen();
			else if (document.mozCancelFullScreen) document.mozCancelFullScreen();
			else if (document.webkitCancelFullScreen) document.webkitCancelFullScreen();
			else if (document.msExitFullscreen) document.msExitFullscreen();
			setFullscreenData(false);
		}
		else {
			if (movie.requestFullscreen) movie.requestFullscreen();
			else if (movie.mozRequestFullScreen) movie.mozRequestFullScreen();
			else if (movie.webkitRequestFullScreen) {
				video.webkitRequestFullScreen();
			}
			else if (movie.msRequestFullscreen) movie.msRequestFullscreen();
			setFullscreenData(true);
		}
  	}
	document.getElementById('fs').addEventListener('click', function(e) {
		handleFullscreen();
	});


=================================
CAPTIONATOR
<script type="text/javascript" src="js/captionator.js"></script>
<script type="text/javascript">
    window.addEventListener("load",function(eventData) {
        captionator.captionify();
    });
</script>


=================================
/* styling the progress indicator bar */
/* http://html5doctor.com/the-progress-element/ */
progress {
	color: #0063a6;
	font-size: .6em;
	line-height: 1.5em;
	text-indent: .5em;
	width: 15em;
	height: 1.8em;
	border: 1px solid #0063a6;
	background: #fff;
}





	<source src="file://localhost/Users/dlembree/Movies/PayPal_AustinSMB_baseline.webm" type="video/webm" />


00:00:00.001 --> 00:00:00.000






	/* CAPTIONATOR INIT *********** */
	// var videoCaptions = document.getElementById('videoCaptions');
	// captionator.captionify();

})();


    window.addEventListener("load",function(eventData) {
        captionator.captionify();
    });


    <script type="text/javascript">
    window.addEventListener("load",function() {
        captionator.captionify();
    });
</script>


	/* CAPTIONATOR INIT *********** */
	var videoCaptions = document.getElementById('videoCaptions');
	captionator.captionify(null,null,{
		"appendCueCanvasTo": videoCaptions
		}
	);


	/* CAPTIONATOR INIT *********** */
	var videoCaptions = document.getElementById('videoCaptions');
	captionator.captionify(null,null,{
		"appendCueCanvasTo": "videoCaptions"
		}
	);
	//captionator.captionify();





	var tracks = movie.textTracks;
	for (var j=0; j < tracks.length; j++) {
		track = movie.textTracks[j];
		if (track.kind === "captions") {
			//track.addEventListener("cuechange",displayCue,false);
			track.addEventListener("cuechange",function() {
				if (this.activeCues[0].text) {
					captionContainer.innerHTML = this.activeCues[0].text;
				}
			},false);
		}
	}

	// function displayCue() {

	// 	innerHTML = x;
	// }






#volume {
	/* Safari */
	-webkit-transform: rotate(-90deg);

	/* Firefox */
	-moz-transform: rotate(-90deg);

	/* IE */
	-ms-transform: rotate(-90deg);

	/* Opera */
	-o-transform: rotate(-90deg);
}




	obj.movie = obj.container.getElementsByTagName('video')[0];
	//console.log(obj.movie);

	obj.btnPlay = obj.container.getElementsByClassName('px-video-play')[0];
	//console.log(obj.btnPlay);

	obj.btnPause = obj.container.getElementsByClassName('px-video-pause')[0];
	//console.log(obj.btnPause);

	obj.btnStop = obj.container.getElementsByClassName('px-video-stop')[0];
	//console.log(obj.btnPause);

	obj.btnRewind = obj.container.getElementsByClassName('px-video-rewind')[0];
	//console.log(obj.btnRewind);

	obj.btnForward = obj.container.getElementsByClassName('px-video-forward')[0];
	//console.log(obj.btnForward);

	obj.btnVolume = obj.container.getElementsByClassName('px-video-volume')[0];
	//console.log(obj.btnVolume);

	obj.btnMute = obj.container.getElementsByClassName('px-video-mute')[0];
	//console.log(obj.btnMute);

	obj.progressBar = obj.container.getElementsByClassName('videoProgress')[0];
	//console.log(obj.btnMute);

	obj.captionsContainer = obj.container.getElementsByClassName('videoCaptions')[0];
	//console.log(obj.captionsContainer);

	obj.captionsBtn = obj.container.getElementsByClassName('px-video-btnCaptions')[0];
	//console.log(obj.captionsBtn);

	obj.captionsBtnContainer = obj.container.getElementsByClassName('captionsBtnContainer')[0];
	//console.log(obj.captionsBtnContainer);





input[type='range'] {
	-webkit-appearance: none;
	border-radius: 5px;
	box-shadow: inset 0 0 5px #333;
	background-color: #999;
	height: 10px;
	vertical-align: middle;
}
input[type='range']::-moz-range-track {
	 -moz-appearance: none;
	 border-radius: 5px;
	 box-shadow: inset 0 0 5px #333;
	 background-color: #999;
	 height: 10px;
}
input[type='range']::-webkit-slider-thumb {
	 -webkit-appearance: none !important;
	 border-radius: 20px;
	 background-color: #FFF;
	 box-shadow:inset 0 0 10px rgba(000,000,000,0.5);
	 border: 1px solid #999;
	 height: 20px;
	 width: 20px;
}
input[type='range']::-moz-range-thumb {
	 -moz-appearance: none;
	 border-radius: 20px;
	 background-color: #FFF;
	 box-shadow:inset 0 0 10px rgba(000,000,000,0.5);
	 border: 1px solid #999;
	 height: 20px;
	 width: 20px;
}*/
/*input[type='range'] {
	-webkit-appearance: none;
	height: 10px;
	background-color: #E6E6E6;
}
input[type='range']::-moz-range-track {
	-moz-appearance: none;
	height: 12px;
	width: 12px;
	background-color: #009CDF;
}
input[type='range']::-webkit-slider-thumb {
	-webkit-appearance: none !important;
	height: 10px;
	background-color: #E6E6E6;
}
input[type='range']::-moz-range-thumb {
	-moz-appearance: none;
	height: 12px;
	width: 12px;
	background-color: #009CDF;
}




****************************************
'manual' captions code from AblePlayer
****************************************

2209
AblePlayer.prototype.setupTimedText = function(kind,track) {  
  // Only supports timed text in VTT format
  var trackSrc = track.getAttribute('src');
  var trackLang = track.getAttribute('srclang');
  if (trackSrc) { 
    // create a temp div for holding track data
    var tempDiv = $('<div>',{ 
      style: 'display:none'
    });
    // Save the current object context in thisObj for use with inner functions.
    var thisObj = this; 

    // load  file and store captions into array 
    tempDiv.load(trackSrc, function (trackText, status, req) { 
      if (status === 'error') { 
        if (this.debug) {
          console.log ('error reading ' + kind + ' file:' + status);
        }
      }
      else {
        //stanardize on \n for eol character
        trackText = thisObj.strip(trackText.replace(/\r\n|\r|\n/g, '\n'));
        var cues = trackText.split('\n\n'); //creates an array
        for (var c in cues) {
          var cue = cues[c].split('\n');
          if(cue.length >=2) {
            var start = thisObj.strip(cue[0].split(' --> ')[0]);
            var end = thisObj.strip(cue[0].split(' --> ')[1]);
            var cueText = cue[1];
            if (cue.length > 2) {
              for (var i=2; i<cue.length;i++) { 
                cueText += '<br/>'+cue[i];
              }
            }
            if (typeof cueText !== 'undefined') {
              if (cueText.length > 1) { 
                start = thisObj.toSeconds(start);
                end = thisObj.toSeconds(end);
                if (kind === 'captions') { 
                  thisObj.captions.push({'start':start,'end':end,'text':cueText}); 
                }
                else if (kind === 'description') { 
                  thisObj.description.push({'start':start,'end':end,'text':cueText});                   
                }
              }
            }
          }
        }
      }
    });
  } 
  //done with temp div. Can remove it now. 
  tempDiv.remove(); 
}


1320
.on('timeupdate',function() {
  thisObj.updateTime('current',thisObj.media.currentTime);
  if (thisObj.captionsOn) { 
    thisObj.showCaptions();
  }
})

2263
AblePlayer.prototype.showCaptions = function() { 
  if (this.player === 'html5') {
    var now = this.media.currentTime;
  }
  else { // jw player
    var now = jwplayer(this.jwId).getPosition();
  }
  for (var c in this.captions) {
    if ((this.captions[c].start <= now) && (this.captions[c].end > now)) {      
      var thisCaption = c;
      break;
    }
  }
  if (typeof thisCaption !== 'undefined') {  
    if (!this.captionsStarted) { 
      //this is the first caption
      this.$captionDiv.show();
      this.captionsStarted = true;
    }     
    if (this.currentCaption != thisCaption) { 
      // it's time to load the new caption into the container div 
      this.$captionDiv.html(this.captions[thisCaption].text);       
      this.currentCaption = thisCaption;
    } 
  }
  else {     
    this.$captionDiv.html('');
    this.currentCaption = -1;
  } 
}




new InitPxVideo({
	"id": 'myvid',
	"captions": "true",
	"width": "640",
	"height": "360"
});



<!-- Modernizr -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.min.js"></script>


******************


	console.log(navigator.appVersion);


	// If IE9, stop customization (use native controls)
	if (navigator.appVersion.indexOf("MSIE 9.") !=-1 ) {
		return false;
	}


	// If IE 10 or IE 11, use native captioning 
	if ( (navigator.appVersion.indexOf("MSIE 11.") !== -1) || (navigator.appVersion.indexOf("MSIE 10.") !== -1) ) {
		console.log("Detected IE 10 or IE 11");
		return false;
	}


	obj.isSmartphoneOrTablet = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
	if (obj.isSmartphoneOrTablet) {
		return false;
	}


detection links:

http://www.iriphon.com/2013/02/07/detecting-iphonesipadsandroids-and-their-os-versions-in-javascript-via-user-agent/
https://coderwall.com/p/i817wa
http://tanalin.com/en/articles/ie-version-js/
http://blogs.msdn.com/b/ieinternals/archive/2013/09/21/internet-explorer-11-user-agent-string-ua-string-sniffing-compatibility-with-gecko-webkit.aspx
http://msdn.microsoft.com/en-us/library/ie/hh273397(v=vs.85).aspx
http://msdn.microsoft.com/en-us/magazine/hh475813.aspx



******************
trying to solve for HCM
using this technique: https://developer.yahoo.com/blogs/ydn-blog/techniques-high-contrast-friendly-icons-153038779.html
getting margin offset in layout (buttons down page)
CSS and JS:


/* buttons */
.px-video-controls button {
	border: 1px #fff solid;
	background: transparent;
	padding: 0;
	margin: 0 5px;
	width: 25px;
	height: 20px;
	overflow: hidden;
}
.px-video-controls button .icon:before {
	content: url('../images/px-video-sprite.png');
	display: inline-block;
}
.px-video-controls button:focus {
	border: 1px #999 dotted;
	outline: none;
}

/* restart button */
.px-video-controls button.px-video-restart .icon:before {
	margin: -333px 0 0 -9px;
}

/* rewind button */
.px-video-controls button.px-video-rewind .icon:before {
	margin: -189px 0 0 -11px;
}

/* play button */
.px-video-controls button.px-video-play .icon:before {
	margin: -45px 0 0 -11px;
}

/* pause button */
.px-video-controls button.px-video-pause .icon:before {
	margin: -117px 0 0 -11px;
}

/* forward button */
.px-video-controls button.px-video-forward .icon:before {
	margin: -261px 0 0 -13px;
}


	// Insert custom video controls
	console.log("Inserting custom video controls");
	obj.controls.innerHTML = '<div class="clearfix">' + 
			'<div class="pull-left">' + 
				'<button class="px-video-restart"><span class="icon"></span>Restart</button>' + 
				'<button class="px-video-rewind"><span class="icon"></span>rewind <span class="px-seconds">10</span> seconds</button>' + 
				'<button class="px-video-play"><span class="icon"></span>Play</button>' + 
				'<button class="px-video-pause hide"><span class="icon"></span><Pause</button>' + 
				'<button class="px-video-forward"><span class="icon"></span>forward <span class="px-seconds">10</span> seconds</button>' + 
			'</div>' + 


******************



@media only screen and (max-width: 640px) {
	.px-video-container video,
	.px-video-container,
	.px-video-container #myvid img {
		width 100%;
		height: auto;
	}
}


	// Output to log if debug on
	if (options.debug) {
		console.log("Inserting custom video controls");
	}



*****
Cross-Origin Resource Sharing (CORS) 

http://www.w3.org/TR/cors/
http://www.html5rocks.com/en/tutorials/cors/
http://caniuse.com/#search=cors





<figure class="px-video-container" id="myvid">
	<figcaption id="video-description">
		<p>Vignette about how PayPal's Cash for Registers program helped a local business in Austin, Texas.</p>
	</figcaption>




References

http://www.w3.org/wiki/HTML/Elements/video
http://www.w3.org/2010/05/video/mediaevents.html

http://dev.w3.org/html5/webvtt/
http://html5doctor.com/video-subtitling-and-webvtt/





function enterPressed(evn) {
if (window.event && window.event.keyCode == 13) {
  Some code
} else if (evn && evn.keyCode == 13) {
  Some Code
}
}
document.onkeypress = enterPressed;


http://javascript.info/tutorial/focus-blur







***************************
better sniffing
http://www.javascripter.net/faq/browsern.htm
***************************

var nVer = navigator.appVersion;
var nAgt = navigator.userAgent;
var browserName  = navigator.appName;
var fullVersion  = ''+parseFloat(navigator.appVersion); 
var majorVersion = parseInt(navigator.appVersion,10);
var nameOffset,verOffset,ix;

// In Opera, the true version is after "Opera" or after "Version"
if ((verOffset=nAgt.indexOf("Opera"))!=-1) {
 browserName = "Opera";
 fullVersion = nAgt.substring(verOffset+6);
 if ((verOffset=nAgt.indexOf("Version"))!=-1) 
   fullVersion = nAgt.substring(verOffset+8);
}
// In MSIE, the true version is after "MSIE" in userAgent
else if ((verOffset=nAgt.indexOf("MSIE"))!=-1) {
 browserName = "Microsoft Internet Explorer";
 fullVersion = nAgt.substring(verOffset+5);
}
// In Chrome, the true version is after "Chrome" 
else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) {
 browserName = "Chrome";
 fullVersion = nAgt.substring(verOffset+7);
}
// In Safari, the true version is after "Safari" or after "Version" 
else if ((verOffset=nAgt.indexOf("Safari"))!=-1) {
 browserName = "Safari";
 fullVersion = nAgt.substring(verOffset+7);
 if ((verOffset=nAgt.indexOf("Version"))!=-1) 
   fullVersion = nAgt.substring(verOffset+8);
}
// In Firefox, the true version is after "Firefox" 
else if ((verOffset=nAgt.indexOf("Firefox"))!=-1) {
 browserName = "Firefox";
 fullVersion = nAgt.substring(verOffset+8);
}
// In most other browsers, "name/version" is at the end of userAgent 
else if ( (nameOffset=nAgt.lastIndexOf(' ')+1) < 
          (verOffset=nAgt.lastIndexOf('/')) ) 
{
 browserName = nAgt.substring(nameOffset,verOffset);
 fullVersion = nAgt.substring(verOffset+1);
 if (browserName.toLowerCase()==browserName.toUpperCase()) {
  browserName = navigator.appName;
 }
}
// trim the fullVersion string at semicolon/space if present
if ((ix=fullVersion.indexOf(";"))!=-1)
   fullVersion=fullVersion.substring(0,ix);
if ((ix=fullVersion.indexOf(" "))!=-1)
   fullVersion=fullVersion.substring(0,ix);

majorVersion = parseInt(''+fullVersion,10);
if (isNaN(majorVersion)) {
 fullVersion  = ''+parseFloat(navigator.appVersion); 
 majorVersion = parseInt(navigator.appVersion,10);
}

document.write(''
 +'Browser name  = '+browserName+'<br>'
 +'Full version  = '+fullVersion+'<br>'
 +'Major version = '+majorVersion+'<br>'
 +'navigator.appName = '+navigator.appName+'<br>'
 +'navigator.userAgent = '+navigator.userAgent+'<br>'
)





		// turn off native caption rendering
		var track = {};
		var tracks = obj.movie.textTracks;
		for (var j=0; j < tracks.length; j++) {
			// track = obj.movie.textTracks[j];
			// track.mode = "hidden";
			// *** the above code doesn't work in Safari 7 so removing from DOM
			obj.movie.removeChild(track);
		}





// Browser sniff mod1
function browserSniff() {
	var nVer = navigator.appVersion;
	var nAgt = navigator.userAgent;
	var browserName = navigator.appName;
	var fullVersion = ''+parseFloat(navigator.appVersion); 
	var majorVersion = parseInt(navigator.appVersion,10);
	var nameOffset,verOffset,ix;

	// In Opera, the true version is after "Opera" or after "Version"
	if ((verOffset=nAgt.indexOf("Opera"))!=-1) {
		browserName = "Opera";
		fullVersion = nAgt.substring(verOffset+6);
		if ((verOffset=nAgt.indexOf("Version"))!=-1) 
		fullVersion = nAgt.substring(verOffset+8);
	}
	// In MSIE, the true version is after "MSIE" in userAgent
	else if ((verOffset=nAgt.indexOf("MSIE"))!=-1) {
		browserName = "IE";
		fullVersion = nAgt.substring(verOffset+5);
	}
	// In Chrome, the true version is after "Chrome" 
	else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) {
		browserName = "Chrome";
		fullVersion = nAgt.substring(verOffset+7);
	}
	// In Safari, the true version is after "Safari" or after "Version" 
	else if ((verOffset=nAgt.indexOf("Safari"))!=-1) {
		browserName = "Safari";
		fullVersion = nAgt.substring(verOffset+7);
		if ((verOffset=nAgt.indexOf("Version"))!=-1) 
		fullVersion = nAgt.substring(verOffset+8);
	}
	// In Firefox, the true version is after "Firefox" 
	else if ((verOffset=nAgt.indexOf("Firefox"))!=-1) {
		browserName = "Firefox";
		fullVersion = nAgt.substring(verOffset+8);
	}
	// In most other browsers, "name/version" is at the end of userAgent 
	else if ( (nameOffset=nAgt.lastIndexOf(' ')+1) < (verOffset=nAgt.lastIndexOf('/')) ) {
		browserName = nAgt.substring(nameOffset,verOffset);
		fullVersion = nAgt.substring(verOffset+1);
		if (browserName.toLowerCase()==browserName.toUpperCase()) {
			browserName = navigator.appName;
		}
	}

	// Trim the fullVersion string at semicolon/space if present
	if ((ix=fullVersion.indexOf(";"))!=-1) {
		fullVersion=fullVersion.substring(0,ix);
	}
	if ((ix=fullVersion.indexOf(" "))!=-1) {
		fullVersion=fullVersion.substring(0,ix);
	}

	// Get major version
	majorVersion = parseInt(''+fullVersion,10);
	if (isNaN(majorVersion)) {
		fullVersion = ''+parseFloat(navigator.appVersion); 
		majorVersion = parseInt(navigator.appVersion,10);
	}

	return [browserName, majorVersion];
}


	// Browser sniff mod2
	function browserSniff() {
		var nVer = navigator.appVersion;
		var nAgt = navigator.userAgent;
		var browserName = navigator.appName;
		var fullVersion = ''+parseFloat(navigator.appVersion); 
		var majorVersion = parseInt(navigator.appVersion,10);
		var nameOffset,verOffset,ix;

		// In Opera, the true version is after "Opera" or after "Version"
		if ((verOffset=nAgt.indexOf("Opera"))!=-1) {
			browserName = "Opera";
			fullVersion = nAgt.substring(verOffset+6);
			if ((verOffset=nAgt.indexOf("Version"))!=-1) 
			fullVersion = nAgt.substring(verOffset+8);
		}
		// MSIE 11
		else if ((navigator.appVersion.indexOf("Windows NT") !== -1) && (navigator.appVersion.indexOf("rv:11") !== -1)) {
			browserName = "IE";
			fullVersion = "11;";
		}
		// In MSIE, the true version is after "MSIE" in userAgent
		else if ((verOffset=nAgt.indexOf("MSIE"))!=-1) {
			browserName = "IE";
			fullVersion = nAgt.substring(verOffset+5);
		}
		// In Chrome, the true version is after "Chrome" 
		else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) {
			browserName = "Chrome";
			fullVersion = nAgt.substring(verOffset+7);
		}
		// In Safari, the true version is after "Safari" or after "Version" 
		else if ((verOffset=nAgt.indexOf("Safari"))!=-1) {
			browserName = "Safari";
			fullVersion = nAgt.substring(verOffset+7);
			if ((verOffset=nAgt.indexOf("Version"))!=-1) 
			fullVersion = nAgt.substring(verOffset+8);
		}
		// In Firefox, the true version is after "Firefox" 
		else if ((verOffset=nAgt.indexOf("Firefox"))!=-1) {
			browserName = "Firefox";
			fullVersion = nAgt.substring(verOffset+8);
		}
		// In most other browsers, "name/version" is at the end of userAgent 
		else if ( (nameOffset=nAgt.lastIndexOf(' ')+1) < (verOffset=nAgt.lastIndexOf('/')) ) {
			browserName = nAgt.substring(nameOffset,verOffset);
			fullVersion = nAgt.substring(verOffset+1);
			if (browserName.toLowerCase()==browserName.toUpperCase()) {
				browserName = navigator.appName;
			}
		}

		// Trim the fullVersion string at semicolon/space if present
		if ((ix=fullVersion.indexOf(";"))!=-1) {
			fullVersion=fullVersion.substring(0,ix);
		}
		if ((ix=fullVersion.indexOf(" "))!=-1) {
			fullVersion=fullVersion.substring(0,ix);
		}

		// Get major version
		majorVersion = parseInt(''+fullVersion,10);
		if (isNaN(majorVersion)) {
			fullVersion = ''+parseFloat(navigator.appVersion); 
			majorVersion = parseInt(navigator.appVersion,10);
		}

		return [browserName, majorVersion];
	}

	// Global variable
	var obj = {};

	obj.arBrowserInfo = browserSniff();
	obj.browserName = obj.arBrowserInfo[0];
	obj.browserMajorVersion = obj.arBrowserInfo[1];

	alert(obj.browserName);
	alert(obj.browserMajorVersion);



STOP
	ORIGINAL STOP
	obj.btnStop.addEventListener('click', function() {
		obj.movie.pause();
		obj.movie.currentTime=0;
		
		// Clear captions and progress bar
		obj.captionsContainer.innerHTML = "";
		obj.progressBar.value = 0;
		obj.progressBarSpan.innerHTML = 0;

		// Special handling for "manual" captions
		if (!obj.isTextTracks) {
			obj.subcount = 0;
		}

	}, false);


	// Handle end of video - set back to start
	obj.movie.onended = function(e) {
		obj.movie.currentTime = 0;

		// reset Play/Pause button
		obj.btnPlay.className = "px-video-play px-video-show-inline";
		obj.btnPause.className = "px-video-pause hide";
		
		// Clear captions and progress bar
		obj.captionsContainer.innerHTML = "";
		obj.progressBar.value = 0;
		obj.progressBarSpan.innerHTML = 0;

		// Special handling for "manual" captions
		if (!obj.isTextTracks) {
			obj.subcount = 0;
		}
	};




https://github.paypal.com/pages/dlembree/accessible-html5-video-player/


<img src="images/PayPalOpenSourcecolor.svg" width="160" height="20" alt="PayPal open source">
<img src="images/PayPalOpenSourcecolor.svg" width="224" height="28" alt="PayPal open source">