推荐的-视.频播放器以及在线客服

09-17 18:02 1467浏览

举报 T字号

大字

中字

小字

视.频播放器:阿里云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 代码,其他的都是在网站内部可视化配置的,很方便

2人推荐

周明润

网易七鱼付费吧

推荐的-视.频播放器以及在线客服

相关课程更多>

作者相关文章更多>

推荐相关文章更多>

发评论

举报

登录 注册

推荐的-视.频播放器以及在线客服

相关课程 更多>

作者相关文章更多>

推荐相关文章更多>

发评论

举报

登录注册

相关课程更多>