yahoo-x-bv-player

Package Overview

Dependencies

Maintainers

Versions

Alerts

File Explorer

Advanced tools

License

Install Socket

Detect and block malicious and high-risk dependencies

Install

yahoo-x-bv-player

yahoo-x-bv-player is a video player web component which based on BlendVision Web SDK. It has not only LIVE but also REPLAY features for Yahoo Auction. Sellers could display their products through this player and interact with buyers. We believe this could

1.0.47

latest

Source

npm

Version published: 5 months ago

Weekly downloads: 59

Maintainers: 1

Weekly downloads

Created: last year

Source

yahoo-x-bv-player

<yahoo-x-bv-player />

Basic Usage

<yahoo-x-bv-player /> is a web component. All we need to do is put the required script into your HTML document. Then follow <yahoo-x-bv-player />'s html structure and everything will be all set.

Required Script

<script
  type="module"
  src="https://unpkg.com/yahoo-x-bv-player/mjs/wc-yahoo-x-bv-player.js">        
</script>

Structure

Put <yahoo-x-bv-player /> into HTML document. It will have different functions and looks with attribute mutation.

<yahoo-x-bv-player>
  <script type="application/json">
    {
      "type": "live",
      "playerconfig": {
        "licenseKey": "<your-BlendVision-player-license>",
        "playbackToken": "<playbackToken>",
        "title": "Yahoo Auction",
        "source": [
          {
            "type": "video/mp4",
            "src": "https://your-domain/video-source.mp4"
          }
        ],
        "modulesConfig": {
          "analytics.resourceId": "<live-id>",
          "analytics.resourceType": "RESOURCE_TYPE_LIVE_EVENT"
        }
      },
      "chatroomconfig": {
        "token": "your.BV.chatroom.token",
        "refreshToken": "your.BV.chatroom.refreshToken",
        "host": "https://api.one.blendvision.com"
      },
      "ysocket": {
        "id": "<your-yahoo-web-socket-id>",
        "url": "<your-yahoo-web-socket-url>"
      },
      "share": {
        "title": "Yahoo X BlendVision",
        "text": "This is a Yahoo X BlendVision video player.",
        "url": "https://your-domain/share.html"
      },
      "poster": "https://your-domain/poster.jpg",
      "loop": false,
      "autopilot": false,
      "host": {
        "avatar": "https://your-domain/host-avatar.png",
        "name": "host name",
        "link": "https://your-domain/host",
        "count": 999,
        "announce": "content which host like to announce",
        "follow": false
      },
      "l10n": {
        "previewtrigger": "View",
        "listingshead": "Products",
        "buynow": "BUY NOW",
        "jointhecrowd": "joined the crowd.",
        "rushbuying": "is rush buying.",
        "addfavorite": "added host as favorite.",
        "sharelive": "shared this LIVE.",
        "takesnapshot": "took snapshot.",
        "achievetrophy": "achieved {{hits}} likes.",
        "highestbid": "bid ${{price}} and become the highest bidder.",
        "exceededbid": "Someone has exceeded your last bid price ${{price}}.",
        "wonbid": "won the bid as price ${{price}}.",
        "cancelledplacebid": "Owner canceled {{nickname}}\'s bid.",
        "placebid": "has place bid as price ${{price}}.",
        "luckydrawend": "End",
        "luckydrawjoin": "Join",
        "luckydrawterminate": "End",
        "luckydrawdrawn": "Drawn"
      },
      "messagetemplate": [
        "👍",
        "+1",
        "被燒🔥",
        "尺寸？",
        "材質？",
        "多少錢？"
      ],
      "luckydraw": {
        "roomId": "1234567890",
        "startTime": "2025-04-16T12:00:00.000Z",
        "drawn": false,
        "terminated": false
      },
      "products": [
        {
          "id": "A1234567890",
          "uuid": "334c6ea9-244e-4a6c-b320-d3506b4d6d91",
          "title": "product title",
          "link": "https://your-domain/product.html",
          "thumbnail": "https://your-domain/img/product.jpg",
          "price": "$ 9,999",
          "bestDiscount": "-40%",
          "marks": {
            "coupon": true,
            "shippingCoupon": false,
            "buynow": true,
            "bid": false
          },
          "buyCount": 1,
          "broadcasting": true
        },
        ...
      ]
    }
  </script>
</yahoo-x-bv-player>

Otherwise, developers could also choose remoteconfig to fetch config for <yahoo-x-bv-player />.

<yahoo-x-bv-player
  remoteconfig="https://your-domain/api-path"
>
  ...
  ...
  ...
</yahoo-x-bv-player>

JavaScript Instantiation

<yahoo-x-bv-player /> could also use JavaScript to create DOM element. Here comes some examples.

<script type="module">
import { YahooXBvPlayer } from 'https://unpkg.com/yahoo-x-bv-player/mjs/wc-yahoo-x-bv-player.js';

// use DOM api
const nodeA = document.createElement('yahoo-x-bv-player');
document.body.appendChild(nodeA);
nodeA.playerconfig = {
  licenseKey: 'your-BlendVision-player-license',
  playbackToken: '<playbackToken>',
  title: 'Yahoo Auction',
  source: [
    {
      type: 'video/mp4',
      src: 'https://your-domain/video-source.mp4'
    }
  ]
};
nodeA.share = {
  title: 'Yahoo X BlendVision',
  text: 'This is a Yahoo X BlendVision video player.',
  url: 'https://blog.lalacube.com/mei/webComponent_yahoo-x-bv-player.html'
};
nodeA.loop = true;

