|
|
@@ -192,7 +192,45 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div v-for="(i, codex) in l.content" :key="codex + 'co'">
|
|
|
- <div class="answerTxt" v-html="i"></div>
|
|
|
+ <iframe
|
|
|
+ v-if="getFileExtension(i) == 'PDF'"
|
|
|
+ style="width: 90%; height: 500px; border: none"
|
|
|
+ :src="
|
|
|
+ 'https://cloud.cocorobo.cn/pdf.js/web/viewer.html?file=' +
|
|
|
+ encodeURIComponent(i)
|
|
|
+ "
|
|
|
+ ></iframe>
|
|
|
+
|
|
|
+ <iframe
|
|
|
+ v-if="words.indexOf(getFileExtension(i)) != -1"
|
|
|
+ style="width: 90%; height: 500px; border: none"
|
|
|
+ :src="
|
|
|
+ 'https://view.officeapps.live.com/op/view.aspx?src=' +
|
|
|
+ encodeURIComponent(i)
|
|
|
+ "
|
|
|
+ frameborder="0"
|
|
|
+ ></iframe>
|
|
|
+
|
|
|
+
|
|
|
+ <img
|
|
|
+ @click.stop="previewImg(i)"
|
|
|
+ style="max-width: 200px"
|
|
|
+ v-if="pictures.indexOf(getFileExtension(i)) != -1 "
|
|
|
+ :src="i" alt="">
|
|
|
+
|
|
|
+ <div v-if="xianObj.indexOf(getFileExtension(i)) != -1 && TxtMd" >{{ TxtMd }}</div>
|
|
|
+
|
|
|
+ <video-player
|
|
|
+ v-if="getFileExtension(i) == 'MP4'"
|
|
|
+ class="video-player vjs-custom-skin"
|
|
|
+ :playsinline="true"
|
|
|
+ :options="playerOptions"
|
|
|
+ @play="onPlayerPlay($event)"
|
|
|
+ style="width: 90%; height: 500px; margin: 0 0 0 30px"
|
|
|
+ ></video-player>
|
|
|
+
|
|
|
+ <div class="answerTxt" v-html="i"></div>
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
<div
|
|
|
@@ -748,6 +786,46 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+
|
|
|
+const getFile = url => {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ var credentials = {
|
|
|
+ accessKeyId: "AKIATLPEDU37QV5CHLMH",
|
|
|
+ secretAccessKey: "Q2SQw37HfolS7yeaR1Ndpy9Jl4E2YZKUuuy2muZR"
|
|
|
+ }; //秘钥形式的登录上传
|
|
|
+ window.AWS.config.update(credentials);
|
|
|
+ window.AWS.config.region = "cn-northwest-1"; //设置区域
|
|
|
+ let url2 = url;
|
|
|
+ let _url2 = "";
|
|
|
+ if (
|
|
|
+ url2.indexOf("https://view.officeapps.live.com/op/view.aspx?src=") != -1
|
|
|
+ ) {
|
|
|
+ _url2 = url2.split(
|
|
|
+ "https://view.officeapps.live.com/op/view.aspx?src="
|
|
|
+ )[1];
|
|
|
+ } else {
|
|
|
+ _url2 = url2;
|
|
|
+ }
|
|
|
+ var s3 = new window.AWS.S3({ params: { Bucket: "ccrb" } });
|
|
|
+ let name = decodeURIComponent(
|
|
|
+ _url2.split("https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/")[1]
|
|
|
+ );
|
|
|
+ var params = {
|
|
|
+ Bucket: "ccrb",
|
|
|
+ Key: name
|
|
|
+ };
|
|
|
+ s3.getObject(params, function(err, data) {
|
|
|
+ if (err) {
|
|
|
+ console.log(err, err.stack);
|
|
|
+ resolve({ data: 1 });
|
|
|
+ } else {
|
|
|
+ const fileContent = data.Body.toString("utf-8");
|
|
|
+ resolve({ data: fileContent });
|
|
|
+ } // sxuccessful response
|
|
|
+ });
|
|
|
+ // axios({
|
|
|
+ });
|
|
|
+};
|
|
|
export default {
|
|
|
props: {
|
|
|
id: {
|
|
|
@@ -776,14 +854,42 @@ export default {
|
|
|
workEvaList: [],
|
|
|
// 上一个下一个学生位置
|
|
|
positP: 0,
|
|
|
-
|
|
|
+ TxtMd:'',
|
|
|
dyList: [],
|
|
|
courseName: "",
|
|
|
workList: [],
|
|
|
CState: 0,
|
|
|
tableData: [],
|
|
|
loading: false,
|
|
|
- resData: {}
|
|
|
+ resData: {},
|
|
|
+ playerOptions: {
|
|
|
+ playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
|
|
|
+ autoplay: false, //如果true,浏览器准备好时开始回放。
|
|
|
+ muted: false, // 默认情况下将会消除任何音频。
|
|
|
+ loop: false, // 导致视频一结束就重新开始。
|
|
|
+ preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
|
|
|
+ language: "zh-CN",
|
|
|
+ aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
|
|
|
+ fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
|
|
|
+ sources: [
|
|
|
+ {
|
|
|
+ type: "video/mp4", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目 || "video/ogg"|| "video/webm"
|
|
|
+ src: "" //url地址require("../../../assets/media/aaa.mp4")
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ // poster: require("../../../assets/tu31.png"), //你的封面地址
|
|
|
+ // poster: dataRes.imgUrl, //你的封面地址
|
|
|
+ notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
|
|
|
+ controlBar: {
|
|
|
+ timeDivider: true, //当前时间和持续时间的分隔符
|
|
|
+ durationDisplay: true, //显示持续时间
|
|
|
+ remainingTimeDisplay: false, //是否显示剩余时间功能
|
|
|
+ fullscreenToggle: true //全屏按钮
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xianObj: [ "MD", "TXT"],
|
|
|
+ words:["DOCX","XLSX", "PPT" ,"PPTX"],
|
|
|
+ pictures:["JPG", "PNG" ,"JPEG"]
|
|
|
};
|
|
|
},
|
|
|
|
|
|
@@ -895,6 +1001,27 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ onPlayerPlay() {},
|
|
|
+
|
|
|
+ // 作业提交进行判断展示
|
|
|
+ getFileExtension(fileName) {
|
|
|
+ let der = fileName.slice(fileName.lastIndexOf(".") + 1).toUpperCase()
|
|
|
+ console.log('getFileExtension',der);
|
|
|
+
|
|
|
+ if (der == 'MP4') {
|
|
|
+ this.playerOptions.sources[0].src = fileName;
|
|
|
+ return der;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.xianObj.indexOf(der) != -1) {
|
|
|
+ getFile(fileName).then(res => {
|
|
|
+ this.TxtMd = res.data;
|
|
|
+ });
|
|
|
+ return der;
|
|
|
+ }
|
|
|
+
|
|
|
+ return der;
|
|
|
+ },
|
|
|
// 时间戳转时间
|
|
|
convertToTimestamp(val) {
|
|
|
const date = new Date(val);
|
