首页>>焦点图>>jQuery带视频播器放功能焦点图轮播特效(2019-04-29)

jQuery带视频播器放功能焦点图轮播特效

同时支持视频和图片的焦点图，本例用到了flash

jQuery带视频播器放功能焦点图轮播特效
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <center>  
  2.   <div class="royalSlider rsMinW">  
  3.     <div class="rsContent"> <a class="rsImg" data-rsVideo="movies/jgpearslogo.mp4" href="images/afsdf.jpg"></a> </div>  
  4.     <div class="rsContent"> <a class="rsImg" data-rsVideo="movies/jgpearslogo.mp4" href="images/asdf1235.jpg"></a> </div>  
  5.     <div class="rsContent"> <img src="images/fff.png" /> </div>  
  6.   </div>  
  7. </center>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2.   var slider = $('.royalSlider').royalSlider({  
  3.     // options...  
  4.             keyboardNavEnabled: true,  
  5.             navigateByClick: false,  
  6.             sliderDrag: false,  
  7.       imageScaleMode: 'fill'  
  8. }).data('royalSlider');  
  9.      
  10.                             
  11.    slider.ev.on('rsOnCreateVideoElement', function(e, url)   
  12.     {      
  13.         // url - path to video from data-rsVideo attribute  
  14.         // slider.videoObj - jQuery object that holds video HTML code  
  15.         // slider.videoObj must be IFRAME, VIDEO or EMBED element, or have class rsVideoObj  
  16.         slider.videoObj = $('<div id="mediaplayer" class="rsVideoObj">Loading the player ...</div>');  
  17.       setTimeout(function() {  
  18.         jwplayer('mediaplayer').setup({  
  19.           'flashplayer': 'jwplayer/player.swf',  
  20.           'id': 'playerID',  
  21.           'width': '100%',  
  22.           'height': '100%',  
  23.           "autoplay": true,  
  24.           'file': url,  
  25.           'viral.onpause': false,  
  26.           'controlbar.idlehide':true,  
  27.           'stretching': 'exactfit',      
  28.         });    
  29.       }, 50);  
  30. });  
  31. </script>  

 


原文地址:http://www.freejs.net/article_jiaodiantu_753.html