Integration Documentation

Polyv Cloud Live Web Player supports both Flash and HTML5 playback modes, automatically selecting the optimal mode based on the terminal and browser environment, achieving a unified multi-platform video playback experience. It supports mainstream video formats and protocols such as FLV, RTMP, and HLS, and integrates with Polyv Cloud Live services to provide smooth live video streaming.

Quick Integration

Run Online

js demo

<div id="player"></div>
<script src="//player.polyv.net/resp/live-h5-player/latest/liveplayer.min.js"></script>
<script>
  var player = polyvLivePlayer({
    wrap: '#player',
    width: 800,
    height: 533,
    uid: 'uid',
    vid: 'vid'
  });
</script>

The H5 player is used by default, automatically switching to Flash in IE and other unsupported browsers.

For players that need to be compatible with IE10 and below, use the following code:

<script src='https://player.polyv.net/livescript/liveplayer.js'></script>
<div id='player'></div>
<script>
var player = polyvObject('#player').livePlayer({
    width: '800',
    height: '533',
    uid: 'uid',
    vid: 'vid'
});
</script>

vue demo

<template>
  <div id="player"></div>
</template>
<script>
export default {
  data() {
    return {
      playerJs: 'https://player.polyv.net/resp/live-h5-player/latest/liveplayer.min.js',
      uid:'uid',
      vid:'vid'
    };
  },

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

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

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

react demo

import React from 'react';

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

  componentDidMount() {
    if(!window.polyvLivePlayer){
      this.loadScript('https://player.polyv.net/resp/live-h5-player/latest/liveplayer.min.js')
      .then(() =>{
        this.loadPlayer();
      });
    }
  }

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

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

  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;