网易七鱼付费吧
视.频播放器:阿里云Aliplayer
文档 : https://help.aliyun.com/document_detail/51991.html
简单配置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge" >
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
<title>Aliplayer功能展示</title>
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.7.2/skins/default/aliplayer-min.css" />
<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.7.2/aliplayer-min.js"></script>
</head>
<body>
<div id="player-con" class="prism-player"></div>
<script>
var heights = document.documentElement.clientHeight * 0.28 + "px";
var player = new Aliplayer({
id: "player-con", // 容器id
source: "http://player.pier39.cn/video/editor.mp4", //视.频地址
width: "60%", //播放器宽度
height: heights, //播放器高度
autoplay: false, //自动播放:否
isLive: false,
useH5Prism: true,
rePlay: false,
playsinline: true,
preload: true,
controlBarVisibility: "hover",
"extraInfo": {
"crossOrigin": "anonymous"
},
"skinLayout": [
{
"name": "bigPlayButton",
"align": "blabs",
"x": 30,
"y": 80
},
{
"name": "H5Loading",
"align": "cc"
},
{
"name": "errorDisplay",
"align": "tlabs",
"x": 0,
"y": 0
},
{
"name": "infoDisplay"
},
{
"name": "tooltip",
"align": "blabs",
"x": 0,
"y": 56
},
{
"name": "thumbnail"
},
{
"name": "controlBar",
"align": "blabs",
"x": 0,
"y": 0,
"children": [
{
"name": "progress",
"align": "blabs",
"x": 0,
"y": 44
},
{
"name": "playButton",
"align": "tl",
"x": 15,
"y": 12
},
{
"name": "timeDisplay",
"align": "tl",
"x": 10,
"y": 7
},
{
"name": "fullScreenButton",
"align": "tr",
"x": 10,
"y": 12
},
{
"name": "volume",
"align": "tr",
"x": 5,
"y": 10
},
{
"name": "snapshot",
"align": "tr",
"x": 10,
"y": 12
}
]
}
]
}, function (player) {
console.log("播放器创建成功");
});
/* h5截图按钮, 截图成功回调 */
player.on('snapshoted', function (data) {
var pictureData = data.paramData.base64
var downloadElement = document.createElement('a')
downloadElement.setAttribute('href', pictureData)
var fileName = 'Aliplayer' + Date.now() + '.png'
downloadElement.setAttribute('download', fileName)
downloadElement.click()
pictureData = null
})
/* 单击屏幕,播放/暂停 */
var _video = document.querySelector('video');
player.on('play', function(e) {
_video.removeEventListener('click', play);
_video.addEventListener('click', pause);
});
player.on('pause', function(e) {
_video.removeEventListener('click', pause);
_video.addEventListener('click', play)
});
function play() {
if (player) player.play();
}
function pause() {
if (player) player.pause();
}
</script>
</body>
</html>
在线客服系统:网易七鱼
官网地址 : http://qiyukf.com/online
只需要引入页面一段 js 代码,其他的都是在网站内部可视化配置的,很方便
QCode09-04 14:38
Code大师09-04 14:50
不写代码你养我啊08-23 11:14
不写代码你养我啊09-17 18:02
要学习了06-18 18:13