flowplayer 播放视频，自动调整上下左右黑边大小-CSDN博客



<!doctype html>
<html>
<head>

    <title>Basic pseudo-streaming : Flowplayer</title>


    <link rel="shortcut icon" href="http://flash.flowplayer.org/favicon.ico">
    <!-- standalone page styling. can be removed -->
    <style>

    </style>




    <!-- flowplayer javascript component -->
    <script src="http://releases.flowplayer.org/js/flowplayer-3.2.12.min.js"></script>


    </head>


<body>
    <!-- player container-->
<a href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv"    class="player"
    style="display:block;width:625px;height:200px;"
    id="player">
    </a>
<input type="button" value="animate" onclick="reset()"/>
<div id="log">a</div>
<!-- this script block will install Flowplayer inside previous A tag -->
<script>
function reset() {
	animate(player, {
		bottom : 31
	});
}
var player = flowplayer(
		"player",
		"http://releases.flowplayer.org/swf/flowplayer-3.2.16.swf",
		{
			// this will enable pseudostreaming support
			plugins : {
				pseudo : {
					url : "http://releases.flowplayer.org/swf/flowplayer.pseudostreaming-3.2.12.swf"
				},

				controls : {
					autoHide : {
						fullscreenOnly : true,
						hideDelay : 2000
					},
					height : 30,
					scrubber : true,
					buttonColor : 'rgba(0, 0, 0, 0.9)',
					buttonOverColor : '#000000',
					backgroundGradient : 'medium',
					backgroundColor : '#D7D7D7',

					sliderColor : '#2c2c2c',
					bufferColor : '#606060',
					progressColor : '#056e9f',

					sliderBorder : '1px solid #808080',
					sliderHeight : 20,
					volumeSliderColor : '#FFFFFF',
					volumeBorder : '1px solid #808080',

					timeColor : '#000000',
					durationColor : '#535353',
					tooltips : {
						buttons : true,
						play : '播放',
						fullscreen : '全屏',
						fullscreenExit : '退出全屏',
						pause : '暂停',
						mute : '静音',
						unmute : '取消静音'
					}
				}
			},

			// clip properties
			clip : {
				url : '/flv/flowplayer-700.flv',

				// make this clip use pseudostreaming plugin with "provider" property
				provider : 'pseudo'
			},

			onStart : function(clip) {
				animate(this, {
					bottom : 31
				// 底部 31 像素的进度条
						})
			},
			onFullscreen : function() {
			    // 如果全屏自适应的话，由于 flash 处理的延迟，会造成退出全屏是画面位置不正确
				// 为了保证正确，可以隔大约 1 秒后调用 animate 函数
				/**
				animate(this, {
				    height : screen.height,
				    width : screen.width
				})
				 **/
			},
			onFullscreenExit : function() {
				/**
				    animate(this, {
				        bottom : 31
				    });
				 */
			},
			onBegin : function() {
			}

		});

function animate(player, container) {
	function copy(from, to) {
		for (key in from) {
			to[key] = from[key];
		}
	}

	var clip = player.getClip();
	var defaultContainer = {
		height : clip.height,
		width : clip.width,
		bottom : 0,
		top : 0,
		left : 0,
		right : 0,
		getRatio : function() {
			return (this.height - this.top - this.bottom)
					/ (this.width - this.left - this.right);
		}
	}
	copy(container, defaultContainer);

	var metadata = clip.metaData;
	var layout = {
		height : metadata.height,
		width : metadata.width,
		bottom : 0,
		top : 0,
		left : 0,
		right : 0
	}

	// 视频正确的显示比例
	var layoutRatio = layout.height / layout.width;

	if (layoutRatio > defaultContainer.getRatio()) {
		// 视频画面实际比容器要高，应该在容器左右留出黑边。
		// 原始配置中的上下配置是有效的。
		layout.bottom = defaultContainer.bottom;
		layout.top = defaultContainer.top;
		layout.height = defaultContainer.height - layout.bottom - layout.top;

		layout.width = layout.height / layoutRatio;
		layout.left = defaultContainer.left
				+ (defaultContainer.width - layout.width
						- defaultContainer.left - defaultContainer.right) / 2;
		layout.right = defaultContainer.width - layout.width - layout.left;
	} else {
		// 视频画面实际比容器要宽，应该在容器上下留黑边
		// 原始配置中，左右大小是有效的。
		layout.width = defaultContainer.width - defaultContainer.left
				- defaultContainer.right;
		layout.left = defaultContainer.left;
		layout.right = defaultContainer.right;

		layout.height = layoutRatio * layout.width;
		layout.bottom = defaultContainer.bottom
				+ (defaultContainer.height - layout.height
						- defaultContainer.bottom - defaultContainer.top) / 2;
		layout.top = defaultContainer.height - layout.height - layout.bottom;
	}

	player.getScreen().animate(layout, 1000);
	//**
	 html = "";
	 for(key in layout) {
	 html += key + ":" + layout[key] + ";";
	 }
	 AppBefore("log", html);
	// */
}

function AppBefore(nodeId, str) {
	var node = document.getElementById(nodeId);
	var newNode = CreateNode(str);
	//如果存在双亲结点  
	if (node.parentNode) {
		//insertBefore(newchild,refchild)  说明：newchild(插入的新结点) refchild(将新结点插入到此结点前)  
		node.parentNode.insertBefore(newNode, node);
	}
}

function CreateNode(str) {
	//创建新div  
	var NewDiv = document.createElement("div");
	//对div设置 id属性  
	NewDiv.id = "dd";
	//创建div内加入的内容  
	var NewText = document.createTextNode(str);
	//追加一个新的子结点  
	NewDiv.appendChild(NewText);
	//返回新创建结点数据  
	return NewDiv;
}
</script>


</body>


</html>