Adding a Custom Watermark to Player V4

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?