// new instance with Class
const nodeB = new YahooXBvPlayer();
document.body.appendChild(nodeB);
nodeB.playerconfig = {
  licenseKey: 'your-BlendVision-player-license',
  playbackToken: '<playbackToken>',
  title: 'Yahoo Auction',
  source: [
    {
      type: 'video/mp4',
      src: 'https://your-domain/video-source.mp4'
    }
  ]
};
nodeB.share = {
  title: 'Yahoo X BlendVision',
  text: 'This is a Yahoo X BlendVision video player.',
  url: 'https://blog.lalacube.com/mei/webComponent_yahoo-x-bv-player.html'
};
nodeB.loop = true;

// new instance with Class & default config
const config = {
  playerconfig: {
    licenseKey: 'your-BlendVision-player-license',
    playbackToken: '<playbackToken>',
    title: 'Yahoo Auction',
    source: [
      {
        type: 'video/mp4',
        src: 'https://your-domain/video-source.mp4'
      }
    ]
  },
  share: {
    title: 'Yahoo X BlendVision',
    text: 'This is a Yahoo X BlendVision video player.',
    url: 'https://blog.lalacube.com/mei/webComponent_yahoo-x-bv-player.html'
  }
};
const nodeC = new YahooXBvPlayer(config);
document.body.appendChild(nodeC);
</script>

Style Customization

Developers could apply styles to decorate <yahoo-x-bv-player />'s looking.

