2015-12-18 45 views
0

有沒有人知道如何將kaltura視頻播放器與自定義視頻網址一起嵌入? 它應該是這個樣子:Kaltura視頻播放器提供了VAST pre和postroll廣告和自定義視頻網址,但不適用於DoubleClick

<script> 
    var $ = jQuery; 
</script> 
<!-- Substitute {partner_id} for your Kaltura partner id, {uiconf_id} for uiconf player id --> 
<script src="//OUR_LOCAL_SERVER/p/101/sp/10100/embedIframeJs/uiconf_id/23448200/partner_id/101"></script> 

<div class="kaltura-player-wrap"> 
    <!-- inner pusher div defines aspect ratio: in this case 16:9 ~ 56.25% --> 
    <div id="dummy" style="margin-top: 56.25%;"></div> 
    <!-- the player embed target, set to take up available absolute space -->  
    <div id="videoPlayer" itemprop="video" intemscope itemtype="http://schema.org/VideoObject"></div> 
</div> 

<script> 
(function($) { 

var enableAds = true; 
var enablePreroll = true; 
var enableMidroll = false; //not implemented yet since kaltura doesn't really support it 
var enablePostroll = false; 

var adlimit = 2; 

dbug = true; 
var flashvars = {}; 
var adlock = 0;  
var faillock = 0; 

var adtimeout = 20000; 
var playlist = sfp.nextVideo !== undefined; 

var mediaProxy = { 
    'entry': { 
     "thumbnailUrl": sfp.thumbnail, 
     "name": sfp.title, 
     "description": "The+Mediterranean+diet+has+long+been+promoted+as+a+heart+healthy+way+of+eating.+But%2C+for+women%2C+ther", 
     "duration": sfp.duration 
    }, 
    'sources': [{ 
     "src": "http://v1.SOME_SITE.com/822ece3c-52f0-4daa-b2da-7ebf1c0ba354.ogg", 
     "type": "video/ogg;" 
    }, { 
     "src": "http://v1.SOME_SITE.com/822ece3c-52f0-4daa-b2da-7ebf1c0ba354.webm", 
     "width": "624", 
     "height": "352", 
     "bandwidth": "740352", 
     "type": "video/webm; codecs='vp8, vorbis'", 
    }, { 
     "src": "http://v1.SOME_SITE.com/822ece3c-52f0-4daa-b2da-7ebf1c0ba354.mp4", 
     "width": "640", 
     "height": "360", 
     "bandwidth": "1101824", 
     "type": "video/mp4; codecs='avc1.42E01E, mp4a.40.2'", 
    }] 
} 



/* 
Append pre or post roll ad parameters to the flashvars.vast object 
obj: has to be the flashvars.vast object 
uri: the ad tag url, parsed from the XML response 
*/ 
function appendAdsVAST(obj,uri){ 

    if(enablePreroll){ 

     var temp = { 
      "prerollUrl" : uri, 
      "prerollUrlJs" : uri, //enable support for mobile ads 
      "numPreroll" : "1", 
      "prerollStartWith" : "1", 
      "prerollInterval" : "1", 
      "preSequence" : "1", 
     } 

    }else if(enablePostroll){ 

     var temp = { 
      "postrollUrl" : uri, 
      "postrollUrlJs" : uri, //enable support for mobile ads 
      "numPostroll" : "1", 
      "postrollStartWith" : "1", 
      "postrollInterval" : "1", 
      "postSequence" : "1", 
     } 
    } 
    for(var val in temp) 
     obj[val] = temp[val]; 

    return obj; 
} 

/* 
To be reworked 
uri-link to the ad to be passed into optimatic 
type - optimatic 
     yumenetworks 
     bnmla   
     doubleclick 
*/ 
function buildVideoPlayer(uri, type) { 

    //overload to default ad type - doubleclick 
    if(type==null || type===undefined || type==false) 
     type = "doubleclick"; 

    if (type=="bnmla") { 

     flashvars = { 

      "vast": { 
       "plugin" : true, 
       "position" : "before", 
       "timeout" : "30", 
       "relativeTo" : "PlayerHolder", 
      }, 
      "skipBtn": { 
       "skipOffset" : "5", 
       "label" : "Skip Ad" 
      }, 

      "adsOnReplay" : true, 
      "inlineScript" : false, 
      "ForceFlashOnDesktopSafari" : false, 
     } 

     flashvars.vast = appendAdsVAST(flashvars.vast,uri); 
     flashvars.noticeMessage = {}; 

    } else if (type=="yumenetworks" || type=="optimatic") { 

     /* 
     VAST DoubleClick Ad and Companion 
     Link: http://player.kaltura.com/docs/kvast 
     */ 
     flashvars = { 

      "vast": { 
       "plugin" : true, 
       "position" : "before", 
       "timeout" : "30", 
       "relativeTo" : "PlayerHolder", 
      }, 
      "skipBtn": { 
       "skipOffset" : "5", 
       "label" : "Skip Ad" 
      }, 

      "adsOnReplay" : true, 
      "inlineScript" : false, 
      "ForceFlashOnDesktopSafari" : false, 
     } 

     flashvars.vast = appendAdsVAST(flashvars.vast,uri); 

     // mobile already defines time remaining until ad finishes, so no need to specify it again 
     // if(!kWidget.isMobileDevice()) 
     // flashvars.noticeMessage = { 
     //  "plugin" : true, 
     //  "position" : "before", 
     //  "text" : "Time remaining {sequenceProxy.timeRemaining|timeFormat}" 
     // } 

     // disable any message overlays on the ad 
     flashvars.noticeMessage = {}; 

    } else if(false){ //disbale doubleclick for now 
     /* 
     DoubleClick for the DFP plugin 
     http://player.kaltura.com/docs/DoubleClick 
     */ 


     flashvars = { 
      /* 
      * Doubleclick not working with mediaproxy, use generic vast instead 
      */ 
      "doubleClick": { 
       "plugin": true, 
       "path": "http://cdnbakmi.kaltura.com/content/uiconf/ps/veria/kdp3.9.1/plugins/doubleclickPlugin.swf", 
       "adTagUrl": uri, 
       "leadWithFlash": true, 
       "disableCompanionAds": true, 
      }, 


      // "vast": { 
      // "prerollUrl": uri, 
      // "numPreroll": "1", 
      // "prerollStartWith": "1", 
      // "prerollInterval": "1", 
      // "postSequence": "1", 
      // "timeout": "4", 
      // "storeSession": false, 
      // }, 
     } 


    }else{ 

     /* 
     Generic VAST for other providers 
     */ 
     flashvars = { 

      "vast": { 
       "plugin" : true, 
       "position" : "before", 
       "timeout" : "30", 
       "relativeTo" : "PlayerHolder", 
      }, 
      "skipBtn": { 
       "skipOffset" : "5", 
       "label" : "Skip Ad" 
      }, 

      "adsOnReplay" : true, 
      "inlineScript" : false, 
      "ForceFlashOnDesktopSafari" : false, 
     } 

     flashvars.vast = appendAdsVAST(flashvars.vast,uri); 
    } 

    /* 
    For now diable ads on mobile, unless the type is optimatic, which does work now 
    Kaltura's Tremor, Adap.tv, YuMe, and FreeWheel plugins are not currently HTML5-compatible. 
    */ 
    if (kWidget.isMobileDevice() && type!="optimatic"){ 
     flashvars = {}; 
     dbug && console.log("Ads disabled on mobile, unless it's optimatic. Disabling ads"); 
    } 

    /* 
    Ad response is empty, dont load any ads 
    */ 
    if(uri==""){ 
     flashvars = {}; 
     dbug && console.log("Ads link empty. Disabling ads"); 
    } 

    /* 
    Erase left bottom corner watermark on the video 
    */ 
    flashvars.watermark = { 
     plugin: false 
    } 
    // flashvars.skipBtn = { 
    // "skipOffset": "1", 
    // "label": "Skip Ad" 
    // } 

    /* 
    * ads seem to have their own timers 
    */ 
    // flashvars.noticeMessage = { 
    //  "text": "Advertisment {sequenceProxy.timeRemaining|timeFormat}" 
    // } 

    flashvars.forceMobileHTML5 = true; 
    /* 
    Set up custom video sources 
    */ 
    mediaProxy.preferedFlavorBR = -1; 
    flashvars.mediaProxy = mediaProxy; 


    /* 
    Enable hover controls 
    */   
    flashvars.controlBarContainer = { 
     "plugin" : true, 
     "hover" : true 
    } 

    /* 
    Disable autoplay on mobile only 
    */ 
    flashvars.autoPlay = !kWidget.isMobileDevice(); 

    /* 
    Enable debugging when needed, 
    send cross domain headers to prevent console warnings, 
    prevent ads form playing after video starts from beginning 
    */ 
    flashvars.adsOnReplay = true; 
    flashvars.enableCORS = true; 
    flashvars.debugMode = false; 
    flashvars.debugLevel = 0; 
    flashvars.autoMute = false; 

    kWidget.embed({ 

     'targetId': 'videoPlayer', 
     'wid': '_101', 
     'uiconf_id': '23448200', 

     'KalturaSupport.LeadWithHTML5':true, 
     'EmbedPlayer.NativeControls':true, 
     'EmbedPlayer.CodecPreference' : 'webm', 

     'flashvars': flashvars, 
     'readyCallback': function(playerId) { 

      //initiate click events for the next video on the playlist page 
      if(playlist) 
       initiateNextVideo(playerId); 

      //initiate click events for the dropdown on the playlist page 
      if(playlist) 
       initiatePlaylistDropdown(playerId); 

      var kdp = $('#' + playerId).get(0); 

      /* 
      Force autoplay in case of an error on page 
      Only if it is a preroll ad 
      */ 
      if(!kWidget.isMobileDevice() && enablePreroll) 
       kdp.sendNotification("doPlay"); 

      /* 
      Ad error events catches 
      Ads will be skipped automatically on this event, but need to disable the timeout 
      function [faillock] from rebuilding the player. 
      */ 
      kdp.kBind('adErrorEvent', function(qPoint){ 

       dbug && console.log("\n\n\n\nadErrorEvent\n\n\n\n"); 
       faillock = 0; 
       // rebuildPlayerWithoutAds(playerId); 
      }); 
      kdp.kBind('adLoadError', function(qPoint){ 

       dbug && console.log("\n\n\n\adLoadError\n\n\n\n"); 
       faillock = 0; 
       rebuildPlayerWithoutAds(playerId); 
      }); 
      kdp.kBind('mediaError', function(qPoint){ 

       dbug && console.log("\n\n\nmediaError\n\n\n"); 
      }); 
      kdp.kBind('entryFailed', function(qPoint){ 

       dbug && console.log("\n\n\nentryFailed\n\n\n"); 
      }); 

      /* 
      Safeguard against failure - skip to the video if ads fail to play 
      Enable ad lock check if the ad did start. Wait for it to start playing for 10 
      seconds and skip it if it doesn't start in this time (since it probably failed to load) 
      */ 
      if(!kWidget.isMobileDevice() || type=="optimatic") 
       kdp.kBind('adStart', function(qPoint){ 

        dbug && console.log("\n\n\nAd started buffering"); 

        adlimit -= 1; 

        faillock = 1; 
        setTimeout(function(){ 

        if(faillock==1){ 

         dbug && console.log("Ad failed, skipping"); 


         // in case if it is a postroll ad and a playlist page, we skip to the next 
         // video and hope that this time the ad plays. 
         // else reload the video with no ads 
         if(playlist && enablePostroll){ 
         rebuildNextVideoElement(); 
         rebuildCurrentVideoElement(); 
         rebuildPlayer(playerId); 
         }else 
         rebuildPlayerWithoutAds(playerId); 
        } 

        },adtimeout); 
       }); 


      // enable ad lock check if the ad did start 
      if(!kWidget.isMobileDevice() || type=="optimatic") 
       kdp.kBind('onAdPlay', function(start){ 

        dbug && console.log("Ad started playing"); 
        //disable timeout that will rebuild the video player 
        faillock = 0; 
       }); 


      // fire when ad is finished playing 
      if(enablePreroll) 
       kdp.kBind('adEnd', function(qPoint){ 

        adlock += 1; 
        dbug && console.log("Ad ended. Initiating playlist dropdown."); 

       }); 

      /* 
      Since kaltura doesnt have a way to distinuish between 
      the start of a video or an ad, we need a workaround with counters. ALso 
      we need to have 2 ways of distinuishing video/ad start end events, 
      for pre and post roll ads. 
      */ 
      kdp.kBind('playbackComplete', function(eventData) { 

       if(playlist && enablePreroll){ 

        //ad finished playing, and then the video 
        if(adlock==3){ 
        dbug && console.log("Ad and video finished. Rebuilding player"); 

        adlock = 0; 

        //update current video element 
        rebuildCurrentVideoElement(); 
        rebuildNextVideoElement(); 
        rebuildPlayer(playerId); 
        return; 

        //there was no ad on this page, so only the video played 
        }else if(adlock==0){ 
        dbug && console.log("Video finished. Rebuilding player"); 

        adlock = 0; 

        //update current video element 
        rebuildNextVideoElement(); 
        rebuildCurrentVideoElement(); 
        rebuildPlayer(playerId); 
        return; 

        //the ad finished 
        }else if(adlock==1){ 

        dbug && console.log("Ad finished."); 
        } 

        adlock += 2; 

       }else if(playlist && enablePostroll){ 


        adlock += 2; 

        //ad finished playing, and then the video 
        if(adlock==3){ 
        dbug && console.log("Ad ad video finished. Rebuilding player"); 

        adlock = 0; 

        //update current video element 
        rebuildCurrentVideoElement(); 
        rebuildNextVideoElement(); 
        rebuildPlayer(playerId); 
        return; 

        //there was no ad on this page, so only the video played 
        }else if(adlock==2){ 
        dbug && console.log("Video finished. Rebuilding player"); 

        // only rebuild the video if we reached the ad limit because 
        // in this case noa ds will be loaded after the video, which 
        // will prevent it from catching the ad end event and reloading the player 

        adlock = 0; 

        //update current video element 
        rebuildNextVideoElement(); 
        rebuildCurrentVideoElement(); 
        rebuildPlayer(playerId); 
        return; 
        } 
       } 

      }); 

      // fire when ad starts playing 
      if(enablePostroll) 
       kdp.kBind('adEnd', function(qPoint){ 

        adlock += 1; 
       }); 

     } 
    }); 

    // delete the video element from DOM and reinitiate later because it 
    // looked like it made the ads break less often 
    kWidget.destroy("videoPlayer"); 

    /* 
    We have reached the max number of times we can display an ad 
    */ 
    if(adlimit <= 0){ 
     flashvars.vast = {}; 
     dbug && console.log("Ads play count reached their limit. Disabling ads"); 
    } 

    // reinitiate kWIdget video player with new settings 
    kWidget.embed({ 
     'targetId': "videoPlayer", 
     'wid': '_101', 
     'uiconf_id': '23448200', 

     'flashvars': flashvars, 
    }); 
} 



/* 
Sort ad types so that the least broken ones are served first 
*/ 
function sortAdTypes(data){ 

    $xml = $(data); 
    var types = {}; 

    $xml.find("VASTAdTagURI").each(function(){ 

     var link = $(this).text(); 
     var url = $.getQuery(link,"pageURL"); 

     var isOptimatic = link.indexOf("optimatic.com") != -1; 
     var isYume = link.indexOf("yumenetworks.com") != -1; 
     var isBNMLA = link.indexOf("bnmlaX.com") != -1 || link.indexOf("bnmla.com") != -1; 

     if(isYume) 
     types.yumenetworks = link; 
     else if(isBNMLA) 
     types.bnmla = link; 
     else if(isOptimatic && url != 0 && url != "[INSERT_PAGE_URL]") 
     types.optimatic = link; 
     else 
     types.other = link; 
    }); 

    return types; 
} 

/* 
Get the least broken ad type from the sorted at types 
types: array of ad links 
*/ 
function selectAdType(types){ 

    if(types==null) 
    return false; 

    return types.yumenetworks ? "yumenetworks" : 
      types.bnmla ? "bnmla" : 
      types.optimatic ? "optimatic" : 
      types.other ? "other" : 
      false; 
} 

/* 
Get the least broken ad link from the sorted at types 
types: array of ad links 
*/ 
function selectAdLink(types){ 

    if(types==null) 
    return false; 

    return types.yumenetworks ? types.yumenetworks : 
      types.bnmla ? types.bnmla : 
      types.optimatic ? types.optimatic : 
      types.other ? types.other : 
      false; 
} 


$.ajax({ 
    type: "GET", 
    dataType: "XML", 
    url: 'http://pubads.g.doubleclick.net/gampad/ads?sz=560x315&iu=/14312752/FlashPreRoll&impl=s&gdfp_req=1&env=vp&output=xml_vast2&unviewed_position_start=1&url=http%3A%2F%2Fwww.SOME_SITE.com%2Fnews-article%2Fmediterranean-diet-high-olive-oil-linked-breast-cancer-risk-reduction&correlator=1453083948&description_url=http%253A%252F%252Fwww.SOME_SITE.com%252Fnews-article%252Fmediterranean-diet-high-olive-oil-linked-breast-cancer-risk-reduction&cust_params=PR_URL%3Db4cc6582-c9c1-4a70-9d42-be2e1a49889d%26PR_PageTyp%3Dnews_story%26Gender%3DFemale%26PR_Age%3DSeniors%26PR_Cndtns%3DObesity%2CBreast+Cancer+Female%2CCancer%2CCard' + decodeURIComponent(utcParams), 
    success: function(data) { 

     var types = sortAdTypes(data); 
     var type = selectAdType(types); 
     var link = selectAdLink(types); 

     dbug && console.log("Ad link: "+link); 
     dbug && console.log("Ad type: "+type); 

     // skip ads if there are no ads in the XML response 
     if(link==false) 
      buildVideoPlayer(); 
     else 
      buildVideoPlayer(link, type); 
    }, 
    error: function(MLHttpRequest, textStatus, errorThrown) { 

     dbug && console.log(errorThrown); 
    } 
}); 

})(jQuery); 
</script> 

