|
@@ -207,6 +207,14 @@
|
|
|
>
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
+ <div v-if="listData.recordingUrl" style="margin-top: 10px">
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ type="warning"
|
|
|
+ @click="watchVideo(listData.recordingUrl)"
|
|
|
+ >视频预览</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
</el-form-item>
|
|
|
<el-form-item
|
|
|
label="节时长"
|
|
@@ -270,20 +278,43 @@
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
+ <el-dialog
|
|
|
+ :visible.sync="diavos"
|
|
|
+ width="840px"
|
|
|
+ @opened="isOkBf"
|
|
|
+ :show-close="false"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ >
|
|
|
+ <div slot="title" class="hearders">
|
|
|
+ <div class="leftTitle">视频预览</div>
|
|
|
+ <div class="rightBoxs">
|
|
|
+ <img src="@/assets/images/Close@2x.png" alt="" @click="clears" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div id="player"></div>
|
|
|
+ </div>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="clears">取 消</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { uploadFile } from '@/utils/uopladFile.js'
|
|
|
+import { uploadFile } from "@/utils/uopladFile.js";
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ vodPlayerJs: "https://player.polyv.net/script/player.js",
|
|
|
+ vid: "",
|
|
|
+ diavos: false,
|
|
|
fileSetting: {
|
|
|
- desc: 'i am desc', // 描述
|
|
|
- cataid: '1639399775001', // 分类ID 可以后端传递 也可以不写 或写死
|
|
|
- tag: 'i am tag', // 标签
|
|
|
+ desc: "i am desc", // 描述
|
|
|
+ cataid: "1639399775001", // 分类ID 可以后端传递 也可以不写 或写死
|
|
|
+ tag: "i am tag", // 标签
|
|
|
luping: 0, // 是否开启视频课件优化处理,对于上传录屏类视频清晰度有所优化:0为不开启,1为开启
|
|
|
- keepsource: 1 // 是否源文件播放(不对视频进行编码):0为编码,1为不编码
|
|
|
+ keepsource: 1, // 是否源文件播放(不对视频进行编码):0为编码,1为不编码
|
|
|
},
|
|
|
sectionTypeOptions: [
|
|
|
{
|
|
@@ -352,6 +383,55 @@ export default {
|
|
|
this.getDict();
|
|
|
},
|
|
|
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() {
|
|
|
+ var self = this;
|
|
|
+ const polyvPlayer = window.polyvPlayer;
|
|
|
+ self.player = polyvPlayer({
|
|
|
+ wrap: "#player",
|
|
|
+ width: 800,
|
|
|
+ height: 533,
|
|
|
+ vid: self.vid,
|
|
|
+ teaser_show: 0,
|
|
|
+ playsafe: function (vid, next) {
|
|
|
+ self.$api.obtainpolyvvideosign(vid).then((res) => {
|
|
|
+ next(res.data);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @param {String} 关闭视频窗口-销毁实例
|
|
|
+ */
|
|
|
+ clears() {
|
|
|
+ this.diavos = false;
|
|
|
+ if (this.player) {
|
|
|
+ this.player.destroy();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @param {String} 视频查看
|
|
|
+ */
|
|
|
+ watchVideo(url) {
|
|
|
+ if (!url) {
|
|
|
+ this.$message.warning("请检查URL地址是否输入完整");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.vid = url;
|
|
|
+ this.diavos = true;
|
|
|
+ },
|
|
|
+ isOkBf() {
|
|
|
+ this.loadPlayerScript(this.loadPlayer);
|
|
|
+ },
|
|
|
importMoble(event) {
|
|
|
// var self = this;
|
|
|
var file = event.target.files[0];
|
|
@@ -359,8 +439,8 @@ export default {
|
|
|
// formData.append("file", file);
|
|
|
// console.log(formData);
|
|
|
if (!event.target.value) {
|
|
|
- this.$message.error('请选择您要上传的文件')
|
|
|
- return false
|
|
|
+ this.$message.error("请选择您要上传的文件");
|
|
|
+ return false;
|
|
|
}
|
|
|
/**
|
|
|
* @param: event.target.files -> 传递的文件list
|
|
@@ -368,8 +448,8 @@ export default {
|
|
|
* @param: 回调
|
|
|
*/
|
|
|
uploadFile(file, this.fileSetting, (index, event) => {
|
|
|
- this.listData.recordingUrl = event.vid
|
|
|
- })
|
|
|
+ this.listData.recordingUrl = event.vid;
|
|
|
+ });
|
|
|
},
|
|
|
getMessage() {
|
|
|
if (!this.courType) {
|
|
@@ -755,6 +835,95 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
+/deep/.el-button {
|
|
|
+ border-radius: 8px;
|
|
|
+}
|
|
|
+/deep/.el-dialog {
|
|
|
+ border-radius: 8px;
|
|
|
+ .el-dialog__header {
|
|
|
+ padding: 0;
|
|
|
+ .hearders {
|
|
|
+ height: 40px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0px 18px 0px 20px;
|
|
|
+ border-bottom: 1px solid #e2e2e2;
|
|
|
+ .leftTitle {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #2f4378;
|
|
|
+ }
|
|
|
+ .rightBoxs {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ img {
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ margin-left: 13px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-dialog__footer {
|
|
|
+ padding: 0;
|
|
|
+ .dialog-footer {
|
|
|
+ padding: 0px 40px;
|
|
|
+ height: 70px;
|
|
|
+ border-top: 1px solid #e2e2e2;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.imgBox {
|
|
|
+ width: 100%;
|
|
|
+ // height: 210px;
|
|
|
+ border: 1px solid #e2e2e2;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 8px 8px 3px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ .imgLabel {
|
|
|
+ flex: 1;
|
|
|
+ width: 100%;
|
|
|
+ border: 1px dotted #e2e2e2;
|
|
|
+ color: #999;
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+ border-radius: 8px;
|
|
|
+ .msPhoto {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ max-width: 100%;
|
|
|
+ max-height: 270px;
|
|
|
+ img {
|
|
|
+ max-width: 100%;
|
|
|
+ max-height: 270px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .imgbbx {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ i {
|
|
|
+ font-weight: bold;
|
|
|
+ margin: 14px 0;
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ margin: 5px 0px;
|
|
|
+ }
|
|
|
+}
|
|
|
.boxWidth {
|
|
|
width: 770px;
|
|
|
}
|