POLYV HTML5PLayer 代码集成 / 阿酷tony / 2025-5-29 / 长沙
保利威云点播HTML5播放器集成方案支持多平台统一播放体验,自动适配终端环境,兼容主流视频格式(FLV/MP4/HLS)。提供简洁的HTML/Vue/React集成方式,只需引入JS文件并初始化播放器即可使用。该方案支持响应式布局,适配Chrome/Firefox/Safari等主流浏览器及移动端环境。参数配置灵活,可自定义播放器尺寸和视频ID,适用于在线教育、企业直播等需视频保护的场景。
保利威云点播Web播放器支持纯HTM5播放代码集成和调用,并可以根据终端和浏览器环境自动选择最优播放模式,实现了视频播放效果的多平台统一播放体验。支持FLV、MP4、HLS等主流视频格式和协议。
TONY DEMO
TONY DEMO CENTER >> 演示实例
代码实例
html页面调用实例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>TONY DEMO CENTER</title>
</head>
<body>
<h1>TONE DEMO - HTML5 PLAYER</h1>
<div id="player"></div>
<script src="//player.polyv.net/resp/vod-player/latest/player.js"></script>
<script>
var w=800;
var player = polyvPlayer({
wrap: '#player',
width: w,
height: w*0.5625,
vid: 'b548797320a146a338ec653a86a49817_b' ,
});
</script>
</body>
</html>
图片截图效果
适配情况
保利威云点播的转码服务,在默认情况下会把上传的视频转码出以下几种格式:
- 非加密视频:MP4(H5播放)、FLV(Flash播放)
- 加密视频:HLS(H5播放)、PTS(Flash播放)
视频格式与平台支持情况如下:
浏览器/播放器 | Flash播放器(已停止更新) | H5播放器 |
---|---|---|
Chrome | ✔️ | ✔️ |
Firefox | ✔️ | ✔️ |
Edge | ✔️ | ✔️ |
IE | IE8+ | IE11+ for Windows 8.1+ |
Safari | ✔️ | ✔️ |
iOS Safari | ❌ | ✔️ |
iOS 微信、QQ | ❌ | ✔️ |
Android 微信、QQ | ❌ | ✔️ |
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>
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;
参数说明
参数 | 类型 | 默认值 | 说明 |
---|---|---|---|
wrap | string / HTMLElement | - | 页面上存在需要载入播放器的DOM元素或css选择器 |
width | number / string | 100% | 播放器的宽度,支持像素值和百分比两种类型 |
height | number / string | auto | 播放器的高度,支持像素值和百分比两种类型 |
vid | string | - | 云点播平台的视频唯一id |
[ 视频安全 ] 相关原创文章