阿里云视频的入门使用

最新推荐文章于 2023-08-07 13:22:27 发布

small_animation

最新推荐文章于 2023-08-07 13:22:27 发布

阅读量435

点赞数

分类专栏：组件 video 文章标签： html css3 javascript

本文链接：https://blog.csdn.net/small_animation/article/details/117303962

版权

组件同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

video

3 篇文章 0 订阅

订阅专栏

<!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 Online Settings</title>
		<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.3/skins/default/aliplayer-min.css" />
		<style type="text/css">
			.prism-player .prism-big-play-btn {
				transform: translate(-32px, 32px);
			}
		</style>
		<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.9.3/aliplayer-min.js">
		</script>
	</head>
	<body>
		<div class="prism-player" id="player-con"></div>
		<script>
			var player = new Aliplayer({
				"id": "player-con",
				"source": "http://clappr.io/highline.mp4",
				"width": "100%",
				"height": "500px",
				"autoplay": false,
				"isLive": false,
				"cover": "http://clappr.io/poster.png",
				"rePlay": false,
				"playsinline": true,
				"preload": true,
				"controlBarVisibility": "always",
				"useH5Prism": true,
				"disableSeek": true,
				"skinLayout": [{
						name: "bigPlayButton",
						align: "blabs",
						x: "50%",
						y: "50%"
					},
					{
						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: "subtitle",
								align: "tr",
								x: 15,
								y: 12
							},
							{
								name: "setting",
								align: "tr",
								x: 15,
								y: 12
							},
							{
								name: "volume",
								align: "tr",
								x: 5,
								y: 10
							}
						]
					}
				]
			}, function(player) {
				console.log("ready");
			});
			player.on('play', function(res) {
				getTime()
			})
			var timer = null;
			function getTime() {
				var currentTime = player.getCurrentTime();
				console.log(currentTime); //当前进度
				timer = setTimeout(getTime, 1000);
			}
			//清除定时器
			function clear() {
				if (timer) {
					clearTimeout(timer);
					timer = null;
				}
			}
			player.on('ended', function(e) {
				clear();
			});
			player.on('pause', function(e) {
				clear();
			});
			player.on('error', function(e) {
				clear();
			});
		</script>
	</body>

aliplayer参考文档demo
skinLayout参数的官方文档

small_animation

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
阿里云视频的入门使用

<!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,
复制链接

扫一扫