這將取決於你如何設置的全局變量,創建自定義視頻URL的球員,要麼表現出前或後貼片廣告(移動過,如果廣告提供商支持它)。我們託管我們自己的kaltura服務器。

還有一些額外的功能可以讓播放列表與廣告,按鈕跳過視頻,以及在廣告失敗的情況下發生超時,以便播放器在播放視頻前不會停頓30秒(因爲Kaltura無法播放以捕捉這個特定的錯誤)。

它的工作方式:我對aaax調用pubads.com,從那裏解析AdVastTag,並確定廣告提供商以決定稍後設置什麼參數。它適用於所有提供VAST和VPAID廣告的廣告服務器,也適用於支持該廣告的提供商的移動廣告。無法使用DoubleClick廣告顯示我們的視頻。關於Kaltura的例子確實有用,但他們將視頻傳給了帶有KMS ID的播放器(他們將視頻上傳到他們的管理系統),但我們希望將視頻作爲URL傳遞,而不是ID。

好像很多人都遇到過這個問題,我聽到有人說你需要修改後端才能讓Kaltura玩雙擊自定義網址。找出一個讓大家都能看到的解決方案將是一件好事。

它應該工作的方式是(理想情況下)將自定義視頻網址傳遞到mediaProxy並將雙擊廣告標記傳遞到flashvars。 此部分設置doubleClick廣告網址。

