API tools faq
paste
KoctrX

Untitled

KoctrX
Mar 10th, 2021
215
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 22.28 KB | None | 0 0
raw download clone embed print report
  1. <template>
  2. <div ref="videoDashboard" class="videos_dash">
  3. <video
  4. v-for="(video, index) in videoObjects"
  5. :key="index"
  6. preload="auto"
  7. :ref="`videoCanvas_${video._id}`"
  8. :style="{ display: activeVideo._id == video._id ? 'block' : 'none' }"
  9. class="global_origin_video"
  10. :type="video.type"
  11. :poster="getPoster"
  12. :src="video.src"
  13.  
  14. @play="_play($event, video)"
  15. @pause="_pause($event, video)"
  16. @timeupdate="_timeupdate($event, video)"
  17. @ended="_ended($event, video)"
  18. @abort="_abort($event, video)"
  19. @canplay="_canplay($event, video)"
  20. @waiting="_waiting($event, video)"
  21. @progress="_progress($event, video)"
  22. ></video>
  23. <audio
  24. preload="auto"
  25. v-for="audio in getAudioTimeline"
  26. :key="audio._id"
  27. :ref="'ref_audio_' + audio._id"
  28. :id="'audio_' + audio._id"
  29. class="global_embed_audio"
  30. >
  31. <source :src="audio.src" :type="audio.fileType" />
  32. </audio>
  33. <div class="canvas_dash">
  34. <canvas id="videoEmbedCanvas"></canvas>
  35. </div>
  36. <div class="subtitles" v-if="subtitles && subtitles.length" v-html="subtitles"
  37. :style="subtitleStyles"></div>
  38.  
  39. <Preloader v-if="videoPreload"></Preloader>
  40. </div>
  41. </template>
  42. <script>
  43. import editor from "../../libs/editor";
  44. import utils from "../../libs/utils";
  45. import store from '../../store';
  46. import Preloader from "../base/Preloader";
  47. window.editor = editor;
  48. export default {
  49. name: "VideoEmbed",
  50. components: { Preloader },
  51. props: {
  52. isPlay: { type: Boolean, default: false },
  53. time: { type: Number, default: 0 },
  54. volume: { type: Number, default: 1 },
  55. videoObjects: {
  56. type: Array,
  57. default() {
  58. return [{ thumbs: [{ src: "" }] }];
  59. },
  60. },
  61. videoTimeline: {
  62. type: Object,
  63. default: () => ({})
  64. },
  65. },
  66.  
  67. data() {
  68. return {
  69. videoPreload: false,
  70. interval: null,
  71. awaitLoadVideo: false,
  72. change_time_state: false,
  73. ended: false,
  74. timer: 0,
  75. canvasSize: {},
  76. lockInterval: false,
  77. isLastLock: false,
  78. timelineDrag: {
  79. isLock: false,
  80. isPlay: false
  81. }
  82. };
  83. },
  84.  
  85. mounted() {
  86. setInterval(() => {
  87. if(this.isPlay && !this.lockInterval) {
  88. this.updateTimeline();
  89. }
  90. }, 1000 / 30);
  91.  
  92. // this.$refs.videoCanvas.onpause = this.pauseEvent;
  93. // this.$refs.videoCanvas.ontimeupdate = () => this.changeAudioTimes(true);
  94. // this.$refs.videoCanvas.onplay = () => this.changeAudioTimes();
  95. // this.$refs.videoCanvas.onended = () => {
  96. // this.ended = true;
  97. // };
  98.  
  99. // this.$refs.videoCanvas.onabort = () => {
  100. // if (this.isPlay) {
  101. // this.videoPreload = true;
  102. // this.pauseAllAudio();
  103. // }
  104. // };
  105.  
  106. // this.$refs.videoCanvas.oncanplay = () => {
  107. // this.videoPreload = false;
  108. // };
  109.  
  110. this.initCanvas();
  111.  
  112. new ResizeObserver(() => {
  113. editor.resizeCanvas(this.calculateCanvasSize(), true);
  114.  
  115. const scale = ($('.main_workflow_section').height() - 100) / $('video').height();
  116. // console.log('scale', scale);
  117.  
  118. this.$emit('transformScale', scale);
  119. }).observe(this.$refs.videoDashboard);
  120. },
  121.  
  122. methods: {
  123. _pause(ev, video) {
  124. const videoIndex = this.activeVideoIndex;
  125. const isLast = this.activeVideoIndex >= this.videoObjects.length - 1;
  126.  
  127. console.log('newTime', this.timer);
  128. if(video._id == this.activeVideo._id) {
  129. const videoEl = this.$refs[`videoCanvas_${this.activeVideo._id}`][0];
  130. const currentTime = videoEl.currentTime;
  131.  
  132. console.log('YESPIASDIJAKLSDJKLS', currentTime);
  133. const duration = /* utils.getVideoDuration(this.activeVideo); */ videoEl.duration;
  134.  
  135. const pauseRefus = () => {
  136. this.updateTimeline();
  137.  
  138. if(isLast && currentTime >= duration) {
  139. const firstVideo = this.videoObjects[0];
  140. this.timer = firstVideo.crop ? firstVideo.crop.startTime : 0;
  141. }
  142. }
  143.  
  144. if (this.isPlay) {
  145. if (isLast) {
  146. this.$emit("pause");
  147. this.pauseAllAudio();
  148. pauseRefus();
  149. } else {
  150. this.lockInterval = true;
  151. const newTime = this.videoObjects.reduce((res, item, i) => {
  152. if(i <= this.activeVideoIndex) {
  153. res += /* utils.getVideoDuration(item); // */this.$refs[`videoCanvas_${item._id}`][0].duration;
  154. }
  155.  
  156. return res;
  157. }, 0);
  158.  
  159.  
  160.  
  161. this.timer = newTime + .1;
  162.  
  163. try {
  164. const newVideo = this.videoObjects[videoIndex + 1];
  165. const newVideoEl = this.$refs[`videoCanvas_${newVideo._id}`][0];
  166. newVideoEl.currentTime = newVideo && newVideo.crop ? newVideo.crop.startTime : 0;
  167. newVideoEl.play();
  168. } catch(err) {
  169. console.error(err);
  170. }
  171.  
  172. this.changePlayVideo(true);
  173.  
  174. this.lockInterval = false;
  175. }
  176. } else {
  177. pauseRefus();
  178. }
  179. }
  180.  
  181.  
  182. const videoEl = this.$refs[`videoCanvas_${this.activeVideo._id}`][0];
  183. if(this.isPlay && videoEl.paused && !this.isLastLock) {
  184. videoEl.play();
  185. }
  186. },
  187.  
  188. _timeupdate(ev, video) {
  189. this.pauseNotActive(ev, video);
  190. this.changeAudioTimes(true);
  191.  
  192. if(this.activeVideo._id == video._id) {
  193. const currentTime = this.$refs[`videoCanvas_${video._id}`][0].currentTime;
  194. // this.$emit('timeUpdate', {
  195. // time: currentTime,
  196. // lineLeft: currentTime * (80 / this.activeVideo.thumbs[0].time)
  197. // });
  198. }
  199. },
  200.  
  201. _play(ev, video) {
  202. this.pauseNotActive(ev, video);
  203. this.changeAudioTimes();
  204.  
  205. this.isLastLock = this.activeVideoIndex >= this.videoObjects.length - 1
  206.  
  207. if(this.activeVideo._id == video._id) {
  208. this.$emit('play');
  209. }
  210. },
  211.  
  212. _ended(ev, video) {},
  213.  
  214. _abort(ev, video) {
  215. //this.videoPreload = true;
  216. //console.log('LOADING');
  217. },
  218.  
  219. _canplay(ev, video) {
  220. this.videoPreload = false;
  221. },
  222.  
  223. _waiting(ev, video) {
  224. this.videoPreload = true;
  225. this.pauseAllAudio();
  226. },
  227.  
  228. _progress(ev, video) {
  229. console.log(ev.target.buffered);
  230. },
  231.  
  232. pauseNotActive(ev, video) {
  233. if(video._id != this.activeVideo._id && !ev.target.paused) {
  234. ev.target.pause();
  235. }
  236. },
  237.  
  238. updateTimeline(skipTimeLine = false) {
  239. try {
  240. const currentTime = this.$refs[`videoCanvas_${this.activeVideo._id}`][0].currentTime;
  241.  
  242. if(!skipTimeLine) {
  243. const index = this.activeVideoIndex;
  244. const duration = this.videoObjects.reduce((res, item, i) =>
  245. res + (i < index ? utils.getVideoDuration(item) /* item.meta.duration */ : 0), 0);
  246.  
  247. if(this.activeVideo.crop && currentTime < this.activeVideo.crop.startTime) {
  248. const res = this.activeVideo.crop.startTime + duration + currentTime;
  249.  
  250. this.timer = res;
  251. } else if(this.activeVideo.crop && currentTime > this.activeVideo.crop.endTime) {
  252. this.timer = this.activeVideo.meta.duration;
  253. } else {
  254. this.timer = duration + currentTime;
  255. }
  256.  
  257. let newPosition = (() => {
  258. const ind = this.activeVideoIndex;
  259. const pos = this.videoObjects.reduce((res, item, i) => {
  260. if(i > ind) return res;
  261. const durationWidth = item.crop ? item.crop.width : ((item.meta.duration / item._step) * 80);
  262. const localDuration = item.crop ? (item.crop.endTime - item.crop.startTime) : item.meta.duration;
  263.  
  264. if(i == ind) {
  265. const incrEndTime = item.crop ? (item.crop.endTime < currentTime ? (item.meta.duration - item.crop.endTime) : 0) : 0;
  266.  
  267. const scaleSeconds = durationWidth / localDuration;
  268. const diff = (this.timer - duration) - (item.crop ? item.crop.startTime : 0) - incrEndTime;
  269. res.position += diff * scaleSeconds;
  270. } else {
  271. res.timer += item.meta.duration;
  272. res.position += durationWidth;
  273. }
  274.  
  275. return res;
  276. }, { timer: 0, position: 0 });
  277.  
  278. return pos.position;
  279. })();
  280.  
  281. if(!this.videoObjects.find(vid => vid.isIntro)) {
  282. newPosition += 320;
  283. }
  284.  
  285. console.log('newPosition', newPosition);
  286.  
  287. this.$store.state.videoPlayer.timeLinePosition = newPosition;
  288.  
  289. // let position = (() => {
  290. // const activeIndex = this.activeVideoIndex;
  291. // const newTimer = this.videoObjects.reduce((res, item, i) => {
  292. // if(i > activeIndex) return res;
  293. // const durationWidth = ((item.meta.duration / item._step) * 80);
  294.  
  295. // if(this.activeVideo._id == item._id) {
  296. // const localTimer = (this.timer - res.timer);
  297.  
  298. // res.position += durationWidth * (localTimer / /* utils.getVideoDuration(item) */item.meta.duration);
  299. // } else {
  300. // res.timer += /* utils.getVideoDuration(item) */item.meta.duration;
  301. // res.position += durationWidth;
  302. // }
  303.  
  304. // return res;
  305. // }, { position: 0, timer: 0 }).position;
  306.  
  307. // return newTimer;
  308. // })();
  309.  
  310. // console.log('TIMER POSITION', this.activeVideo._id, position);
  311.  
  312. // if(!this.videoObjects.find(vid => vid.isIntro)) {
  313. // position += 320;
  314. // }
  315.  
  316. // const cropPosition = this.videoObjects.reduce((res, item, index) => {
  317. // if(index > this.activeVideoIndex) return res;
  318.  
  319. // if(item.crop) {
  320. // const durationWidth = ((item.meta.duration / item._step) * 80);
  321.  
  322. // const scale = (item.crop.endTime - item.crop.startTime) / item.meta.duration;
  323. // const diff = durationWidth - (durationWidth * scale);
  324. // //console.log('TIMER R:', durationWidth, scale, diff, res.position);
  325. // res += diff;
  326. // }
  327.  
  328. // return res;
  329. // }, 0);
  330.  
  331. // console.log('WTF', cropPosition);
  332.  
  333. // this.$store.state.videoPlayer.timeLinePosition = position - cropPosition;
  334. }
  335.  
  336. const diffTime = this.videoObjects.reduce((res, item, i) => {
  337. if(i > this.activeVideoIndex) return res;
  338.  
  339. if(i == this.activeVideoIndex) {
  340. const incrEndTime = item.crop ? (item.crop.endTime < currentTime ? (item.meta.duration - item.crop.endTime) : 0) : 0;
  341. res += (item.crop ? item.crop.startTime : 0) + incrEndTime;
  342. } else {
  343. res += item.crop ? (item.crop.startTime + (item.meta.duration - item.crop.endTime)) : 0;
  344. }
  345.  
  346. return res;
  347. }, 0);
  348.  
  349. console.log('diffTime', this.timer, diffTime);
  350.  
  351. this.$store.state.videoPlayer.printTime = utils.parseSeconds(this.timer - diffTime).toString();
  352.  
  353. if(!this.timelineDrag.isLock) {
  354. this.$emit("timeUpdate");
  355. }
  356. } catch(err) {
  357. console.log('WHAT??????');
  358. }
  359. },
  360.  
  361. calculateTimeByPosition() {
  362. return this.$store.state.videoPlayer.timeLinePosition / 80;
  363. },
  364.  
  365. changeAudioVolume(volume = 1) {
  366. this.getAudioTimeline.forEach((audio) => {
  367. const currentVolume =
  368. audio.volume || audio.volume == 0 ? audio.volume : 1;
  369.  
  370. const elem = this.$refs["ref_audio_" + audio._id][0];
  371. if (!elem) return;
  372.  
  373. elem.volume = (currentVolume / 1) * volume;
  374. });
  375. },
  376.  
  377. changeAudioTimes(isTimeupdate = false) {
  378. const time = this.timer; //this.calculateTimeByPosition();
  379.  
  380. this.getAudioTimeline.forEach((audio) => {
  381. const cropTime = (audio.crop ? audio.crop.min || 0 : 0);
  382. const perTime = audio.perTime + cropTime;
  383.  
  384. let newTime = cropTime;
  385. const elem = this.$refs["ref_audio_" + audio._id][0];
  386. if (!elem) return;
  387.  
  388. newTime = (time - audio.perTime) + cropTime;
  389. if(Math.abs(newTime - elem.currentTime) > .5) {
  390. elem.currentTime = newTime;
  391. console.log('UPDATED!');
  392. }
  393.  
  394. return;
  395. const isCurrent = perTime <= time && audio.time <= audio.time;
  396. if (isCurrent) {
  397. newTime = (time - audio.perTime) + cropTime;
  398. } else if (time > perTime + audio.time) {
  399. newTime = cropTime;
  400. } else if (perTime + audio.time < time) {
  401. newTime = cropTime;
  402. }
  403.  
  404. if (isTimeupdate) {
  405. if (isCurrent && Math.abs(elem.currentTime - newTime) >= 0.5) {
  406. elem.currentTime = (time - audio.perTime) + cropTime;
  407. }
  408. } else {
  409. elem.currentTime = newTime;
  410. }
  411. });
  412. },
  413.  
  414. initCanvas() {
  415. editor.initialCanvas("videoEmbedCanvas", {
  416. backgroundColor: "rgba(255, 0, 0, 0)",
  417. // selectable: false,
  418. // interactive: false,
  419. // selection: false,
  420. ...this.calculateCanvasSize(),
  421. });
  422.  
  423. $('.upper-canvas').on('contextmenu', e => {
  424. e.preventDefault();
  425. const obj = editor.canvas.findTarget(e.originalEvent);
  426. this.$store.state.selectedContextObject = obj ? { ...obj, timestamp: Date.now() } : undefined;
  427. });
  428. },
  429.  
  430. calculateCanvasSize() {
  431. if(this.$refs.videoDashboard) {
  432. this.canvasSize = {
  433. width: this.$refs.videoDashboard.clientWidth,
  434. height: this.$refs.videoDashboard.clientHeight,
  435.  
  436. // width: $('.video_wrpr').width(),
  437. // height: $('.video_wrpr').height(),
  438. };
  439. }
  440.  
  441. return this.canvasSize;
  442. },
  443.  
  444. pauseAllAudio() {
  445. const elements = document.getElementsByClassName("global_embed_audio");
  446. for (const elem of Array.from(elements)) {
  447. elem.pause();
  448. }
  449. },
  450.  
  451. updatingCurrentTime() {
  452. return;
  453. clearInterval(this.interval);
  454. if (this.isPlay) {
  455. const video = utils.getSelectedVideoByTimeDuration(
  456. this.videoObjects,
  457. this.time,
  458. true
  459. );
  460.  
  461. this.interval = setInterval(() => {
  462. if (
  463. video.time + this.$refs.videoCanvas.currentTime >
  464. this.videosDuration / 1000
  465. ) {
  466. clearInterval(this.interval);
  467. this.changePlayVideo(false);
  468. return;
  469. }
  470.  
  471. this.$emit(
  472. "timeUpdate",
  473. video.time + this.$refs.videoCanvas.currentTime / video.videoStep,
  474. video.time + this.$refs.videoCanvas.currentTime
  475. );
  476. }, 1);
  477. }
  478. },
  479.  
  480. changePlayVideo(isPlay = false, lockUpdate = false) {
  481. this.updatingCurrentTime();
  482.  
  483. const video = utils.getSelectedVideoByTimeDuration(
  484. this.videoObjects,
  485. this.time,
  486. true
  487. );
  488.  
  489. if (
  490. this.videoObjects.length > 1 &&
  491. video.index == this.videoObjects.length - 1 &&
  492. this.ended
  493. ) {
  494. this.$emit("toDuration", 0);
  495. }
  496.  
  497. this.ended = false;
  498. this.$refs[`videoCanvas_${this.activeVideo._id}`][0][isPlay ? "play" : "pause"]();
  499. this.$store.state.videoPlayer.isPlay = isPlay;
  500. },
  501.  
  502. calculateTimeByHorizontalLine(line) {
  503. let timer = 0;
  504. let currentTime = 0;
  505. let left = 0;
  506.  
  507. if(!this.videoObjects.find(vid => vid.isIntro)) {
  508. line.left -= 320;
  509. }
  510.  
  511. if(line.left >= 0) {
  512. for(let q = 0; q < this.videoObjects.length; q++) {
  513. const video = this.videoObjects[q];
  514. const videoWidth = video.crop ?
  515. video.crop.width : (utils.getVideoDuration(video)/* video.meta.duration */ / video._step) * 80;
  516.  
  517. if(left + videoWidth > line.left) {
  518. currentTime = ((line.left - left) / videoWidth) * utils.getVideoDuration(video)/* video.meta.duration */;
  519. timer += currentTime;
  520. break;
  521. } else if(q == this.videoObjects.length - 1) {
  522. timer += utils.getVideoDuration(video)/* video.meta.duration */;
  523. } else {
  524. timer += utils.getVideoDuration(video)/* video.meta.duration */;
  525. left += videoWidth;
  526. }
  527. }
  528. }
  529.  
  530. this.timer = timer;
  531.  
  532. this.updateTimeline(true);
  533. //this.$refs[`videoCanvas_${this.activeVideo._id}`][0].currentTime = currentTime;
  534. }
  535. },
  536.  
  537. computed: {
  538. subtitles() {
  539. return this.$store.state.videoPlayer.subtitlesText;
  540. },
  541.  
  542. subtitleStyles() {
  543. const { width, height } = this.canvasSize;
  544. if(width && height) {
  545. const fontSize = 10 / (300 / height );
  546. return { 'font-size': `${parseInt(fontSize)}px` };
  547. } else {
  548. return {};
  549. }
  550. },
  551.  
  552. updatingTimer() {
  553. return this.timer;
  554. },
  555.  
  556. videoTimelineComputed() {
  557. return this.videoTimeline;
  558. },
  559.  
  560. rewindBackward() {
  561. return this.$store.state.videoPlayer.rewind.backward;
  562. },
  563.  
  564. rewindForward() {
  565. return this.$store.state.videoPlayer.rewind.forward;
  566. },
  567.  
  568. getPoster() {
  569. const video = this.activeVideo;
  570. if(video.poster) return video.poster;
  571. if (!video || !video.thumbs || !video.thumbs.length) return "";
  572.  
  573. return video.thumbs[0].src;
  574. },
  575.  
  576. activeVideo() {
  577. return utils.getSelectedVideoByTimeDuration(this.videoObjects, this.timer);
  578. // this.$store.state.videoPlayer.timeLinePosition
  579. return this.videoObjects[0];
  580. },
  581.  
  582. activeVideoIndex() {
  583. const activeVideo = utils.getSelectedVideoByTimeDuration(this.videoObjects, this.timer);
  584. return this.videoObjects.findIndex(vo => activeVideo._id == vo._id);
  585. },
  586.  
  587. getAudioTimeline() {
  588. return this.$store.state.videoPlayer.timelines.filter(
  589. (file) => file.type == "audio"
  590. );
  591. },
  592.  
  593. videosDuration() {
  594. return utils.parseVideos(this.videoObjects).duration;
  595. },
  596.  
  597. getSelectedVideo() {
  598. if (this.awaitLoadVideo) {
  599. this.awaitLoadVideo = false;
  600. this.$nextTick(() => {
  601. this.changePlayVideo(true);
  602. });
  603. }
  604.  
  605. return utils.getSelectedVideoByTimeDuration(this.videoObjects, this.time);
  606. },
  607.  
  608. currentPoster() {
  609. const posters = utils.parseVideos(this.videoObjects).thumbs;
  610.  
  611. return posters[parseInt((posters.length - 1) / 2)].src;
  612. },
  613.  
  614. changeVolume() {
  615. return this.volume;
  616. },
  617.  
  618. reInitialCanvas() {
  619. return this.$store.state.videoPlayer.canvasInit;
  620. },
  621.  
  622. playVideo() {
  623. return this.isPlay;
  624. },
  625.  
  626. timeUpdate() {
  627. return this.time;
  628. },
  629. },
  630.  
  631. watch: {
  632. updatingTimer(timer) {
  633. console.log('TIMER', timer);
  634. editor.showHideAnotherElements(timer);
  635. const time = this.$refs[`videoCanvas_${this.activeVideo._id}`][0].currentTime;
  636.  
  637. const realTimer = this.videoObjects.reduce((res, item, ind) => {
  638. if(this.activeVideoIndex > ind) {
  639. res += utils.getVideoDuration(item)/* item.meta.duration */;
  640. }
  641.  
  642. return res;
  643. }, 0);
  644.  
  645. const diff = Math.abs(time - (this.timer - realTimer));
  646.  
  647.  
  648. if(diff > .03) {
  649. this.$refs[`videoCanvas_${this.activeVideo._id}`][0].currentTime = this.timer - realTimer;
  650. console.log('Sync video', this.timer - realTimer);
  651. }
  652.  
  653. this.$store.state.videoPlayer.time = timer;
  654. },
  655.  
  656. videoTimelineComputed(horizontalLine) {
  657. this.lockInterval = true;
  658. let left = horizontalLine.left;
  659.  
  660. if(!this.videoObjects.find(vid => vid.isIntro)) {
  661. left += 0;//320;
  662. }
  663.  
  664. this.calculateTimeByHorizontalLine({ ...horizontalLine });
  665. this.$store.state.videoPlayer.timeLinePosition = left - (horizontalLine.isPoint ? 11 : 0);
  666.  
  667. if(this.timelineDrag.isLock && this.timelineDrag.isPlay && horizontalLine.isEnd) {
  668. this.timelineDrag = {};
  669.  
  670. this.changePlayVideo(true);
  671. }
  672.  
  673. if(!horizontalLine.isEnd) {
  674. if(this.isPlay) {
  675. this.timelineDrag.isPlay = true;
  676. this.timelineDrag.isLock = true;
  677. this.changePlayVideo(false);
  678. }
  679. }
  680.  
  681. if(horizontalLine.isPoint) {
  682. this.timelineDrag = {};
  683. this.changePlayVideo(this.isPlay);
  684. }
  685.  
  686. this.lockInterval = false;
  687. //console.log('videoTimelineComputed', horizontalLine);
  688. },
  689.  
  690. rewindBackward(count) {
  691. this.lockInterval = true;
  692. this.timer -= .5;
  693. this.lockInterval = false;
  694. },
  695.  
  696. rewindForward(count) {
  697. this.lockInterval = true;
  698. this.timer += 5;
  699. this.lockInterval = false;
  700. },
  701.  
  702. changeVolume(volume) {
  703. for(const video of this.videoObjects) {
  704. this.$refs[`videoCanvas_${video._id}`][0].volume = volume;
  705. }
  706.  
  707. this.changeAudioVolume(volume);
  708. },
  709.  
  710. reInitialCanvas() {
  711. editor.destroyCanvas();
  712. this.initCanvas();
  713. },
  714.  
  715. playVideo(isPlay = false) {
  716. this.changePlayVideo(isPlay);
  717.  
  718. if (!isPlay) this.pauseAllAudio();
  719. },
  720.  
  721. timeUpdate(time) {
  722. const video = utils.getSelectedVideoByTimeDuration(
  723. this.videoObjects,
  724. time,
  725. true
  726. );
  727.  
  728. // this.$refs.videoCanvas.currentTime = time * video.videoStep - video.time;
  729.  
  730. this.$emit(
  731. "timeUpdate",
  732. video.time + this.$refs.videoCanvas.currentTime / video.videoStep,
  733. video.time + this.$refs.videoCanvas.currentTime,
  734. true
  735. );
  736. },
  737. },
  738. };
  739. </script>
  740.  
  741. <style scoped>
  742. .subtitles {
  743. user-select: none;
  744. pointer-events: none;
  745. position: absolute;
  746. padding: 3px;
  747. background: #000;
  748. color: #fff;
  749. bottom: 3px;
  750. text-align: center;
  751. max-width: 80%;
  752. word-break: break-all;
  753. }
  754.  
  755. #videoEmbedCanvas {
  756. width: 100%;
  757. height: 100%;
  758. left: 0;
  759. top: 0;
  760. }
  761.  
  762. .videos_dash {
  763. position: absolute;
  764. height: 100%;
  765. width: 100%;
  766. display: flex;
  767. justify-content: center;
  768. }
  769.  
  770. .global_origin_video {
  771. width: 100%;
  772. height: 100%;
  773. object-fit: cover;
  774. }
  775. </style>
  776.  
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!