如何使用JW Player來播放Flash並隱藏控制按鈕和自定義播放完成后執行的JS


在一個客戶項目中播放的flash需要進行定制如不顯示控制按鈕,flash播放完成后執行特定的js等,在用過了N多的JQery插件和播放器后最終JW Player插件可以滿足我的以上要求
因為 JW Player插件是同事發給我(版本:jwplayer6.6不是最新版本),在將控制按鈕隱藏時,根據官網上的參數設置后盡然無效
最終經過摸索才找到原因是官網上的最新版本為6.10版本,而我用的是6.6版本所以不管我怎么配置都是無效的 (部分參數在舊版本不支持)
找到原因就那就簡單了,在官網上下載最新的播放器和js文件(下載需要注冊)后並配置好經測試果然可以完全隱藏控制按鈕,但flash播放器右上方顯示了jwplay的logo和網址,顯然不可能在客戶的項目上顯示其他公司的信息,於是將播放器更改了6.6的版本的版本后完美解決問題,在此記錄希望幫助有需要的朋友,我跟同事兩加一起的大概兩天工作日才搞定
我使用的播放器是 破*后的 6.6的版本,官網免費版本有Logo,不同的版本定價 見官網: http://www.jwplayer.com/pricing/
<!--htl add 2014-10-31-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jwplay6.10使用-隱藏控制按鈕和視頻播放完畢后執行js事件</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script  type="text/javascript" class="library" src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
  <div id="video">
    <div id="sp_box"></div>
  </div>
</body>
  <!-- jwpsrv.com 提供的在線js -->
  <script src="http://jwpsrv.com/library/0cnCVGMOEeSQmA6sC0aurw.js"></script>
  <script type="text/javascript">
   var Player;
  //頁面加載的時候
  $(document).ready(function(){  
        LoadingJwPlayer();
          //視頻開始播放事件
        Player.onPlay(function(){
             console.log("開始播放視頻");
             //設置播放器背景色,默認為黑色,但我們的視頻是白色的背景,這里無法更改,我只能通過更改源碼來解決(jwplayer.js將"#000000"更改為"#ffffff")
             jQuery("#sp_box").css('bgcolor','#ffffff');
        });
        
        //視頻播放完畢事件
        Player.onPlaylistComplete(function(){
            console.log("load complay");
            alert("hello,視頻播放完畢啦!");
        
        });
      });
    //htl edit 2014-11-03加載播放器並設置相關的參數
    //jwplayer文檔地址:http://www.longtailvideo.com/support/open-video-ads/13048/ova-configuration-guide
  function LoadingJwPlayer(){
      Player=jwplayer('sp_box').setup({
          //flash顯示效果,none,fill,exactfit,uniform,默認為uniform有黑色邊框
          //參考:http://support.jwplayer.com/customer/portal/articles/1413113-configuration-options-reference#other
          stretching:'fill',
          autostart: true,//自動播放
          controls:false,//顯示控件按鈕
          // OVA for JW5 only: Turn on playlist control - enables the next/previous controlbar buttons and load the entire playlist into the player in one go.
          allowPlaylistControl:false,
          //OVA for JWx only: Specifies whether or not overlays and ad notices are to be repositioned based on whether or not the control bar shows and hides.
          assessControlBarState:false,
          width: jQuery(document).width(),//視頻寬
          height: jQuery(document).height(),//視頻高
          file: "http://videos-jp.jwpsrv.com/zWLy8Jer/videos/i8oQD9zd-1753142.mp4?77c801d752d5207784c49e7ed80fb953798fae0fcca03ecf79558496a374b6096b35a35d4d31c99192f10fb8e9b9c158204e6312da47541f86c39eb6119edf45a6f6b4a92a2cb9b13f25fdf1928a4e8e1870f2fa05",//要播放的文件
          flashplayer: "/flash/jwplayer.flash6.6.swf"//播放flash的播放器地址,需要替換成你本地的播放器地址
      });       
  }
</script>
</html>

 

 
 
 
 
 
 
 






免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM