flowplayer的设置

最新推荐文章于 2025-06-23 15:28:44 发布

黄昏之歌

最新推荐文章于 2025-06-23 15:28:44 发布

阅读量4.9k

点赞数 1

分类专栏： java

java 专栏收录该内容

145 篇文章

订阅专栏

本文介绍如何使用Flowplayer实现伪流式播放，并展示了详细的配置参数与自定义控制栏样式。通过JavaScript动态调整播放器布局以适应不同屏幕尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html>
<head>
<title>Basic pseudo-streaming : Flowplayer</title>
<link rel="shortcut icon" href="http://flash.flowplayer.org/favicon.ico">
<style>
</style>
<script src="http://releases.flowplayer.org/js/flowplayer-3.2.12.min.js"></script>
</head>
<body>
<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>
<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 layoutlayoutRatio = layout.height / layout.width;
if (layoutRatio > defaultContainer.getRatio()) {
// 视频画面实际比容器要高，应该在容器左右留出黑边。
// 原始配置中的上下配置是有效的。
layout.bottom = defaultContainer.bottom;
layout.top = defaultContainer.top;
layout.height = defaultContainer.height - layout.bottom - layout.top;
layoutlayout.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>