引入外部阿里云的js以及css,如下引入:

created() {
// 创建引入阿里云播放文件
function loadScriptString(src) {
	var script = document.createElement('script') //创建一个script标签
	script.type = 'text/javascript'
	script.src = src
	document.getElementsByTagName('head')[0].appendChild(script)
}

function loadLinkString(src) {
	var link = document.createElement('link') //创建一个link标签
	link.rel = 'stylesheet'
	link.href = src
	document.getElementsByTagName('head')[0].appendChild(link)
}
// 使用阿里云播放器
loadLinkString('https://g.alicdn.com/de/prismplayer/2.9.19/skins/default/aliplayer-min.css')
loadScriptString('https://g.alicdn.com/de/prismplayer/2.9.19/aliplayer-min.js')
},

然后使用,我是在onload中调用的,但是页面加载的比较慢呢个js还没引入进去这个就执行了,所以我就用了下定时器。

onLoad(options) {
setTimeout(()=>{
		this.getLive(options.id)
	}, 30)
},

然后方法,以下是我们主管发的,我直接ctrl的。

methods: {
	getLive(id) {
		var player = new Aliplayer({
			"id": "player-con",
			"source": 视频地址,
			"width": "100%",
			"height": "500px",
			"autoplay": true,
			"isLive": false,
			"cover": "",
			"rePlay": false,
			"playsinline": true,
			"preload": true,
			"controlBarVisibility": "hover",
			"useH5Prism": true,
			"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
						}
					]
				}
			]
		}, function(player) {
			console.log("The player is created");
		});

	}

}
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