<style>
yahoo-x-bv-player {
  /* main padding */
  --yahoo-x-bv-player-padding-inline-basis: 12px;
  --yahoo-x-bv-player-padding-block-end-basis: 8px;

  /* video */
  --yahoo-x-bv-player-video-object-fit: contain;

  /* progress */
  --yahoo-x-bv-player-slider-thumb-color: rgba(234 51 35);
  --yahoo-x-bv-player-slider-thumb-shadow-color: rgba(0 0 0);
  --yahoo-x-bv-player-indicator-background: rgba(255 255 255/.2);
  --yahoo-x-bv-player-indicator-buffer-start: rgba(255 255 255/.4);
  --yahoo-x-bv-player-indicator-buffer-end: rgba(255 255 255/.4);
  --yahoo-x-bv-player-indicator-duration-start: rgba(234 51 35);
  --yahoo-x-bv-player-indicator-duration-end: rgba(234 51 35);

  /* time information */
  --yahoo-x-bv-player-time-info-text-color: rgba(255 255 255);

  /* buttons */
  --yahoo-x-bv-player-button-icon-color: rgba(255 255 255);
  --yahoo-x-bv-player-button-focus-visible-background-color: rgba(0 0 0/.5);

  /* dialog */
  --yahoo-x-bv-player-dialog-background-color: rgba(255 255 255);
  --yahoo-x-bv-player-dialog-backdrop-color: rgba(35 42 49/.6);
  --yahoo-x-bv-player-dialog-head-text-color: rgba(35 42 49);
  --yahoo-x-bv-player-dialog-listing-title-color: rgba(35 42 49);
  --yahoo-x-bv-player-dialog-line-color: rgba(199 205 210);
  --yahoo-x-bv-player-dialog-listing-price-color: rgba(235 15 41);
  --yahoo-x-bv-player-dialog-listing-hover-color: rgba(240 243 245);
  --yahoo-x-bv-player-dialog-listing-broadcasting-color: rgba(255 211 51/.3);
  --yahoo-x-bv-player-dialog-close-hover-background-color: rgba(245 248 250);
  --yahoo-x-bv-player-dialog-close-icon-color: rgba(95 99 104);
  --yahoo-x-bv-player-dialog-listing-buynow-color: rgba(0 99 235);

  /* message input */
  --yahoo-x-bv-player-live-controls-input-text-color: rgba(255 255 255);
  --yahoo-x-bv-player-live-controls-input-placeholder-color: rgba(255 255 255/.5);
  --yahoo-x-bv-player-live-controls-form-background-color: rgba(0 0 0/.75);

  /* chatroom */
  --yahoo-x-bv-player-chatroom-message-owner-text: 'HOST';
  --yahoo-x-bv-player-chatroom-message-owner-text-color: rgba(255 255 255);
  --yahoo-x-bv-player-chatroom-message-owner-background-color: rgba(255 82 13);

  /* host */
  --yahoo-x-bv-player-host-count-text: 'viewers';

  /* poster */
  --yahoo-x-bv-player-poster-background-color: rgba(0 0 0);

  /* listings' text */
  --yahoo-x-bv-player-broadcasting-text: 'ON AIR';
  --yahoo-x-bv-player-listing-sign-shipping-coupon-text: '運費抵用券';
  --yahoo-x-bv-player-listing-sign-coupon-text: '折扣碼';
  --yahoo-x-bv-player-listing-sign-buynow-text: '直購';
  --yahoo-x-bv-player-listing-sign-bid-text: '競標';
  --yahoo-x-bv-player-listing-sold-start-text: '售出';
  --yahoo-x-bv-player-listing-sold-end-text: '件';

  /* emotions (1 ~ 9) */
  --yahoo-x-bv-player-emotion-sign-1: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNCcgaGVpZ2h0PScyNCcgZmlsbD0nbm9uZSc+PHBhdGggZmlsbD0nI0ZDREExOScgZD0nTTEyIDBjNi42MjcgMCAxMiA1LjM3MyAxMiAxMnMtNS4zNzMgMTItMTIgMTJTMCAxOC42MjcgMCAxMiA1LjM3MyAwIDEyIDBaJy8+PHBhdGggZmlsbD0nI0ZGNEQ1MicgZD0nTTYuNDIzIDE0LjQxM2MuODEgMS4wNjggMi4wNyAxLjc4IDMuNjYyIDEuNzggMS42MzEgMCAyLjg5MS0uNjA3IDMuNzcyLTEuNjExYTQuODEgNC44MSAwIDAgMCAuNzI1LTEuMWMuMTEyLS4yMzQuMTgyLS40MjcuMjE5LS41NmExIDEgMCAwIDAtMS45MjgtLjUzbC0uMDEzLjAzN2EyLjgzOCAyLjgzOCAwIDAgMS0uNTEuODQ1Yy0uNTEyLjU4NC0xLjIzLjkzLTIuMjY1LjkzLS45MiAwLTEuNjEyLS4zOS0yLjA2NS0uOTg4YTEuMDA0IDEuMDA0IDAgMCAwLTEuNC0uMTk1Ljk5Ljk5IDAgMCAwLS4xOTcgMS4zOTJaJy8+PHBhdGggZmlsbD0nIzVGNUY1RicgZD0nTTkuNTI0IDYuMjk4Yy0uMTgyLS41OTMtLjczMi0uOTk0LTEuNDg2LS45OTRIMy44ODZjLTEuMTA0IDAtMS43Ny44Ni0xLjQ4OCAxLjkyMmwuMyAxLjEyOGMuMjgyIDEuMDYyIDEuNDA4IDEuOTIyIDIuNTE0IDEuOTIyaDEuNWMxLjEwNSAwIDIuMjMxLS44NiAyLjUxMy0xLjkyMmwuMDE4LS4wNjdoMi4xMDRsLjAxOC4wNjdjLjI4MiAxLjA2MSAxLjQwOCAxLjkyMiAyLjUxNCAxLjkyMmgxLjQ5OWMxLjEwNiAwIDIuMjMyLS44NiAyLjUxNC0xLjkyMmwuMy0xLjEyOGMuMjgyLTEuMDYyLS4zODQtMS45MjItMS40ODgtMS45MjJoLTQuMTUyYy0uNzU0IDAtMS4zMDMuNDAxLTEuNDg2Ljk5NEg5LjUyNFonLz48L3N2Zz4=);
  --yahoo-x-bv-player-emotion-sign-2: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNCcgaGVpZ2h0PScyNCcgZmlsbD0nbm9uZSc+PHBhdGggZmlsbD0ndXJsKCNhKScgZD0nTTEyIDBjNi42MjcgMCAxMiA1LjM3MyAxMiAxMnMtNS4zNzMgMTItMTIgMTJTMCAxOC42MjcgMCAxMiA1LjM3MyAwIDEyIDBaJy8+PHBhdGggZmlsbD0nIzVGNUY1RicgZD0nTTEzLjYzNiA2LjUxYy0uOTA0IDAtMS42MzYuNzI4LTEuNjM2IDEuNjI2IDAgLjkuNzMyIDEuNjI4IDEuNjM2IDEuNjI4LjkwNCAwIDEuNjM3LS43MjggMS42MzctMS42MjggMC0uODk4LS43MzMtMS42MjctMS42MzctMS42MjdaJy8+PHBhdGggZmlsbD0nI0ZGNEQ1MicgZD0nTTUuNTE5IDEzLjMyM2MuNjU2IDEuNzE1IDIuNDkgMi45NSA0LjY1MiAyLjk1IDIuMTYgMCAzLjk5NS0xLjIzNSA0LjY1MS0yLjk1LjI1OS0uNjc1LS4zLTEuMzktMS4wNC0xLjM5SDYuNTZjLS43NDEgMC0xLjMuNzE1LTEuMDQxIDEuMzlaJy8+PHBhdGggZmlsbD0nIzVGNUY1RicgZD0nTTcuMDkgOS43NjRjLjkwNSAwIDEuNjM3LS43MjggMS42MzctMS42MjggMC0uODk4LS43MzItMS42MjctMS42MzYtMS42MjctLjkwNCAwLTEuNjM2LjczLTEuNjM2IDEuNjI3IDAgLjkuNzMyIDEuNjI4IDEuNjM2IDEuNjI4WicvPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0nYScgeDE9JzEyJyB4Mj0nLTEyJyB5MT0nLTEyJyB5Mj0nMTInIGdyYWRpZW50VW5pdHM9J3VzZXJTcGFjZU9uVXNlJz48c3RvcCBzdG9wLWNvbG9yPScjRkVFRjM2Jy8+PHN0b3Agb2Zmc2V0PScxJyBzdG9wLWNvbG9yPScjRkNEQTE5Jy8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PC9zdmc+);
  --yahoo-x-bv-player-emotion-sign-3: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNCcgaGVpZ2h0PScyNCcgZmlsbD0nbm9uZSc+PHBhdGggZmlsbD0nI0ZDREExOScgZD0nTTEyIDBjNi42MjcgMCAxMiA1LjM3MyAxMiAxMnMtNS4zNzMgMTItMTIgMTJTMCAxOC42MjcgMCAxMiA1LjM3MyAwIDEyIDBaJy8+PHBhdGggZmlsbD0nI0ZDREExOScgZD0nTTEyIDBjNi42MjcgMCAxMiA1LjM3MyAxMiAxMnMtNS4zNzMgMTItMTIgMTJTMCAxOC42MjcgMCAxMiA1LjM3MyAwIDEyIDBaJy8+PHBhdGggZmlsbD0nI0ZGNEQ1MicgZD0nTTYgMTIuMjY1IDIuODg3IDkuMDIxYTIuMDQ1IDIuMDQ1IDAgMCAxIDAtMi43OTkgMS44NjYgMS44NjYgMCAwIDEgMS4zNTgtLjU4N2MxLjA2MiAwIDEuNTU4Ljg0MyAxLjc1NSAxLjAwMi4yMDMtLjE2NC42ODctMS4wMDIgMS43NTUtMS4wMDIuNTE0IDAgLjk5Ny4yMDkgMS4zNTguNTg3YTIuMDQ1IDIuMDQ1IDAgMCAxIDAgMi43OThMNiAxMi4yNjVaTTE1IDEyLjI2NWwtMy4xMTMtMy4yNDRhMi4wNDUgMi4wNDUgMCAwIDEgMC0yLjc5OSAxLjg2NiAxLjg2NiAwIDAgMSAxLjM1OC0uNTg3YzEuMDYzIDAgMS41NTguODQzIDEuNzU1IDEuMDAyLjIwMy0uMTY0LjY4Ny0xLjAwMiAxLjc1NS0xLjAwMi41MTQgMCAuOTk3LjIwOSAxLjM1OC41ODdhMi4wNDUgMi4wNDUgMCAwIDEgMCAyLjc5OEwxNSAxMi4yNjVaJy8+PHBhdGggZmlsbD0nIzVGNUY1RicgZD0nTTEyLjMzIDE0LjZhMiAyIDAgMSAxLTQgMCAyIDIgMCAwIDEgNCAwWicvPjwvc3ZnPg==);
  --yahoo-x-bv-player-emotion-sign-4: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNCcgaGVpZ2h0PScyNCcgZmlsbD0nbm9uZSc+PHBhdGggZmlsbD0ndXJsKCNhKScgZD0nTTEyIDBjNi42MjcgMCAxMiA1LjM3MyAxMiAxMnMtNS4zNzMgMTItMTIgMTJTMCAxOC42MjcgMCAxMiA1LjM3MyAwIDEyIDBaJy8+PHBhdGggZmlsbD0nI2ZmZicgZD0nTTE1IDQuNjRjLTIuMDI3IDAtMy42NjcgMS42MzQtMy42NjcgMy42NDdBMy42NTUgMy42NTUgMCAwIDAgMTUgMTEuOTMzYzIuMDI0IDAgMy42NjctMS42MyAzLjY2Ny0zLjY0NiAwLTIuMDEzLTEuNjQzLTMuNjQ2LTMuNjY3LTMuNjQ2Wk02IDQuNjRjLTIuMDI2IDAtMy42NjcgMS42MzQtMy42NjcgMy42NDdBMy42NTUgMy42NTUgMCAwIDAgNiAxMS45MzNjMi4wMjQgMCAzLjY2Ny0xLjYzIDMuNjY3LTMuNjQ2IDAtMi4wMTMtMS42NDMtMy42NDYtMy42NjctMy42NDZaJy8+PHBhdGggZmlsbD0nIzVGNUY1RicgZD0nTTE0Ljk3IDkuODg0Yy45MDQgMCAxLjYzNi0uNzI4IDEuNjM2LTEuNjI3IDAtLjg5OC0uNzMyLTEuNjI3LTEuNjM2LTEuNjI3LS45MDUgMC0xLjYzNy43MjktMS42MzcgMS42MjcgMCAuOS43MzIgMS42MjcgMS42MzcgMS42MjdaTTUuOTcgOS44ODRjLjkwNCAwIDEuNjM2LS43MjggMS42MzYtMS42MjcgMC0uODk4LS43MzItMS42MjctMS42MzYtMS42MjctLjkwNSAwLTEuNjM3LjcyOS0xLjYzNyAxLjYyNyAwIC45LjczMiAxLjYyNyAxLjYzNyAxLjYyN1onLz48cGF0aCBmaWxsPScjRkY0RDUyJyBkPSdNOC4zMzMgMTMuOTM0YTIgMiAwIDEgMSA0IDB2My42MjRhMiAyIDAgMCAxLTQgMHYtMy42MjRaJy8+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSdhJyB4MT0nMTInIHgyPSctMTInIHkxPSctMTInIHkyPScxMicgZ3JhZGllbnRVbml0cz0ndXNlclNwYWNlT25Vc2UnPjxzdG9wIHN0b3AtY29sb3I9JyNGRUVGMzYnLz48c3RvcCBvZmZzZXQ9JzEnIHN0b3AtY29sb3I9JyNGQ0RBMTknLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48L3N2Zz4=);
  --yahoo-x-bv-player-emotion-sign-5: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNCcgaGVpZ2h0PScyNCcgZmlsbD0nbm9uZSc+PHBhdGggZmlsbD0nI0ZDREExOScgZD0nTTEyIDBjNi42MjcgMCAxMiA1LjM3MyAxMiAxMnMtNS4zNzMgMTItMTIgMTJTMCAxOC42MjcgMCAxMiA1LjM3MyAwIDEyIDBaJy8+PHBhdGggZmlsbD0nI0ZDREExOScgZD0nTTEyIDBjNi42MjcgMCAxMiA1LjM3MyAxMiAxMnMtNS4zNzMgMTItMTIgMTJTMCAxOC42MjcgMCAxMiA1LjM3MyAwIDEyIDBaJy8+PHBhdGggZmlsbD0nIzVGNUY1RicgZD0nTTEyLjY0MyA2LjM4OWEuOTk0Ljk5NCAwIDAgMSAxLjQtLjEyM2wyLjA1MiAxLjcyMWEuOTk0Ljk5NCAwIDEgMS0xLjI3OCAxLjUyNEwxMi43NjUgNy43OWEuOTk0Ljk5NCAwIDAgMS0uMTIyLTEuNDAxWk04LjIxOCA2LjM4OWEuOTk0Ljk5NCAwIDAgMC0xLjQwMS0uMTIzTDQuNzY1IDcuOTg3YS45OTQuOTk0IDAgMCAwIDEuMjc5IDEuNTI0TDguMDk1IDcuNzlhLjk5NC45OTQgMCAwIDAgLjEyMy0xLjQwMVonLz48cGF0aCBmaWxsPScjRkY0RDUyJyBkPSdNMTIuMzcgMTUuNzg2YzEuMTY3IDAgMi4wMDUtLjU2MiAyLjQ1NS0xLjQ0NmEzLjIzNCAzLjIzNCAwIDAgMCAuMzQ1LTEuMzMyLjk5Ny45OTcgMCAwIDAtLjk4Mi0xLjAxMy45OTcuOTk3IDAgMCAwLTEuMDE4Ljk3NmMtLjAwMS4wODktLjAzOC4yOS0uMTMuNDctLjEyMy4yNDMtLjI5Mi4zNTYtLjY3LjM1Ni0uNCAwLS42MTUtLjEzNi0uNzc3LS40MWExLjM5MiAxLjM5MiAwIDAgMS0uMTgtLjQ5OGMtLjEyLTEuMTgyLTEuODQ3LTEuMTk3LTEuOTg4LS4wMTYtLjAxMS4wOTktLjA3LjMxMS0uMTkuNTEtLjE2NS4yNzgtLjM3OC40MTQtLjc1Ny40MTQtLjM1MyAwLS41MjUtLjEyLS42Ni0uMzg2YTEuNTE4IDEuNTE4IDAgMCAxLS4xNTItLjUyOC45OTguOTk4IDAgMCAwLTEuMDQ1LS45NDguOTk3Ljk5NyAwIDAgMC0uOTUzIDEuMDM4IDMuNDY4IDMuNDY4IDAgMCAwIC4zNjUgMS4zMzZjLjQ1Ny44OTggMS4yODcgMS40NzcgMi40NDUgMS40NzcuNzkzIDAgMS40NDMtLjI2NSAxLjkzNS0uNzE2LjQ5NS40NTIgMS4xNTIuNzE2IDEuOTU2LjcxNlonLz48cGF0aCBmaWxsPScjRkY0RDUyJyBkPSdNMSAxMS42MDVjMC0uNzMyLjU5My0xLjMyNSAxLjMyNS0xLjMyNWgxLjM1YTEuMzI1IDEuMzI1IDAgMSAxIDAgMi42NWgtMS4zNUExLjMyNSAxLjMyNSAwIDAgMSAxIDExLjYwNVpNMTYuMzMgMTEuNjA1YzAtLjczMi41OTMtMS4zMjUgMS4zMjUtMS4zMjVoMS4zNWExLjMyNSAxLjMyNSAwIDEgMSAwIDIuNjVoLTEuMzVhMS4zMjUgMS4zMjUgMCAwIDEtMS4zMjUtMS4zMjVaJyBvcGFjaXR5PScuMycvPjwvc3ZnPg==);
  --yahoo-x-bv-player-emotion-sign-6: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNCcgaGVpZ2h0PScyNCcgZmlsbD0nbm9uZSc+PHBhdGggZmlsbD0nI0ZDREExOScgZD0nTTEyIDBjNi42MjcgMCAxMiA1LjM3MyAxMiAxMnMtNS4zNzMgMTItMTIgMTJTMCAxOC42MjcgMCAxMiA1LjM3MyAwIDEyIDBaJy8+PHBhdGggZmlsbD0nI0ZGNEQ1MicgZD0nTTcgMTUuMmMwLTEuMTA1Ljg5LTIgMS45ODgtMmg0LjAyNGMxLjA5OCAwIDEuOTg4Ljg5NSAxLjk4OCAycy0uODkgMi0xLjk4OCAySDguOTg4QTEuOTk0IDEuOTk0IDAgMCAxIDcgMTUuMlonLz48cGF0aCBmaWxsPScjZmZmJyBkPSdNNS43MyA1LjM2Yy4xMy0uNDguODA5LS40OC45MzggMGwuNjY2IDIuNDY4IDIuMDc0LjQxNmMuNTIuMTA0LjUyLjg0OCAwIC45NTJsLTIuMDc0LjQxNi0uNjY2IDIuNDY5Yy0uMTMuNDc5LS44MDkuNDc5LS45MzggMGwtLjY2Ni0yLjQ3LTIuMDc0LS40MTVjLS41Mi0uMTA0LS41Mi0uODQ4IDAtLjk1MmwyLjA3NC0uNDE2LjY2Ni0yLjQ2OVpNMTUuMTMgNS4zNmMuMTMtLjQ4LjgwOS0uNDguOTM4IDBsLjY2NiAyLjQ2OCAyLjA3NC40MTZjLjUyLjEwNC41Mi44NDggMCAuOTUybC0yLjA3NC40MTYtLjY2NiAyLjQ2OWMtLjEzLjQ3OS0uODA5LjQ3OS0uOTM4IDBsLS42NjYtMi40Ny0yLjA3NC0uNDE1Yy0uNTItLjEwNC0uNTItLjg0OCAwLS45NTJsMi4wNzQtLjQxNi42NjYtMi40NjlaJy8+PC9zdmc+);
  --yahoo-x-bv-player-emotion-sign-7: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNCcgaGVpZ2h0PScyNCcgZmlsbD0nbm9uZSc+PHBhdGggZmlsbD0ndXJsKCNhKScgZD0nTTEyIDBjNi42MjcgMCAxMiA1LjM3MyAxMiAxMnMtNS4zNzMgMTItMTIgMTJTMCAxOC42MjcgMCAxMiA1LjM3MyAwIDEyIDBaJy8+PHBhdGggZmlsbD0nI2ZmZicgZmlsbC1ydWxlPSdldmVub2RkJyBkPSdtMTguMTkxIDExLjY4OC0uMTY2LjE1NC4wOTQuMjA1Yy4wOC4xNzQuMTIzLjM3LjEyMy41NjYgMCAuMzY3LS4xNjcuNjU0LS40OTYuODUzbC0uMjQ2LjE1LjEyNy4yNTZjLjA4NS4xNzIuMTI4LjM1OC4xMjguNTUgMCAuMzMtLjE2LjU5Ni0uNDg2LjgxNWwtLjIyNy4xNS4xMTcuMjQ1Yy4wNzguMTYyLjExNy4zNDQuMTE3LjU0IDAgLjkwNi0uNzM4IDEuMjYxLTEuMzcgMS4yNjFsLTcuMzg2LjAwN1Y5LjljLjAyMi0uMDM0LjAzNy0uMDYuMDUtLjA4My4wMy0uMDUuMDUtLjA4NS4xMTQtLjE1OC40MjQtLjM2LjgxNC0uNzI1IDEuMTYxLTEuMDg1LjA5Ni0uMS4xOS0uMi4yOC0uMzAxLjc3LS44NTIgMS4wNTItMS41MjUgMS4wMDktMi40YS44NDYuODQ2IDAgMCAxIC4yODgtLjY5M2MuMjY3LS4yMzcuNjc0LS4zMzcgMS4wODktLjI3My43OC4xMjMgMS4zNDIuNzYgMS40NjQgMS42NjMuMTIuODgzLjA1OCAxLjc0Ny0uMTc0IDIuNDMybC0uMTQuNDEzaDMuMjZjLjgyOCAwIDEuNzIyLjUxNCAxLjcyMiAxLjM0NCAwIC4zMy0uMTYuNjYtLjQ1Mi45M1ptLTEyLjgzNCA2LjA2LjAwNi03LjUyOWMwLS4xNjguMTE1LS4zMTMuMzEtLjMxM2gxLjU4MnY4LjE1M0g1LjY3M2EuMzA0LjMwNCAwIDAgMS0uMzE2LS4zMTJaJyBjbGlwLXJ1bGU9J2V2ZW5vZGQnLz48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9J2EnIHgxPScxNC4zNzInIHgyPSczNC41NDInIHkxPSczMS4xNycgeTI9JzEwLjA4NScgZ3JhZGllbnRVbml0cz0ndXNlclNwYWNlT25Vc2UnPjxzdG9wIHN0b3AtY29sb3I9JyMzQUJGQkEnLz48c3RvcCBvZmZzZXQ9JzEnIHN0b3AtY29sb3I9JyNGQ0RBMTknLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48L3N2Zz4=);
  --yahoo-x-bv-player-emotion-sign-8: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNCcgaGVpZ2h0PScyNCcgZmlsbD0nbm9uZSc+PHBhdGggZmlsbD0ndXJsKCNhKScgZD0nTTEyIDBjNi42MjcgMCAxMiA1LjM3MyAxMiAxMnMtNS4zNzMgMTItMTIgMTJTMCAxOC42MjcgMCAxMiA1LjM3MyAwIDEyIDBaJy8+PHBhdGggZmlsbD0nI2ZmZicgZD0nbTEyIDE4LjktNS45NDMtNi4xNzdjLTEuNDEtMS40NjktMS40MS0zLjg1OCAwLTUuMzI2YTMuNTcgMy41NyAwIDAgMSA1LjE4NSAwbC43NTguNzkuNzU3LS43OWEzLjU2OCAzLjU2OCAwIDAgMSA1LjE4NyAwYzEuNDA4IDEuNDY4IDEuNDA4IDMuODU3IDAgNS4zMjVMMTIgMTguOVonLz48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9J2EnIHgxPScxMS45NzQnIHgyPSczNS45MjInIHkxPSczNS45NzQnIHkyPScxMi4wMjYnIGdyYWRpZW50VW5pdHM9J3VzZXJTcGFjZU9uVXNlJz48c3RvcCBzdG9wLWNvbG9yPScjRkY0RDUyJy8+PHN0b3Agb2Zmc2V0PScxJyBzdG9wLWNvbG9yPScjRkY4QTAwJy8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PC9zdmc+);
  --yahoo-x-bv-player-emotion-sign-9: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNCcgaGVpZ2h0PScyNCcgZmlsbD0nbm9uZSc+PHBhdGggZmlsbD0ndXJsKCNhKScgZD0nTTEyIDBjNi42MjcgMCAxMiA1LjM3MyAxMiAxMnMtNS4zNzMgMTItMTIgMTJTMCAxOC42MjcgMCAxMiA1LjM3MyAwIDEyIDBaJy8+PHBhdGggZmlsbD0nI2ZmZicgZD0nTTUuMjE0IDExLjY0OEg3Ljg3VjguNzJoMS43NDR2Mi45MjhoMi42NzJ2MS42NDhIOS42MTR2Mi45MTJINy44N3YtMi45MTJINS4yMTR2LTEuNjQ4Wk0xNS43NDYgMThWOS4xODRsLTIuMjQgMS4zNzYtLjA5Ni0uMDMyVjguNDk2bDIuOTI4LTEuNzc2aDEuODcyVjE4aC0yLjQ2NFonLz48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9J2EnIHgxPScxMS45NzQnIHgyPSczNS45MjInIHkxPSczNS45NzQnIHkyPScxMi4wMjYnIGdyYWRpZW50VW5pdHM9J3VzZXJTcGFjZU9uVXNlJz48c3RvcCBzdG9wLWNvbG9yPScjRkY4QTAwJy8+PHN0b3Agb2Zmc2V0PScuNTknIHN0b3AtY29sb3I9JyNGRkE3MDAnLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48L3N2Zz4=);
}
</style>

