125 lines
2.5 KiB
Plaintext
125 lines
2.5 KiB
Plaintext
<template>
|
|
<!-- 视频查看 待开发-->
|
|
<view class="content">
|
|
<view class="container">
|
|
<view class="form-sub">
|
|
<u-form ref="uForm" label-width="90px" class="demo-ruleForm" size="mini">
|
|
<view style="font-size: 15px; font-weight: bold;color: #3d4b70;margin-bottom: 10px;">视频服务播放</view>
|
|
<div id="player"></div>
|
|
</u-form>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
vodPlayerJs: 'https://player.polyv.net/resp/vod-player/latest/player.js',
|
|
vid: '',
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.vid = option.vid
|
|
},
|
|
mounted() {
|
|
this.loadPlayerScript(this.loadPlayer);
|
|
},
|
|
methods: {
|
|
loadPlayerScript(callback) {
|
|
if (!window.polyvPlayer) {
|
|
const myScript = document.createElement('script');
|
|
myScript.setAttribute('src', this.vodPlayerJs);
|
|
myScript.onload = callback;
|
|
document.body.appendChild(myScript);
|
|
} else {
|
|
callback();
|
|
}
|
|
},
|
|
loadPlayer() {
|
|
const polyvPlayer = window.polyvPlayer;
|
|
this.player = polyvPlayer({
|
|
wrap: '#player',
|
|
// width: 300,
|
|
with: '100%' ,
|
|
height: 300,
|
|
vid: this.vid,
|
|
});
|
|
},
|
|
},
|
|
destroyed() {
|
|
if (this.player) {
|
|
this.player.destroy();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.content {
|
|
background-color: #f4f7ff;
|
|
width: 100%;
|
|
/* #ifndef APP-PLUS */
|
|
height: calc(100vh - 44px - 50px); // 非APP平台下生效
|
|
/* #endif */
|
|
/* #ifdef APP-PLUS */
|
|
height: calc(100vh); // APP平台下生效
|
|
/* #endif */
|
|
}
|
|
|
|
.container {
|
|
padding: 20px 16px 10px 16px;
|
|
}
|
|
|
|
.form-sub {
|
|
/* margin: 20px 16px 10px 16px; */
|
|
/* border: 1px solid #EBEEF5; */
|
|
padding: 20px 10px 10px 10px;
|
|
/* box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px; */
|
|
background-color: #ffffff;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.demo-ruleForm>>>.u-form-item__body__left__content__label {
|
|
font-size: 14px;
|
|
color: #8e8b9c;
|
|
/* justify-content: flex-start; */
|
|
}
|
|
|
|
.demo-ruleForm>>>.u-form-item__body__left__content__ {
|
|
left: -11px;
|
|
top: 0px
|
|
}
|
|
|
|
.demo-ruleForm>>>.u-textarea__field {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.demo-ruleForm>>>.u-cell__title-text {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.demo-ruleForm-thr>>>.u-textarea {
|
|
padding: 9px 9px 25px 9px;
|
|
}
|
|
|
|
.demo-ruleForm-thr>>>.u-form-item__body__left__content__label {
|
|
font-size: 14px;
|
|
color: #8e8b9c;
|
|
/* justify-content: flex-start; */
|
|
}
|
|
|
|
.demo-ruleForm-thr>>>.u-form-item__body__left__content__ {
|
|
left: -11px;
|
|
top: 0px
|
|
}
|
|
|
|
.demo-ruleForm-thr>>>.u-textarea__field {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.demo-ruleForm-thr>>>.u-cell__title-text {
|
|
font-size: 14px;
|
|
}
|
|
</style> |