216 lines
8.3 KiB
Vue
216 lines
8.3 KiB
Vue
<template>
|
||
<div>
|
||
<div class="fb tc f20 linheight40">1111</div>
|
||
|
||
<!-- 视频形式的任务 -->
|
||
<div class="taskinfo">
|
||
<div id="player-con" style="height: 800px;"></div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
// importScripts('@/static/aliplayer/aliplayer-min.js')
|
||
export default {
|
||
data() {
|
||
return {
|
||
videoTitle: "",
|
||
authId:
|
||
"eyJTZWN1cml0eVRva2VuIjoiQ0FJUzFBTjFxNkZ0NUIyeWZTaklyNWVFRWNudzNPZEF3N0dUY1ZiVGluTWhiZGx1bzdicXB6ejJJSHBLZVhkdUFlQVhzL28wbW1oWjcvWVlsck1xRmNjWkdoQ2NOSkF2dnNVT29GditKcExGc3QySjZyOEpqc1VDbytjdWswZXBzdlhKYXNEVkVmbDJFNVhFTWlJUi8wMGU2TC8rY2lyWXBUWEhWYlNDbFo5Z2FQa09Rd0M4ZGtBb0xkeEtKd3hrMnQxNFVtWFdPYVNDUHdMU2htUEJMVXhtdldnR2wyUnp1NHV5M3ZPZDVoZlpwMXI4eE80YXhlTDBQb1AyVjgxbExacGxlc3FwM0k0U2M3YmFnaFpVNGdscjhxbHg3c3BCNVN5Vmt0eVdHVWhKL3phTElvaXQ3TnBqZmlCMGVvUUFQb3BGcC9YNmp2QWF3UExVbTliWXhncGhCOFIrWGo3RFpZYXV4N0d6ZW9XVE84MCthS3p3TmxuVXo5bUxMZU9WaVE0L1ptOEJQdzQ0RUxoSWFGMElVRXh6RVcrRmV2TC9wZ21RUGwvK0ZKTG9pdjltamNCSHFIeno1c2VQS2xTMVJMR1U3RDBWSUpkVWJUbHpiVUJMZ3pLNUl2NWJMVmNTS3dJK1YreVBNYXgzYlFGRHI1M3ZzVGJiWHpaYjBtcHR1UG56ZHdKNFRXYnJna2VVdFB0a3BtbDlEUHd1MndOQ0o5K24zRzg5S0NnL1BlcnBGUVBjTkFVNXBYc1R6UDdrcHF2YUtLWHRjWXM4MFY0NVVndUtwQUgyS2poclprQ2ZxNk5sQnhQMmxNcTVQbzNPOGMwSWVHTWFnQUZZUjM0ZGY2aWdud3p2TTNaeUdxdWtxcmdmMXM4SHRiYnBvWldJSEhKd2t1OHJlMTg5dnlKMmdSQmRyWmJkd2NFVjhiUEZNYithWTVWTm5MOUZGSk85N0FrQitCZGk0ZktrN0VpNXdMVCs2Q29XUEZZOXZaajZJR3BIdERxY21scW1FS09FVHNlZkxnWXNzbDAzb0lzMFdvRlYzc2RPeDl3MDR2Q3Y3YlZQVFNBQSIsIkF1dGhJbmZvIjoie1wiQ0lcIjpcIkpVb25xR25CR242cU5YRjgyMzE1b25YRlRyUExoL0l3THVrSERNbEhBVEk2a0EyYmgyell1VENRa0VUVWNWZjhcIixcIkNhbGxlclwiOlwiNkxxRjRSdUk3S0Z1aDhVN3lQajBUNWZQMSs5d2FUdWNCT3Urd0ZHUEc5TT1cIixcIkV4cGlyZVRpbWVcIjpcIjIwMjQtMDQtMjNUMTA6NDU6NTJaXCIsXCJNZWRpYUlkXCI6XCI2ZjhlYzhkMDhjZDM3MWVkYmZlNDA3NjRhMGZkMDEwMlwiLFwiUGxheURvbWFpblwiOlwidmlkZW8udGFpaHVtZWQuY29tXCIsXCJTaWduYXR1cmVcIjpcIndnSExCMytZNzEvSXZJQ1lOQmdPUm8xbUhVRT1cIn0iLCJWaWRlb01ldGEiOnsiU3RhdHVzIjoiTm9ybWFsIiwiVmlkZW9JZCI6IjZmOGVjOGQwOGNkMzcxZWRiZmU0MDc2NGEwZmQwMTAyIiwiVGl0bGUiOiLnrKzkuInorrLvvJrkuInmsJTkuYvnuqoiLCJDb3ZlclVSTCI6Imh0dHBzOi8vdmlkZW8udGFpaHVtZWQuY29tLzZmOGVjOGQwOGNkMzcxZWRiZmU0MDc2NGEwZmQwMTAyL3NuYXBzaG90cy9lNTM5ZmJjNzFhNzk0ZGFkYmI3MzUyZjBhMjU5YjNmYy0wMDAwNS5qcGciLCJEdXJhdGlvbiI6Nzk4LjM3Mn0sIkFjY2Vzc0tleUlkIjoiU1RTLk5UMVpzRDE4YXRzeHNwYm5zdGFWQkxzQUUiLCJQbGF5RG9tYWluIjoidmlkZW8udGFpaHVtZWQuY29tIiwiQWNjZXNzS2V5U2VjcmV0IjoiR3NVMUhiaXZiNEpaY3ZLREppNkdQWlRjUlQyWmhqR21ONnBNUFdSQmVGOUciLCJSZWdpb24iOiJjbi1zaGFuZ2hhaSIsIkN1c3RvbWVySWQiOjE2MDQ3NDAxMzc4OTE5MDd9",
|
||
videoId: "6f8ec8d08cd371edbfe40764a0fd0102"
|
||
};
|
||
},
|
||
|
||
// //页面显示
|
||
mounted() {
|
||
const link = document.createElement("link");
|
||
link.rel = "stylesheet";
|
||
link.href =
|
||
"https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.1/skins/default/aliplayer-min.css";
|
||
document.head.appendChild(link);
|
||
const script = document.createElement("script");
|
||
// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
|
||
script.src =
|
||
"https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.1/aliplayer-min.js";
|
||
|
||
document.head.appendChild(script);
|
||
// // setTimeout(() => {
|
||
this.getLive();
|
||
// // }, 3000)
|
||
},
|
||
|
||
//第一次加载
|
||
onLoad(options) {
|
||
// this.videoId = options.videoId
|
||
// this.videoTitle = options.videoTit
|
||
},
|
||
|
||
methods: {
|
||
// 获取数据
|
||
|
||
getLive() {
|
||
let player = new Aliplayer(
|
||
{
|
||
// "id": "player-con",
|
||
// "source": "//player.alicdn.com/video/aliyunmedia.mp4",
|
||
// "width": "100%",
|
||
// "height": "500px",
|
||
// "autoplay": true,
|
||
// "isLive": false,
|
||
// "rePlay": false,
|
||
// "playsinline": true,
|
||
// "preload": true,
|
||
// "controlBarVisibility": "hover",
|
||
// "useH5Prism": true,
|
||
|
||
id: "player-con",
|
||
vid: this.videoId, // 必选参数，可以通过点播控制台（路径：媒资库>音/视频）查询。示例：1e067a2831b641db90d570b6480f****。
|
||
playauth: this.authId, // 必选参数，参数值可通过调用GetVideoPlayAuth接口获取。
|
||
encryptType: 1, // 必选参数，当播放私有加密流时需要设置本参数值为1。其它情况无需设置。
|
||
playConfig: {
|
||
EncryptType: "AliyunVoDEncryption"
|
||
}, // 当您输出的M3U8流中，含有其他非私有加密流时，需要指定此参数。
|
||
// // authTimeout: 7200, // 可选参数，播放地址的有效时长，单位：秒。该时长会覆盖在视频点播控制台设置的URL鉴权的有效时长。如果不传，则取默认值7200。如需设置此参数，请确保该时间大于视频的实际时长，防止播放地址在播放完成前过期。
|
||
// // "source": videoId,
|
||
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");
|
||
}
|
||
);
|
||
}
|
||
},
|
||
|
||
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/apsara-media-box/imp-web-player/2.20.1/skins/default/aliplayer-min.css')
|
||
// loadScriptString('https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.1/aliplayer-min.js')
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<script>
|
||
export default {
|
||
//页面显示
|
||
mounted() {
|
||
// 动态引入较大类库避免影响页面展示
|
||
},
|
||
methods: {
|
||
receiveMsg(newValue, oldValue, ownerVm, vm) {
|
||
// //数据变化
|
||
// console.log('newValue', newValue)
|
||
// console.log('oldValue', oldValue)
|
||
// console.log('ownerVm', ownerVm)
|
||
// console.log('vm', vm)
|
||
},
|
||
checkValue() {
|
||
console.log(this.authId, "1111");
|
||
if (!this.authId) {
|
||
setTimeout(() => {
|
||
this.checkValue();
|
||
}, 1000);
|
||
} else {
|
||
this.getLive();
|
||
}
|
||
}
|
||
// 阿里云播放
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* @import "@/static/aliplayer/aliplayer-min.css"; */
|
||
|
||
#myVideo {
|
||
width: 100%;
|
||
}
|
||
</style>
|