欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

首页

flowplayer轮播与遮罩

shiping1 的头像
星期一, 2015-12-07 08:45 — shiping1

 
 分类：

  

[html] view plaincopyprint?
 
  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  4. <title>媒体播放</title>      
  5. <script type="text/javascript" src="<c:url value='/flowplayer/flowplayer-3.2.11.min.js'/>"></script>  
  6. <script type="text/javascript">  
  7. var obj = new Array();  
  8.     
  9. function playAgain(){  
  10.     var width=$(document).width();      
  11.     var height = $(document).height();     
  12.     obj.push({url:"<c:url value='/flowplayer/cebbank.flv'/>",autoPlay:true});  
  13.     obj.push({url:"<c:url value='/flowplayer/qdh.flv'/>",autoPlay:true});      
  14.       
  15.     $f("player", "<c:url value='/flowplayer/flowplayer-3.2.14.swf'/>", {              
  16.         clip:{  
  17.             autoPlay:true,      
  18.             autoBuffering:true  
  19.         },  
  20.         keyboard: false,      
  21.         playlist: obj,  
  22.         plugins: {  
  23.             controls:{      
  24.                 url:"<c:url value='/flowplayer/flowplayer.controls-3.2.4-dev.swf'/>",  
  25.                 playlist:true,  
  26.                 play:false,  
  27.                 volume:false,  
  28.                 stop:false,  
  29.                 fullscreen:false,  
  30.                 time:true,  
  31.                 mute:false  
  32.                 ,  
  33.                 scrubber:false          
  34.             }  
  35.         ,   //添加一个遮罩,该功能根据自身需要添加.  
  36.             //该功能原本只是为了实现屏幕上显示文字,但经修改,一样可以屏蔽播放器的各种点击事件与功能的便捷方式.  
  37.             content:{  
  38.               url: "<c:url value='/flowplayer/flowplayer.content-3.2.8.swf'/>",      
  39.               backgroundColor: '#112233',  
  40.               opacity: 0,  
  41.               backgroundGradient: [0.1, 0.1, 1.0],  
  42.               width:width,  
  43.               height:height,  
  44.               html: '<p></p>'      
  45.             }        
  46.         },      
  47.         onFinish:function(){  
  48.             //实现轮播,如果当前视频索引是最后一个,则调用该方法本身,重新加载列表与播放器  
  49.             if($f().getClip().index == obj.length-1){  
  50.                 playAgain();  
  51.             }      
  52.         }  
  53.     });    
  54. }  
  55.   
  56. </script>  
  57. </head>  
  58. <body class="body_all" onload="playAgain()">        
  59.     <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">  
  60.     <tr>  
  61.     <td>  
  62.         <div id="player" style="width:100%;height: 100%;z-index: 0;">                     
  63.         </div>      
  64.     </td>  
  65.     </tr>  
  66.     </table>  
  67.       
  68.       
  69. </body>  
  70. </html>  
  71.  
来自 http://blog.csdn.net/javaloverkehui/article/details/8593763
普通分类: 
其它
Powered by Drupal

友情链接

校园好文网

 www.shipingzhong.cn  个人技术网_前端_后台    备案号:苏ICP备18010659号-2