Adding a Custom Branding Overlay to Player V4

You can configure branding overlays on stream (formerly known as "watermarks") in Backlot (PUBLISH > Player Branding > Branding), as described in Configuring a Player in Backlot. You can also override Backlot settings (location, transparency, click URL, and scaling) using CSS and skin.json settings, as described below. Images used for branding overlays must be in the PNG, JPG, or JPEG format.
Player V4 supports custom branding overlays on stream, where the image URL is specified in skin.json and inline page parameter configurations. To add a custom branding overlay 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": "//www.ooyala.com/",
      "width": 177,
      "height": 44
    },
    
  2. To add the branding overlay 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 branding overlay 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 branding overlay 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.

해당 내용이 도움 되었습니까?