Keyboard shortcut

<yahoo-x-bv-player /> also comes with keyboard shortcut. I believe this will make more vivid & more useful.

k：Toggle <yahoo-x-bv-player /> play or pause.
space：Toggle <yahoo-x-bv-player /> play or pause.
m：Toggle <yahoo-x-bv-player /> mute or not.
s：Take a screenshot for current <yahoo-x-bv-player /> video frame.
f：Toggle <yahoo-x-bv-player /> into fullscreen or not.
esc：Turn off fullscreen mode.
←：<yahoo-x-bv-player /> backward 5 seconds.
→：<yahoo-x-bv-player /> forward 5 seconds.
j：<yahoo-x-bv-player /> backward 10 seconds.
l：<yahoo-x-bv-player /> forward 10 seconds.
0 ~ 9：<yahoo-x-bv-player /> jumps to specific timeline. Ex: 7 means to timeline 70%.

Attributes

<yahoo-x-bv-player /> supports some attributes to let it become more convenience & useful.

type

Set type as live or replay. Default is live.

<yahoo-x-bv-player type="live">
  ...
</yahoo-x-bv-player>

playerconfig

Set BlendVision Web SDK config.

licenseKey：Set BlendVision player license.
playbackToken：Set BlendVision PlaybackSession token.
title：Set title.
source：Set video sources.

