PlayerV

For website owners

What PlayerV is

PlayerV is the player you drop into a page. You provide video URLs (and optional ads / chapters). Visitors get a polished YouTube-like experience — play, seek, quality, captions, fullscreen, and more.

CDN base: https://axwb.ro/ — player script: https://axwb.ro/v1/playerv.js

Try it

Live demo

Real PlayerV loaded from axwb.ro — sample clip hosted on this site (Sintel trailer, Blender Foundation).

Tip: open Settings for quality & speed · try Share · resume is on for this demo.

Generator

Config builder

Tick the features you want, fill in your media URLs, then copy the generated config or HTML. Use Apply to demo to preview instantly above.

Product

What the player can do

Built-in controls and options available to every embed.

Getting started

How to embed PlayerV

Pick the method that matches your site. Most clients use Method 1.

Method 1 — Script (recommended)

1. Add a container Place an empty <div id="player"> where the video should appear.
2. Load the player Add the PlayerV script from your CDN URL.
3. Create the player Call PlayerV.create('#player', { … }) with your video config.

<div id="player" style="width:100%;aspect-ratio:16/9;background:#000"></div>

<script src="https://axwb.ro/v1/playerv.js" crossorigin="anonymous"></script>
<script>
  PlayerV.create('#player', {
    content: {
      mode: 'mp4',
      title: 'Official Trailer',
      poster: 'https://media.example.com/poster.jpg',
      mp4Qualities: [
        { id: '720p', label: '720p', height: 720, src: 'https://media.example.com/trailer-720.mp4' },
        { id: '1080p', label: '1080p', height: 1080, src: 'https://media.example.com/trailer-1080.mp4' }
      ]
    },
    resume: { enabled: true },
    ambient: true,
    share: true,
    adBreaks: []
  })
</script>

Method 2 — iframe (no JavaScript on your page)

Best when your CMS or security policy blocks custom scripts. Your page only includes an iframe.

<iframe
  src="https://axwb.ro/v1/frame.html?config=ENCODED_JSON"
  title="Video"
  style="width:100%;aspect-ratio:16/9;border:0;background:#000"
  allow="fullscreen; autoplay; picture-in-picture"
  allowfullscreen
></iframe>

ENCODED_JSON is your configuration object turned into a URL-encoded JSON string. Ask your developer or PlayerV contact to generate it, or build it in your backend (encodeURIComponent(JSON.stringify(config))).

Method 3 — HTML data attribute (CSP-friendly)

<div
  data-playerv
  data-config='{"content":{"mode":"mp4","title":"Trailer","mp4Qualities":[{"id":"720p","label":"720p","height":720,"src":"https://media.example.com/v.mp4"}]},"adBreaks":[]}'
  style="width:100%;aspect-ratio:16/9;background:#000"
></div>

<script src="https://axwb.ro/v1/playerv.js" crossorigin="anonymous"></script>
<script src="/path/to/playerv-init.js"></script>

playerv-init.js only needs: document.addEventListener('DOMContentLoaded', () => PlayerV.autoInit())

Configuration

How to configure your video

Host your media on any HTTPS video CDN. Then describe it in the config you pass to PlayerV.

{
  "content": {
    "mode": "mp4",
    "title": "Official Trailer",
    "poster": "https://media.example.com/poster.jpg",
    "mp4Qualities": [
      { "id": "720p", "label": "720p", "height": 720, "src": "https://media.example.com/t-720.mp4" },
      { "id": "1080p", "label": "1080p", "height": 1080, "src": "https://media.example.com/t-1080.mp4" }
    ]
  },
  "resume": { "enabled": true },
  "adBreaks": []
}

{
  "content": {
    "mode": "hls",
    "title": "Feature film",
    "poster": "https://media.example.com/poster.jpg",
    "hlsUrl": "https://media.example.com/master.m3u8"
  },
  "live": false,
  "adBreaks": []
}

{
  "content": { "mode": "mp4", "title": "Trailer", "mp4Qualities": [/* … */] },
  "adBreaks": [
    {
      "id": "pre",
      "type": "preroll",
      "ads": [{
        "id": "ad1",
        "title": "Sponsor",
        "src": "https://media.example.com/ads/pre.mp4",
        "skipAfterSeconds": 5,
        "clickThroughUrl": "https://sponsor.example.com"
      }]
    },
    {
      "id": "mid",
      "type": "midroll",
      "offsetSeconds": 60,
      "ads": [{
        "id": "ad2",
        "src": "https://media.example.com/ads/mid.mp4",
        "skipAfterSeconds": 5
      }]
    }
  ]
}

{
  "content": {
    "mode": "mp4",
    "title": "Episode 1",
    "poster": "https://media.example.com/poster.jpg",
    "mp4Qualities": [/* … */],
    "captions": [
      { "src": "https://media.example.com/en.vtt", "label": "English", "srclang": "en", "default": true }
    ]
  },
  "chapters": [
    { "time": 0, "title": "Cold open" },
    { "time": 90, "title": "Title" },
    { "time": 240, "title": "Climax" }
  ],
  "stats": {
    "viewsKey": "show-s1e1",
    "description": "Season 1 · Episode 1"
  },
  "endScreen": {
    "next": { "title": "Episode 2", "href": "/watch/s1e2", "poster": "https://media.example.com/ep2.jpg" }
  },
  "resume": { "enabled": true, "key": "show-s1e1" },
  "ambient": true,
  "share": true,
  "cast": true,
  "sleepTimer": true,
  "events": true,
  "adBreaks": []
}

Reference

Common options

The settings clients use most often. All are optional except content.

Controlling the player from your page

const player = PlayerV.create('#player', config)

player.play()
player.pause()
player.seek(45)
player.on('complete', () => { /* video finished */ })
player.destroy() // remove when leaving the page (SPA)