basic/webm-player.html - webm/webm-dash-javascript - Git at Google

 <!--
 Copyright (c) 2012 The WebM project authors. All Rights Reserved.
 Use of this source code is governed by a BSD-style license
 that can be found in the LICENSE file in the root of the source
 tree. An additional intellectual property rights grant can be found
 in the file PATENTS.  All contributing project authors may
 be found in the AUTHORS file in the root of the source tree.
 -->

 <html>
   <head>
     <title>WebM test</title>

  <script type="text/javascript" src="../shared/utils.js"> </script>

    <script type="text/javascript">
      function log(str) {
        logToElement('c', str);
      }
    </script>

     <script type="text/javascript" src="../shared/http.js"> </script>
     <script type="text/javascript" src="../shared/webm_parser.js"> </script>
     <script type="text/javascript" src="../shared/webm_utils.js"> </script>

     <script type="text/javascript" src="webm_player.js"> </script>
     <script type="text/javascript">


 function vt_log(str) {
   document.getElementById('video_tag_log').innerHTML += str + "<br/>"
 }

 function onEvent(name, v) {
  vt_log(name + " : " );
 //        " " + errorName(v.error) + "<br/>" +
 //        " " + readyStateName(v.readyState) + "<br/>" +
 //        " " + networkStateName(v.networkState));
 }

 function onPageLoad() {
  vt_log("onPageLoad()");
  v = document.getElementById('v');

  var events = [
     'loadstart',
     'progress',
     'suspend',
     'abort',
     'error',
     'emptied',
     'stalled',
     'play',
     'pause',
     'loadedmetadata',
     'loadeddata',
     'waiting',
     'playing',
     'canplay',
     'canplaythrough',
     'seeking',
     'seeked',
     //'timeupdate',
     'ended',
     'ratechange',
     //'durationchange',
     'volumechange',
     'webkitsourceopen',
     'webkitsourceended',
     'webkitsourceclose',
   ];

   for (var i = 0; i < events.length; ++i) {
     v.addEventListener(events[i], function (e) { onEvent(e.type, v); }, false);
   }


   // Extract the 'url' parameter from the document URL.
   var regex = new RegExp("[\\?&]url=([^&#]*)");
   var results = regex.exec( window.location.href );
   if (results == null)
     return;
   var url = results[1];

   // Assign to the input field.
   u = document.getElementById('u');
   u.value = url;
 }

 function onStartClick() {
   u = document.getElementById('u');
   var url = u.value;
   if (url == null || url.length == 0) {
     log('Need a URL in the text box.');
     return;
   }
   startPlayer(url);
 }

 var wmp = null;

 function status_func() {
   var status = document.getElementById('status');
   if (wmp) {
     status.innerHTML = "ql " + wmp.getClusterQueueLength() +
                      "/" + wmp.getClusterQueueThreshold() + "<br/>";
     status.innerHTML += wmp.getSecondsBufferedAhead() + "<br/>";
   }

   window.setTimeout(status_func, 250);
 };
 window.setTimeout(status_func, 250);

 var wid = 0;
 function startPlayer(url) {
   log('startPlayer ' + url);
   var video_tag = document.getElementById('v');
   var player_log = document.getElementById('player_log');

   if (!video_tag.webkitMediaSourceURL) {
     vt_log("Video tag does not have webkitMediaSourceURL!");
     return;
   }

   wmp = new WebMPlayer(url, video_tag, wid++);
   wmp.log = function(str) { if (player_log) player_log.innerHTML += str + "<br/>"; }

   video_tag.controls = true;
   video_tag.src = video_tag.webkitMediaSourceURL;
 }

 addPageLoadEvent(onPageLoad);

     </script>
   </head>
   <body>
     <input id="u" type="text" size="80" /><input type="button" value="Start" onClick="onStartClick();"><br/>
     <div id="status" style="width:100px; float:right;"> </div>
     <video id="v" autoplay>
     </video>
    <table>
     <tr>
      <td style="width:33%; vertical-align:text-top;"><div id="video_tag_log"> </div></td>
      <td style="width:33%; vertical-align:text-top;"><div id="c"> </div></td>
      <td style="width:33%; vertical-align:text-top;"><div id="player_log"> </div></td>
     </tr>
    </table>
   </body>
 </html>
	<!--
	Copyright (c) 2012 The WebM project authors. All Rights Reserved.
	Use of this source code is governed by a BSD-style license
	that can be found in the LICENSE file in the root of the source
	tree. An additional intellectual property rights grant can be found
	in the file PATENTS. All contributing project authors may
	be found in the AUTHORS file in the root of the source tree.
	-->

	<html>
	<head>
	<title>WebM test</title>

	<script type="text/javascript" src="../shared/utils.js"> </script>

	<script type="text/javascript">
	function log(str) {
	logToElement('c', str);
	}
	</script>

	<script type="text/javascript" src="../shared/http.js"> </script>
	<script type="text/javascript" src="../shared/webm_parser.js"> </script>
	<script type="text/javascript" src="../shared/webm_utils.js"> </script>

	<script type="text/javascript" src="webm_player.js"> </script>
	<script type="text/javascript">


	function vt_log(str) {
	document.getElementById('video_tag_log').innerHTML += str + "<br/>"
	}

	function onEvent(name, v) {
	vt_log(name + " : " );
	// " " + errorName(v.error) + "<br/>" +
	// " " + readyStateName(v.readyState) + "<br/>" +
	// " " + networkStateName(v.networkState));
	}

	function onPageLoad() {
	vt_log("onPageLoad()");
	v = document.getElementById('v');

	var events = [
	'loadstart',
	'progress',
	'suspend',
	'abort',
	'error',
	'emptied',
	'stalled',
	'play',
	'pause',
	'loadedmetadata',
	'loadeddata',
	'waiting',
	'playing',
	'canplay',
	'canplaythrough',
	'seeking',
	'seeked',
	//'timeupdate',
	'ended',
	'ratechange',
	//'durationchange',
	'volumechange',
	'webkitsourceopen',
	'webkitsourceended',
	'webkitsourceclose',
	];

	for (var i = 0; i < events.length; ++i) {
	v.addEventListener(events[i], function (e) { onEvent(e.type, v); }, false);
	}


	// Extract the 'url' parameter from the document URL.
	var regex = new RegExp("[\\?&]url=([^&#]*)");
	var results = regex.exec( window.location.href );
	if (results == null)
	return;
	var url = results[1];

	// Assign to the input field.
	u = document.getElementById('u');
	u.value = url;
	}

	function onStartClick() {
	u = document.getElementById('u');
	var url = u.value;
	if (url == null \|\| url.length == 0) {
	log('Need a URL in the text box.');
	return;
	}
	startPlayer(url);
	}

	var wmp = null;

	function status_func() {
	var status = document.getElementById('status');
	if (wmp) {
	status.innerHTML = "ql " + wmp.getClusterQueueLength() +
	"/" + wmp.getClusterQueueThreshold() + "<br/>";
	status.innerHTML += wmp.getSecondsBufferedAhead() + "<br/>";
	}

	window.setTimeout(status_func, 250);
	};
	window.setTimeout(status_func, 250);

	var wid = 0;
	function startPlayer(url) {
	log('startPlayer ' + url);
	var video_tag = document.getElementById('v');
	var player_log = document.getElementById('player_log');

	if (!video_tag.webkitMediaSourceURL) {
	vt_log("Video tag does not have webkitMediaSourceURL!");
	return;
	}

	wmp = new WebMPlayer(url, video_tag, wid++);
	wmp.log = function(str) { if (player_log) player_log.innerHTML += str + "<br/>"; }

	video_tag.controls = true;
	video_tag.src = video_tag.webkitMediaSourceURL;
	}

	addPageLoadEvent(onPageLoad);

	</script>
	</head>
	<body>
	<input id="u" type="text" size="80" /><input type="button" value="Start" onClick="onStartClick();"><br/>
	<div id="status" style="width:100px; float:right;"> </div>
	<video id="v" autoplay>
	</video>
	<table>
	<tr>
	<td style="width:33%; vertical-align:text-top;"><div id="video_tag_log"> </div></td>
	<td style="width:33%; vertical-align:text-top;"><div id="c"> </div></td>
	<td style="width:33%; vertical-align:text-top;"><div id="player_log"> </div></td>
	</tr>
	</table>
	</body>
	</html>