<yahoo-x-bv-player playerconfig='{"title":"Yahoo Auction","source":[{"type":"video/mp4","src":"https://your-domain/video-source.mp4"}],"licenseKey":"your-BlendVision-player-license","playbackToken":"your-BlendVision-playback-token"}'>
  ...
</yahoo-x-bv-player>

chatroomconfig

Set BlendVision chatroom SDK config.

token：Set BlendVision chatroom token.
refreshToken：Set BlendVision chatroom refreshToken.
host：Set api host. Default is "https://api.one.blendvision.com".

<yahoo-x-bv-player chatroomconfig='{"token":"your.BV.chatroom.token","refreshToken":"your.BV.chatroom.refreshToke","host":"https://api.one.blendvision.com"}'>
  ...
</yahoo-x-bv-player>

ysocket

Set Yahoo socket config. This key is optional.

id：Set id for yahoo socket.
url：Set url for yahoo socket.

<yahoo-x-bv-player ysocket='{"id":"your.yahoo.web.socket.id","url":"your.yahoo.web.socket.url"}'>
  ...
</yahoo-x-bv-player>

share

Set share information.

title：Set share title.
text：Set share descrioption.
url：Set share url. Default is link[rel=canonical] or current page url.

<yahoo-x-bv-player share='{"title":"Yahoo X BlendVision","text":"This is a Yahoo X BlendVision video player.","url":"https://your-domain/share.html"}'>
  ...
