grain-Edu-Note part16 aliyun视频点播组件扩展跑马灯
韩智明
扩展组件
<script charset="utf-8" src="https://player.alicdn.com/aliplayer/presentation/js/aliplayercomponents.min.js">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>aliyun_player_pro</title>
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css"/>
</head>
<body>
<div class="prism-player" id="J_prismPlayer"></div>
<script charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js"></script>
<!-- 阿里云视频播放组件扩展 -->
<script charset="utf-8" src="https://player.alicdn.com/aliplayer/presentation/js/aliplayercomponents.min.js"></script>
<script>
var player = new Aliplayer({
id: 'J_prismPlayer',
width: '100%',
height: '500px',
source: 'https://outin-9f83bb9b0d0511eb869800163e1c955c.oss-cn-shanghai.aliyuncs.com/b0212854e00645f9ba83a431dbe232ac/2f52182b82744f40be3f009a4fd64bb2-98033e8c84be1e890a3784e5cdfd54f8-fd.mp4?Expires=1602583916&OSSAccessKeyId=LTAI8bKSZ6dKjf44&Signature=FcD0%2BODAcgJQcetHpxJ2lE28ANY%3D',
components: [{
name: 'BulletScreenComponent',
type: AliPlayerComponent.BulletScreenComponent,
/** Descriptions of the scrolling text component parameters: text, style, bulletPosition
* text: The scrolling text
* style: The style of the scrolling text
* bulletPosition: The position of the scrolling text. Valid values: 'top', 'bottom', and 'random'. The default is 'random'.
*/
args: ['欢迎来到谷粒学院', {fontSize: '16px', color: '#00c1de'}, 'random']
}]
// 播放配置
},function(player){
console.log("播放器创建好了。")
});
</script>
</body>
</html>
类似资料：