flowplayer 播放视频, 自动调整上下左右黑边大小
2014-03-13 19:20
561 查看
<!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>
相关文章推荐
- 一个视频播放第三方(JCvideoPlayer)以及部分调整
- JS 实现网页视频播放: vcastr22 、 flowplayer 、 jwplayer
- moodle 3.0 videoeasy flowplayer poodll 视频插入 播放
- [开发笔记]-flowplayer视频播放插件
- 如何让windows media player 自动播放视频文件
- css图片自动绽放大小,左右,上下居中
- 新版网络学堂播放视频升级,使用Flowplayer插件, 一款免费的WEB视频播放器
- 使用flowplayer给网站添加视频播放功能
- RTMP与Flowplayer实现web页面视频流播放功能
- 使用 flowplayer 播放视频
- 用FlowPlayer播放flv、mp4等视频文件
- [开发笔记]-flowplayer视频播放插件
- flowplayer视频播放插件
- web视频播放空间 flowplayer-3.2.16
- 将ueditor上传的视频转换为flowplayer播放,并隐藏其播放地址
- 使用php文件读取视频stream并用flowplayer播放
- 【转】flowplayer视频播放插件
- 自动播放,鼠标触发排序切换JS焦点轮播图(不带左右箭头切换)
- collectionView代理方法快速设置cell大小上下左右间隔
- 背景图可以随时自动调整大小jquery插件backstretch