</yahoo-x-bv-player>

poster

Set video poster.

<yahoo-x-bv-player poster="https://your-domain/poster.jpg">
  ...
</yahoo-x-bv-player>

loop

Set video loop or not.

<yahoo-x-bv-player loop>
  ...
</yahoo-x-bv-player>

autopilot

Set autopilot for like button or not.

<yahoo-x-bv-player autopilot>
  ...
</yahoo-x-bv-player>

autoplay

Set autoplay for video.

<yahoo-x-bv-player autoplay>
  ...
</yahoo-x-bv-player>

host

Set host information.

avatar：Set host avatar path.
name：Set host name.
link：Set host url.
count：Set current count information.
announce：Set content which host like to announce.
follow：Set follow（Boolean） or not.

<yahoo-x-bv-player host='{"avatar":"https://your-domain/host-avatar.png","name":"host name","link":"https://your-domain/host","count":"999","follow":false}'>
  ...
</yahoo-x-bv-player>

luckydraw

Set luckydraw information.

roomId：Set roomId information.
startTime：Set luckydraw event start time. (ISO 8601).
drawn：Set luckydraw event drawn or not. (Boolean).
terminated：Set luckydraw event terminate or not. (Boolean).

<yahoo-x-bv-player luckydraw='{"roomId":"1234567890","startTime":"2025-04-16T12:00:00.000Z","drawn":false,"terminated":false}'>
  ...
