Integration Documentation

Polyv Cloud Video on Demand Web Player supports both Flash and HTML5 playback modes, automatically selecting the optimal mode based on the terminal and browser environment to deliver a unified multi-platform video playback experience. It supports mainstream video formats and protocols such as FLV, MP4, and HLS, and integrates with Polyv Cloud VOD services to provide features like encrypted video playback.

Compatibility

By default, Polyv Cloud VOD transcoding service transcodes uploaded videos into the following formats:

• Non-encrypted videos: MP4 (H5 playback), FLV (Flash playback)
• Encrypted videos: HLS (H5 playback), PTS (Flash playback)

Video Format and Platform Support:

1. PC browsers IE11 (Windows 8.1+) and above support HTML5 playback; lower IE versions will switch to the Flash player. Mobile devices do not support the Flash player.
2. Video encoding format only supports H.264.
3. If transcoding is disabled for a video, the player will play the source file directly. Whether playback is successful depends on the video formats supported by the viewer's browser.

Known H5 Compatibility Issues

1. Autoplay setting is ineffective and will not start automatically.
   • Audio autoplay is generally prohibited in mobile browsers. The common workaround is to trigger playback manually via user interaction (e.g., listening for a click event and calling the play method), though some specific browsers and webviews may allow autoplay.
   • Desktop browsers Chrome 55+ and Safari 11+ also restrict autoplay.
2. The built-in skin of the mobile H5 player may not display in some cases, preventing access to certain player controls (e.g., quality/speed switching).
   • On iOS devices, when playing video in fullscreen, the system player is forced, and the custom player skin cannot be displayed.
   • Due to numerous customized Android system versions, each version implements the H5 video tag differently. Many domestic browser vendors hijack the video tag during playback, using their built-in player. Thus, video playback consistency on Android is much worse than on iOS. When the custom player skin cannot be displayed, playback control can be achieved via the player's API.
3. Volume adjustment is ineffective on iOS and Android browsers.
4. Speed playback may not be supported on some mobile browsers, causing the feature to fail, e.g., Android WeChat.

Quick Integration Code

No dependency on any frontend JS library is required. Simply include the following JS file in the page to initialize the player.

js

<div id="player"></div>
<script src="//player.polyv.net/resp/vod-player/latest/player.js"></script>
<script>
  var player = polyvPlayer({
    wrap: '#player',
    width: 800,
    height: 533,
    vid: '88083abbf5bcf1356e05d39666be527a_8' ,
  });
</script>

Run Online

Defaults to H5 player; automatically switches to Flash on IE and other unsupported browsers.

To support players below IE9, use the following code (no longer recommended, see: Notice on Flash Player Service Termination)

<script src='//player.polyv.net/script/polyvplayer.min.js'></script>
<div id='player'></div>
<script>
var player = polyvObject('#player').videoPlayer({
    'width':'600',
    'height':'450',
    'vid' : '88083abbf5bcf1356e05d39666be527a_8' ,
});
</script>

vue

<template>
  <div id="player"></div>
</template>
<script>
export default {
  data() {
    return {
      vodPlayerJs: 'https://player.polyv.net/resp/vod-player/latest/player.js',
      vid:'88083abbf5bcf1356e05d39666be527a_8',
    };
  },

  mounted(){
      this.loadPlayerScript(this.loadPlayer);
  },

  methods: {
    loadPlayerScript(callback) {
      if (!window.polyvPlayer) {
        const myScript = document.createElement('script');
        myScript.setAttribute('src', this.vodPlayerJs);
        myScript.onload = callback;
        document.body.appendChild(myScript);
      } else {
        callback();
      }
    },

    loadPlayer() {
      const polyvPlayer = window.polyvPlayer;
      this.player = polyvPlayer({
        wrap: '#player',
        width: 800,
        height: 533,
        vid: this.vid ,
      });
    }
  },
  destroyed() {
    if (this.player) {
        this.player.destroy();
    }
  }
};
</script>

react

import React from 'react';

class Player extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    if(!window.polyvPlayer){
      this.loadScript('https://player.polyv.net/resp/vod-player/latest/player.js')
      .then(() =>{
        this.loadPlayer();
      });
    }
  }

  componentWillUnmount() {
    if(this.player){
      this.player.destroy();
    }
  }

  loadPlayer() {
    this.player = window.polyvPlayer({
      wrap: '.player',
      width: '100%',
      height: '100%',
      vid: '88083abbf5bcf1356e05d39666be527a_8',
    });
  }

  loadScript(src) {
    const headElement = document.head || document.getElementsByTagName('head')[0];
    const _importedScript = {};

    return new Promise((resolve, reject) => {
      if (src in _importedScript) {
        resolve();
        return;
      }
      const script = document.createElement('script');
      script.type = 'text/javascript';
      script.onerror = err => {
        headElement.removeChild(script);
        reject(new URIError(`The Script ${src} is no accessible.`));
      }
      script.onload = () => {
        _importedScript[src] = true;
        resolve();
      }
      headElement.appendChild(script);
      script.src = src;
    })
  }

  render() {
    return (
      <div className="wrap">
        <div className="player"></div>
      </div>
    )
  }
}

export default Player;

Parameters

For more parameters, see Properties and Interface Documentation.

Other Branch Versions

In addition to the online general version of the player, we also offer other branch versions. These branch versions may exist for the following reasons:

• The branch version is in public beta and will be merged or replace the general version after the beta period.
• The branch version has certain features or technical implementations that cannot be merged into the general version.
• The branch version is customized for specific scenarios and only applicable to some customers.

Currently available Web player branch versions include:

Mobile H5 Player 1.0 Version

• The Mobile H5 Player 1.0 version is no longer maintained; it is recommended to use version 2.0.
• All examples currently use the Mobile H5 Player 2.0 version.
• To downgrade to the Mobile H5 Player 1.0 version, please consult Polyv after-sales engineers.

VRM13 Version Player

• The VRM13 version player adopts a new technical implementation, significantly enhancing the security of the PC H5 player. Click here for details.
• No longer compatible with IE browsers.
• The parameters, interfaces, and events supported by the player remain consistent with the online general version. Simply replace the JS file URL: replace <script src="//player.polyv.net/resp/vod-player/latest/player.js"></script> with <script src="//player.polyv.net/resp/vod-player-drm/canary/player.js"></script>.