`
陈修恒
  • 浏览: 204905 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

flowplayer 播放视频, 自动调整上下左右黑边大小

阅读更多

<!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>

  • 大小: 32.4 KB
分享到:
评论

相关推荐

    使用flowplayer播放视频录像

    在"使用flowplayer播放视频录像"这个主题中,我们将探讨如何利用Flowplayer实现视频录像的播放功能。首先,我们需要了解Flowplayer的基本结构和配置选项。Flowplayer的核心是HTML5 `&lt;video&gt;` 元素,通过JavaScript ...

    flowplayer 视频播放

    总的来说,Flowplayer是一款强大且灵活的视频播放解决方案,它不仅提供了基础的播放、暂停等功能,还通过API和插件系统让开发者能够构建高度定制化的视频体验。对于希望在网页上提供高质量视频服务的网站来说,...

    流媒体播放之flowplayer播放

    Flowplayer是一款广泛使用的开源JavaScript视频播放器,它允许开发者在网页上轻松集成视频播放功能。这个压缩包可能包含了Flowplayer的源代码、配置文件、示例或者相关文档,便于我们了解和定制播放器。 Flowplayer...

    flowplayer 页面加载视频

    "Flowplayer 页面加载视频"这个主题主要关注如何使用Flowplayer在网页中加载和播放视频内容。以下是对这个主题的详细阐述: 1. **Flowplayer基本结构**: Flowplayer基于JavaScript和Flash技术,提供了一个轻量级...

    最新flowplayer网络视频播放器源码

    此最新版本的Flowplayer源码包含了实现高效、流畅视频播放的关键技术,为开发者提供了自定义和扩展播放器功能的广阔空间。 Flowplayer的主要特点包括: 1. **跨平台兼容性**:Flowplayer能够无缝地在各种浏览器和...

    flowplayer3.2.8(去水印).zip

    Flowplayer是一款知名的开源JavaScript视频播放器,用于在网页上嵌入和播放视频内容。这个"flowplayer3.2.8(去水印).zip"压缩包包含的是Flowplayer的3.2.8版本,该版本已经去除了默认的LOGO和水印,适合那些希望在...

    Flowplayer简单酷炫的视频播放器

    8. **自适应流媒体**:自动检测用户的网络状况,选择最合适的视频质量,确保流畅播放。 9. **视频统计**:集成分析工具,可以收集关于视频播放的数据,帮助优化内容策略。 10. **移动端优化**:Flowplayer也支持...

    flowplayer免费的网页视频播放器

    3. **自定义配置**:Flowplayer允许开发者通过JavaScript API进行深度定制,比如改变播放器外观、添加控制按钮、调整播放参数等。开发者可以根据自身需求定制播放器界面,使其与网站设计完美融合。 4. **扩展功能**...

    Flowplayer视频播放插件

    总的来说,Flowplayer是一款优秀的视频播放解决方案,它提供了丰富的API和定制选项,让开发者能够轻松创建个性化的视频体验,同时通过流媒体技术支持高效的视频播放。对于希望提升网站视频功能的开发者来说,...

    flowplayer

    开发者可以通过修改这个文件来定制他们的视频播放界面,如设置播放器大小、视频源、控制条样式等。 2. **flowplayer.js** 和 **flowplayer.min.js** - 这两个文件分别是Flowplayer的完整版本和压缩版本的JavaScript...

    flowplayer-3.2.18视频播放器demo

    3. **播放控制**:Flowplayer提供了丰富的API接口,允许开发者控制视频的播放、暂停、停止、快进、快退等功能,以及调整音量和视频质量。这些功能使得交互体验更灵活。 4. **广告集成**:Flowplayer支持预加载、...

    播放器flowplayer

    Flowplayer能够自动检测用户浏览器的特性,选择使用HTML5视频标签或Flash插件来播放视频。HTML5模式下,Flowplayer支持MP4、WebM和Ogg等常见视频格式。在Flash模式下,Flowplayer可以处理FLV和MP4等格式,确保在旧...

    flowplayer-web播放器,支持流媒体,flv

    Flowplayer是一款广泛应用于Web端的开源视频播放器,它支持流媒体技术和FLV格式的视频播放。这款播放器以其灵活性、可定制性和丰富的功能而受到开发者们的青睐。在提供的文件列表中,我们可以看到构建和运行...

    网页视频播放器 flowplayer 5.4.0

    3. **JavaScript API**:flowplayer.js 和 flowplayer.min.js 文件提供了JavaScript接口,允许开发者通过编程方式控制播放器的行为,如播放、暂停、快进、快退、调整音量、切换质量等。这为自定义交互和实现复杂功能...

    flowplayer-3.2.8.

    2. **视频格式支持**:Flowplayer支持H.264编码的MP4视频格式,这是Web上最常用的视频编码标准,具有高画质和较低的文件大小。同时,它也支持FLV格式,这是一种早期的流媒体格式,适用于那些不支持H.264的旧版浏览器...

    flowplayer-3.2.12.zip

    FlowPlayer还支持自定义皮肤和插件,允许开发者根据品牌风格调整播放器的视觉效果,或者扩展其功能,如添加广告、水印、播放列表等。此外,它还提供了事件监听机制,可以通过JavaScript API监听播放状态变化,以便...

    flowplayer 使用

    Flowplayer是一款广泛应用于网页视频播放的开源JavaScript播放器。它支持HTML5和Flash技术,能够无缝切换,确保在各种浏览器和设备上都能提供流畅的视频体验。Flowplayer以其易用性、灵活性和丰富的自定义选项而受到...

Global site tag (gtag.js) - Google Analytics