</yahoo-x-bv-player>

l10n

Set localization for title or action buttons.

previewtrigger：Set preview trigger text content.
listingshead：Set listing dialog's title.
buynow：Set listing dialog's direct buy button text content.
jointhecrowd：Set message when user joined LIVE.
rushbuying：Set message when user visited product list or product page.
addfavorite：Set message when user added host as his / her favorite.
sharelive：Set message when user shared LIVE.
takesnapshot：Set message when user took a snapshot.
achievetrophy：Set message when user achieved like count trophy.
highestbid：Set message when highest bidder occured.
exceededbid：Set message when bid price has been exceeded.
wonbid：Set message when won bid.
cancelledplacebid：Set message when owner canceled someone's bid.
placebid：Set message when someone place bid.
luckydrawend：Set text content for luckydraw event end.
luckydrawjoin：Set text content for luckydraw event start.
luckydrawterminate：Set text content for luckydraw event terminate.
luckydrawdrawn：Set text content for luckydraw event drawn.

<yahoo-x-bv-player l10n='{"previewtrigger":"View","listingshead":"Products","buynow":"BUY NOW","jointhecrowd":"joined the crowd.","rushbuying":"is rush buying.","addfavorite":"added host as favorite.","sharelive":"shared this LIVE.","takesnapshot":"took snapshot.","achievetrophy":"achieved {{hits}} likes.","luckydrawend":"End","luckydrawjoin":"Join","luckydrawterminate":"End","luckydrawdrawn":"Drawn"}'>
  ...
