95 lines
4.4 KiB
Vue
95 lines
4.4 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>
|
||
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);
|
||
this.getLive();
|
||
},
|
||
methods: {
|
||
// 获取数据
|
||
getLive() {
|
||
let player = new Aliplayer(
|
||
{
|
||
id: "player-con",
|
||
vid: this.videoId, // 必选参数，可以通过点播控制台（路径：媒资库>音/视频）查询。示例：1e067a2831b641db90d570b6480f****。
|
||
playauth: this.authId, // 必选参数，参数值可通过调用GetVideoPlayAuth接口获取。
|
||
encryptType: 1, // 必选参数，当播放私有加密流时需要设置本参数值为1。其它情况无需设置。
|
||
playConfig: {
|
||
EncryptType: "AliyunVoDEncryption"
|
||
}, // 当您输出的M3U8流中，含有其他非私有加密流时，需要指定此参数。
|
||
width: "100%"
|
||
},
|
||
function(player) {
|
||
console.log("The player is created");
|
||
}
|
||
);
|
||
}
|
||
},
|
||
|
||
created() {
|
||
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<script>
|
||
export default {
|
||
//页面显示
|
||
mounted() {
|
||
// 动态引入较大类库避免影响页面展示
|
||
},
|
||
methods: {
|
||
receiveMsg(newValue, oldValue, ownerVm, vm) {
|
||
|
||
},
|
||
checkValue() {
|
||
console.log(this.authId, "1111");
|
||
if (!this.authId) {
|
||
setTimeout(() => {
|
||
this.checkValue();
|
||
}, 1000);
|
||
} else {
|
||
this.getLive();
|
||
}
|
||
}
|
||
// 阿里云播放
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
#myVideo {
|
||
width: 100%;
|
||
}
|
||
</style>
|