SxhGroup / sxhPersonalCenterZLB

Download as
Browse Code »

Commit 349503e8f2acaa524bdfd1546b351190f9fbe69f

Authored by 边
1 parent 1d7251f4
Exists in master

视频播放

Showing 2 changed files with 36 additions and 13 deletions   Show diff stats
src/views/Yanxue/achievementsOne.vue
  Diff comments   View file @349503e
... ... @@ -124,6 +124,7 @@ export default {
124 124 .greyFont {
125 125 color: #999;
126 126 font-size: 24px;
  127 +
127 128 }
128 129 }
129 130 }
... ... @@ -167,12 +168,13 @@ export default {
167 168 .greyTime {
168 169 color: #999;
169 170 font-size: 24px;
170   - margin: 0 20px;
  171 + margin: 0 ;
171 172 }
172 173  
173 174 .greyFont {
174 175 color: #999;
175 176 font-size: 24px;
  177 + margin-left: 20px;
176 178 }
177 179 }
178 180 }
... ...
src/views/Yanxue/pageDetails.vue
  Diff comments   View file @349503e
... ... @@ -21,7 +21,7 @@
21 21 <!--视频-->
22 22 <div v-if="v.type == 2" class="typeTwo">
23 23 <div class="videoTwo" v-for="(x, y) in v.videoList" :key="y">
24   - <video controls >
  24 + <video controls :poster='imgUrl' preload="none">
25 25 <source :src="x" type="video/mp4" />
26 26 </video>
27 27 </div>
... ... @@ -39,7 +39,7 @@
39 39 import { ImagePreview } from "vant";
40 40 export default {
41 41 data() {
42   - return { arr: 0, modelList: [] ,background: ''};
  42 + return { arr: 0, modelList: [], background: "", imgUrl: "" };
43 43 },
44 44 methods: {
45 45 //获取数据
... ... @@ -50,13 +50,15 @@ export default {
50 50 })
51 51 .then((res) => {
52 52 if (res.data.success) {
  53 + this.imgUrl = res.data.data.imgUrl;
53 54 if (!res.data.data.background) {
54 55 this.background = res.data.data.imgUrl;
55   - }else {
  56 + } else {
56 57 this.background = res.data.data.background;
57 58 }
58 59 let arr = JSON.parse(res.data.data.modelList);
59 60 this.modelList = arr;
  61 + // this.showFrame();
60 62 } else {
61 63 this.$message.warning(res.data.message);
62 64 }
... ... @@ -78,13 +80,32 @@ export default {
78 80 id: this.$route.query.dataId,
79 81 })
80 82 .then((res) => {
81   - if(res.data.success) {
82   - console.log('阅读量成功')
83   - }else {
84   - console.log('阅读量失败')
  83 + if (res.data.success) {
  84 + console.log("阅读量成功");
  85 + } else {
  86 + console.log("阅读量失败");
85 87 }
86   - })
87   - }
  88 + });
  89 + },
  90 + //视频
  91 + showFrame() {
  92 + const video = document.createElement("video");
  93 + console.log("sfsddf");
  94 + video.addEventListener("loadeddata", function (e) {
  95 + canvas.width = this.videoWidth;
  96 + canvas.height = this.videoHeight;
  97 + width = this.videoWidth;
  98 + height = this.videoHeight;
  99 + ctx.drawImage(this, 0, 0, width, height);
  100 + var src = canvas.toDataURL("image/jpeg");
  101 + console.log("sfsf");
  102 + img.src = src;
  103 +
  104 + // var currentTime = this.currentTime
  105 + // duration = this.duration
  106 + // var fps = duration / 30
  107 + });
  108 + },
88 109 },
89 110 mounted() {
90 111 this.getTable();
... ... @@ -137,7 +158,7 @@ export default {
137 158 background-size: 100% 100%;
138 159 text-align: center;
139 160 margin-bottom: 5vw;
140   - color:#fff
  161 + color: #fff;
141 162 }
142 163  
143 164 .typeOne {
... ... @@ -158,8 +179,8 @@ export default {
158 179 margin: 5vw;
159 180  
160 181 .videoTwo {
161   - width: 70vw;
162   - height: 45vw;
  182 + width: 80vw;
  183 + height: 50vw;
163 184 margin-bottom: 5vw;
164 185  
165 186 video {
... ...