整合文件

保利威雲點播 Web 播放器同時支援 Flash 和 HTML5 兩種播放模式，並可根據終端與瀏覽器環境自動選擇最佳播放模式，實現影片播放效果的多平台統一體驗。支援 FLV、MP4、HLS 等主流影片格式與協定，並結合保利威雲點播服務，提供加密影片播放等功能。

適配情況

保利威雲點播的轉碼服務，預設情況下會將上傳的影片轉碼為以下幾種格式：

• 非加密影片：MP4（H5 播放）、FLV（Flash 播放）
• 加密影片：HLS（H5 播放）、PTS（Flash 播放）

影片格式與平台支援情況如下：

1. PC 端 IE11（Windows 8.1+）及以上瀏覽器支援 HTML5 播放，低版本 IE 將切換至 FLASH 播放器；行動端不支援 Flash 播放器。
2. 影片編碼格式僅支援 H.264 編碼。
3. 若對影片設定不轉碼，播放器會直接播放影片原始檔，能否正常播放取決於觀眾瀏覽器支援的影片格式。

已知的 H5 適配問題

1. 設定自動播放無效，不會自動播放
   • 行動端瀏覽器中音訊自動播放一直是禁止的，目前通用的做法是透過使用者手動觸發播放（例如監聽使用者的點擊事件並呼叫 play 方法），但不排除某些特性的瀏覽器與 webview 允許自動播放。
   • 桌面端 Chrome 55+、Safari 11+ 版本的瀏覽器也都限制自動播放。
2. 行動端 H5 播放器自帶的皮膚在部分情況下無法顯示，導致無法使用播放器提供的部分控制功能（如畫質/倍速切換等）。
   • iOS 裝置在全螢幕播放影片時，會強制使用系統的播放器，此時無法顯示自帶的播放器皮膚。
   • 由於 Android 系統有眾多不同的定製版本，每個版本對 H5 video 標籤的實現都有差異，而且大多數的國內瀏覽器廠商，都會在影片播放時挾持 video 標籤，由瀏覽器內建播放器播放影片，所以在 Android 上播放影片的一致性相比 iOS 要差很多。在無法顯示自帶播放器皮膚的情況下，可以透過播放器提供的 API 介面來進行播放控制。
3. 音量調節功能在 iOS 和 Android 瀏覽器上無效。
4. 倍速播放功能，部分行動端瀏覽器不支援設定倍速，功能會失效，例如 Android 微信。

快速整合程式碼

不依賴任何前端 JS 函式庫，只需在頁面中引用以下 JS 檔案，即可進行播放器的初始化。

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>

線上執行

預設使用 H5 播放器，在 IE 及其他不支援的瀏覽器下自動切換 flash

需要相容 IE9 以下的播放器，可以使用以下程式碼（不再推薦，原因詳見：關於 Flash Player 即將停止服務的通知）

<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;

參數

更多參數請查看 屬性和介面說明。

其他分支版本

除了線上通用版本的播放器外，我們還提供一些其他分支版本的播放器。這些分支版本存在的原因可能有：

• 當前分支版本處於公測階段，公測期過後會合併或替換通用版本。
• 分支版本具有的某些特性或採用的技術實現方案無法合併到通用版本。
• 分支版本針對某類場景進行了功能定製，只適用於部分客戶。

目前可用的 Web 播放器分支版本有：

行動端 H5 播放器 1.0 版本

• 行動端 H5 播放器 1.0 版本目前已不再維護，建議使用 2.0 版本。
• 目前範例所使用的均為 2.0 版本行動端 H5 播放器。
• 若需降級到行動端 H5 播放器 1.0 版本，可諮詢保利威售後工程師。

VRM13 版本播放器

• VRM13 版本播放器採用了新的技術實現方案，大幅提升了 PC 端 H5 播放器的安全性，點此瞭解詳情。
• 不再相容 IE 瀏覽器
• 播放器支援的參數、介面、事件與線上通用版本播放器保持一致，只需替換 JS 檔案的路徑即可使用：由 <script src="//player.polyv.net/resp/vod-player/latest/player.js"></script> 替換為 <script src="//player.polyv.net/resp/vod-player-drm/canary/player.js"></script>。