阿里云Prismplayer-Web播放器的使用
Posted web喵神的博客
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了阿里云Prismplayer-Web播放器的使用相关的知识，希望对你有一定的参考价值。
Prismplayer是一套在线视频播放技术方案，同时支持Flash和html5两种播放技术，可对播放器进行功能配置和皮肤定制。其在线使用文档地址为：https://help.aliyun.com/document_detail/43549.html?spm=5176.video44236.6.128.tLFTj1
以下为本人按照文档写的一个小demo。本例中引入的js是H5版本的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/1.7.4/skins/default/index.css" />
<script src="https://g.alicdn.com/de/prismplayer/1.7.4/prism-h5-min.js"></script>
<style>
.video-wrap {
position: relative;
width: 800px;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="video-wrap">
<div id="J_prismPlayer" class="prism-player"></div>
</div>
<script>
// 初始化播放器
var player = new prismplayer({
id: "J_prismPlayer", // 容器id
source: "http://cloud.video.taobao.com/play/u/2554695624/p/1/e/6/t/1/fv/102/28552077.mp4", //视频地址
cover: "http://cdn.img.mtedu.com/images/assignment/day_3.jpg", //播放器封面图
autoplay: false, // 是否自动播放
width: "100%", // 播放器宽度
height: "450px", // 播放器高度
playsinline: true,
seekable: true,
skinLayout: [{
"name": "bigPlayButton",
"align": "cc",
//"x": 30,
//"y": 80
}, {
"align": "blabs",
"x": 0,
"y": 0,
"name": "controlBar",
"children": [
{
"align": "tl",
"x": 15,
"y": 26,
"name": "playButton"
}, {
"align": "tl",
"x": 10,
"y": 24,
"name": "timeDisplay"
}, {
"align": "tr",
"x": 20,
"y": 25,
"name": "fullScreenButton"
}, {
"align": "tr",
"x": 20,
"y": 25,
"name": "volume"
},
{
"name": "progress",
"align": "tlabs",
"x": 0,
"y": 0
}
]
}]
});
</script>
</body>
</html>
以上是关于阿里云Prismplayer-Web播放器的使用的主要内容，如果未能解决你的问题，请参考以下文章