Adding a Custom Watermark to Player V4

You can configure watermarks in Backlot (PUBLISH > Player Branding > Branding), as described in Configuring a Player in Backlot. You can also override Backlot settings (watermark location, transparency, click URL, and scaling) using CSS and skin.json settings, as described below. Watermark images must be in the PNG, JPG, or JPEG format.
Player V4 supports custom watermarks, where the image URL is specified in skin.json and inline page parameter configurations. To add a custom watermark in Player V4:
  1. Configure the following values in skin.json, which must be locally hosted to configure your own .PNG file:
    "watermark": {
      "imageResource": {
          "url": "watermark.png",
          "androidResource" : "logo",
          "iosResource" : "logo"
        },
      "clickUrl": "http://www.ooyala.com/",
      "width": 177,
      "height": 44
    },
    
  2. To add the watermark as a new div in the playing screen, you must customize the html5-skin-json file. Follow the setup instructions at https://github.com/ooyala/html5-skin. Once this is complete your sample.html will be running at http://0.0.0.0:4444/.
  3. Add the following code to playingScreen.js, which customizes the appearance of the screen while the asset is playing:
    // Under the required variables, add this line:
    ClassNames = require('classnames') 
    
    // Add this clickthrough handler:
    handleWatermarkClick: function() {
      var watermarkClickUrl = this.props.skinConfig.controlBar.watermark.clickUrl;
      if (watermarkClickUrl) { 
        window.open(watermarkClickUrl,'_blank'); 
      }
    }                        
                        
  4. In the render function, add the following variable to properly add the class to the watermark div and to the click URL configured in skin.json:
     var watermarkClass = ClassNames({ 
       "oo-playeScreen-watermark": true, 
       "oo-non-clickable-watermark": !this.props.skinConfig.controlBar.watermark.clickUrl 
     });                    
                    
  5. Look for this div:
    <div className="oo-state-screen-selectable" 
            onMouseUp={this.handlePlayerMouseUp}
             onTouchEnd={this.handleTouchEnd}
    ></div>                    
                    
    Right after that div, add the new watermark div:
    <div className={watermarkClass}>
    <img src={watermarkUrl} onClick={this.handleWatermarkClick}/></div>                        
                        
  6. After saving, the gulp system should detect the changes and build a new html.skin.js under the build folder.

Was this article helpful?