"doubleClick": { 
       "plugin": true, 
       "path": "http://cdnbakmi.kaltura.com/content/uiconf/ps/veria/kdp3.9.1/plugins/doubleclickPlugin.swf", 
       "adTagUrl": uri, 
       "leadWithFlash": true, 
       "disableCompanionAds": true, 
      }, 

有沒有人得到這個工作?任何幫助/建議非常感謝。

回答

0

事實證明,Kaltura不支持DoubleClick和自定義視頻網址。但是有一種解決方法 - 爲您的廣告使用通用VAST插件,並且它將與mediaProxy一起適用於大多數廣告提供商。

請記住,通用插件不支持瀑布廣告(這是一個提供呼叫另一個提供商誰調用另一個誰最終給我們的XML到廣告Flash/HTML5/MP4文件)的瀑布廣告。爲了解決這個問題,我建議你拿出一個嵌套廣告提供商列表,然後在每個ajax調用pubads.com服務器,查看XML並獲得adTagUrl。如果此元素存在,遞歸地轉到該URL並重復該過程,直到它不再存在。在到達廣告文件之前,請保留之前adTagUrl的變量 - 這是adTagUrl,它將進入通用VAST preRollUrl/postRollUrl參數。除此之外,一些提供商(如optimatic)會因爲Kaltura不支持的錯誤而破壞玩家 - 在這種情況下,廣告和玩家將會分手。發生這種情況時,最好重新加載播放器。

一旦廣告開始緩衝(adStart)並在onAdPlay(在廣告實際開始播放時觸發該廣告)時啓動超時。如果它在12秒內未達到此點,請通過kWidget.embed()呼叫重新加載沒有廣告的播放器。

0

將「'entryId':'url-to-my-video.mp4'」和sourceType移動到根對象,它應該可以工作。

+0

nope不起作用。不與doubleclick –

+0

@SemurNabiev附上完整的嵌入代碼請 – vadimtar

+0

編輯我原來的帖子。感謝您的關注 –

相關問題