uniapp中使用阿里云视频点播功能
引入外部阿里云的js以及css,如下引入:created() {// 创建引入阿里云播放文件function loadScriptString(src) {var script = document.createElement('script') //创建一个script标签script.type = 'text/javascript'script.src = srcdocument.getEle
·
引入外部阿里云的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");
});
}
}
更多推荐
已为社区贡献21条内容
所有评论(0)