</yahoo-x-bv-player>

messagetemplate

Set message template information. Default is [].

<yahoo-x-bv-player messagetemplate='["👍","+1","被燒🔥","尺寸？","材質？","多少錢？"]'>
  ...
</yahoo-x-bv-player>

products

Set products' information.

id：Set product id.
uuid：Set product uuid.
title：Set product's title.
link：Set product url.
thumbnail：Set product thumbnail.
price：Set product price.
marketPrice：Set product market price（original price）. This key is optional.
priceRange：Set product price range（min & max）in object format. UI will take this information first（hide price & marketPrice）. This key is optional.
bestDiscount：Set product best discount. This is optional key.
marks：Set product marks > coupon（Boolean）、shipping coupon（Boolean）、buynow（Boolean）、bid（Boolean）. This is optional key..
buyCount：Set product sold count.
broadcasting：Set product is current broadcasting or not.（Boolean）.

<yahoo-x-bv-player products='[{"id":"A1234567890","uuid":"334c6ea9-244e-4a6c-b320-d3506b4d6d91","title":"product title","link":"https://your-domain/product.html","thumbnail":"https://your-domain/img/product.jpg","price":"$ 9,999","bestDiscount":"-40%","marks":{"coupon":true,"shippingCoupon":false,"buynow":true},"buyCount":1,"broadcasting":true}]'>
  ...
</yahoo-x-bv-player>

Properties

Property Name	Type	Description
type	String	Getter / Setter type as `live` or `replay`.
playerconfig	Object	Set BlendVision Web SDK config. Developers could set `licenseKey`、`playbackToken`、`title` and `source` here.
chatroomconfig	Object	Set BlendVision chatroom SDK config. Developers could set `token`、`refreshToken` and `host` here.
share	Object	Getter / Setter share information. Developers could set `title`、`text` and `url` here.
poster	String	Getter / Setter video poster.
loop	Boolean	Getter / Setter video loop.
autopilot	Boolean	Getter / Setter autopilot for like button.
currentTime	Number	Getter / Setter the current playback time in seconds.
muted	Boolean	Getter / Setter video is muted.
paused	Boolean	Getter video paused status.
host	Object	Getter / Setter host information. Developers could set `avatar`、`name`、`link`、`count`、`announce` and `follow` here.
luckydraw	Object	Getter / Setter luckydraw information. Developers could set `roomId`、`startTime`、`drawn`、and `terminated` here.
l10n	Object	Getter / Setter localization for title or action buttons. Developers could set `previewtrigger`、`listingshead`、`buynow`、`jointhecrowd`、`rushbuying`、`addfavorite`、`sharelive`、`takesnapshot`、`achievetrophy`、`highestbid`、`exceededbid`、`wonbid`、`cancelledplacebid`、`placebid`、`luckydrawend`、`luckydrawjoin`、`luckydrawterminate` and `luckydrawdrawn` here.
messagetemplate	Array	Getter / Setter message template information. Default is `[]`.
products	Array	Getter / Setter products' information. Developers could set `id`、`uuid`、`title`、`link`、`thumbnail`、`price`、`marketPrice`、`priceRange`、`bestDiscount`、`marks`、`buyCount` and `broadcasting` here.

Mathods

Mathod Signature	Description
play	Play video.
pause	Pause video.

Events

Event Signature	Description
yahoo-x-bv-player-play	Fired when video play.
yahoo-x-bv-player-pause	Fired when video pause.
yahoo-x-bv-player-seeking	Fired when video seeking.
yahoo-x-bv-player-ended	Fired when video ended.
yahoo-x-bv-player-purchase-click	Fired when product's purchase button clicked. Developers could gather product information through event.detail.
yahoo-x-bv-player-follow-click	Fired when host's follow button clicked. Developers could gather follow information through event.detail.
yahoo-x-bv-player-live-ended	Fired when LIVE ended. Developers could gather count、createdAt and likeCount information through event.detail.
yahoo-x-bv-player-add-product	Fired when user add product. Developers could gather id information through event.detail.
yahoo-x-bv-player-luckydraw-click	Fired when user click luckydraw. Developers could gather luckydraw information through event.detail.

Reference

Keywords

FAQs

What is yahoo-x-bv-player?

Is yahoo-x-bv-player popular?

Is yahoo-x-bv-player well maintained?

Package last updated on 21 Apr 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

yahoo-x-bv-player

yahoo-x-bv-player

Basic Usage

JavaScript Instantiation

Style Customization

Keyboard shortcut

Attributes

Properties

Mathods

Events

Reference

Keywords

Related posts

AGENTS.md Gains Traction as an Open Format for AI Coding Agents

Wallet-Draining npm Package Impersonates Nodemailer to Hijack Crypto Transactions