iizukanao · August 29, 2015 14:05
diff --git a/index.html b/index.html
 <!doctype html>
 <head>
 <title>Live streaming with Strobe Media Playback</title>
 <meta charset=utf-8>
 <meta name=viewport content="width=device-width, user-scalable=no">
 </head>
 <body>

 <script src="lib/swfobject.js"></script>
 <script src="lib/ParsedQueryString.js"></script>
 <script>

 var playerWidth = 480;
 var playerHeight = 360;

 // maximum allowed delay of live streaming
 var delayTolerance = 1000;  // milliseconds

 // reconnect when the client doesn't receive any frame for this milliseconds
 var mediaTimeout = 2000;  // milliseconds

 var parameters = {
  src: 'rtmp://YOUR_HOST/live/mystream',
  width: playerWidth,
  height: playerHeight,
  autoPlay: true,  // start playing the media after page load
  initialBufferTime : 0,  // buffer to fill before play begins
  expandedBufferTime : delayTolerance / 1000,  // maximum buffer size
  minContinuousPlayback : 0,  // minimum playback time without pausing
  liveBufferTime: 0,  // buffer time for live content
  streamType: 'live',
  scaleMode: 'none', // don't scale the video width and height
  verbose: true,  // display detailed error messages for debugging
  javascriptCallbackFunction: onPlayerEvent
 };

 var originTime = null;    // system time for the media time zero
 var timeoutTimer = null;  // timeout id
 var player = null;        // Strobe Media Player object (element)

 // called when a player event happened
 function onPlayerEvent(playerId, eventName, eventObj) {
  // grab the player object
  if (player === null) {
    player = document.getElementById(playerId);
  }

  if (eventName === 'timeupdate') {  // time information
    if (isNaN(eventObj.currentTime)) {
      // ignore NaN
      return;
    }
    if (eventObj.currentTime === 0) {
      // ignore time zero
      return;
    }

    var currentMediaTime = eventObj.currentTime * 1000;
    var now = new Date().getTime();
    if (originTime === null) {
      originTime = now - currentMediaTime;
    }

    // calculate the media time from originTime
    var projectedMediaTime = now - originTime;
    var mediaTimeDiff = projectedMediaTime - currentMediaTime;
    if (mediaTimeDiff > delayTolerance) {  // the delay exceeds tolerance
      // reload the stream
      player.pause();
      player.play2();
    } else if (mediaTimeDiff < 0) {  // originTime was late
      // update originTime
      originTime = now - currentMediaTime;
    }
    scheduleMediaTimeout();
  } else if (eventName === 'play') {  // play has begun
    cancelMediaTimeout();
    // reset originTime
    originTime = null;
  }
 }

 // cancel the media timeout
 function cancelMediaTimeout() {
  if (timeoutTimer !== null) {
    clearTimeout(timeoutTimer);
  }
 }

 // schedule the media timeout
 function scheduleMediaTimeout() {
  cancelMediaTimeout();
  timeoutTimer = setTimeout(onMediaTimeout, mediaTimeout);
 }

 // called when the media has timed out
 function onMediaTimeout() {
  if (player.getState() === 'paused') {  // player is paused
    return;
  }

  // reload the stream
  player.pause();
  player.play2();
 }

 swfobject.embedSWF('StrobeMediaPlayback.swf', 'StrobeMediaPlayback',
                   playerWidth, playerHeight, '10.1.0', 'expressInstall.swf', parameters,
                   {allowFullScreen: 'true', wmode: 'opaque'},
                   {name: 'StrobeMediaPlayback'});
 </script>

 <div id="StrobeMediaPlayback">
  <!-- fallback for devices without Flash is HLS streaming -->
  <video src="http://YOUR_HOST/hls/index.m3u8" width="480" height="360" autoplay controls></video>
 </div>
 </body>
 </html>
	<!doctype html>
	<head>
	<title>Live streaming with Strobe Media Playback</title>
	<meta charset=utf-8>
	<meta name=viewport content="width=device-width, user-scalable=no">
	</head>
	<body>

	<script src="lib/swfobject.js"></script>
	<script src="lib/ParsedQueryString.js"></script>
	<script>

	var playerWidth = 480;
	var playerHeight = 360;

	// maximum allowed delay of live streaming
	var delayTolerance = 1000; // milliseconds

	// reconnect when the client doesn't receive any frame for this milliseconds
	var mediaTimeout = 2000; // milliseconds

	var parameters = {
	src: 'rtmp://YOUR_HOST/live/mystream',
	width: playerWidth,
	height: playerHeight,
	autoPlay: true, // start playing the media after page load
	initialBufferTime : 0, // buffer to fill before play begins
	expandedBufferTime : delayTolerance / 1000, // maximum buffer size
	minContinuousPlayback : 0, // minimum playback time without pausing
	liveBufferTime: 0, // buffer time for live content
	streamType: 'live',
	scaleMode: 'none', // don't scale the video width and height
	verbose: true, // display detailed error messages for debugging
	javascriptCallbackFunction: onPlayerEvent
	};

	var originTime = null; // system time for the media time zero
	var timeoutTimer = null; // timeout id
	var player = null; // Strobe Media Player object (element)

	// called when a player event happened
	function onPlayerEvent(playerId, eventName, eventObj) {
	// grab the player object
	if (player === null) {
	player = document.getElementById(playerId);
	}

	if (eventName === 'timeupdate') { // time information
	if (isNaN(eventObj.currentTime)) {
	// ignore NaN
	return;
	}
	if (eventObj.currentTime === 0) {
	// ignore time zero
	return;
	}

	var currentMediaTime = eventObj.currentTime * 1000;
	var now = new Date().getTime();
	if (originTime === null) {
	originTime = now - currentMediaTime;
	}

	// calculate the media time from originTime
	var projectedMediaTime = now - originTime;
	var mediaTimeDiff = projectedMediaTime - currentMediaTime;
	if (mediaTimeDiff > delayTolerance) { // the delay exceeds tolerance
	// reload the stream
	player.pause();
	player.play2();
	} else if (mediaTimeDiff < 0) { // originTime was late
	// update originTime
	originTime = now - currentMediaTime;
	}
	scheduleMediaTimeout();
	} else if (eventName === 'play') { // play has begun
	cancelMediaTimeout();
	// reset originTime
	originTime = null;
	}
	}

	// cancel the media timeout
	function cancelMediaTimeout() {
	if (timeoutTimer !== null) {
	clearTimeout(timeoutTimer);
	}
	}

	// schedule the media timeout
	function scheduleMediaTimeout() {
	cancelMediaTimeout();
	timeoutTimer = setTimeout(onMediaTimeout, mediaTimeout);
	}

	// called when the media has timed out
	function onMediaTimeout() {
	if (player.getState() === 'paused') { // player is paused
	return;
	}

	// reload the stream
	player.pause();
	player.play2();
	}

	swfobject.embedSWF('StrobeMediaPlayback.swf', 'StrobeMediaPlayback',
	playerWidth, playerHeight, '10.1.0', 'expressInstall.swf', parameters,
	{allowFullScreen: 'true', wmode: 'opaque'},
	{name: 'StrobeMediaPlayback'});
	</script>

	<div id="StrobeMediaPlayback">
	<!-- fallback for devices without Flash is HLS streaming -->
	<video src="http://YOUR_HOST/hls/index.m3u8" width="480" height="360" autoplay controls></video>
	</div>
	</body>
	</html>