帮我用html写一个阿里云播放器例子
时间: 2023-05-21 09:06:06 浏览: 66
当然可以,以下是阿里云播放器的一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>阿里云播放器示例</title>
<script src="https://player.aliyun.com/js/cdn/aliplayer-min.js"></script>
<link rel="stylesheet" href="https://player.alicdn.com/aliplayer/css/aliplayer-min.css" />
<style type="text/css">
#player {
width: 960px;
height: 540px;
}
</style>
</head>
<body>
<div id="player"></div>
<script type="text/javascript">
var player = new Aliplayer({
id: 'player',
source: 'http://player.alicdn.com/video/aliyunmedia.mp4',
width: '100%',
height: '100%',
autoplay: true,
isLive: false,
rePlay: false,
playsinline: true,
preload: true,
controlBarVisibility: 'hover',
useH5Prism: true,
skinLayout: [
{
"name": "bigPlayButton",
"align": "cc",
"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": "tlabs",
"x": 0,
"y": 44
},
{
"name": "playButton",
"align": "tl",
"x": 15,
"y": 12
},
{
"name": "fullScreenButton",
"align": "tr",
"x": 10,
"y": 12
},
{
"name": "volume",
"align": "tr",
"x": 5,
"y": 10
}
]
}
]
}, function (player) {
console.log('播放器创建好了。')
});
</script>
</body>
</html>
```
你只需要将代码复制到一个HTML文件中,用浏览器打开即可看到播放器效果。