VUE 3 - iframe 视频

发布于 2025-01-11 08:09:17 字数 344 浏览 0 评论 0原文

从 axios 我得到带有链接的 iframe 视频：

<iframe src="https..." width="1920" height="1080" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen title="Tr&amp;eacute;ning TEXT"></iframe>

...并且我需要在页面上显示此 iframe 并播放视频（视频的自动启动并不重要，只有在单击后我才需要它按钮）

感谢您的帮助。

原文

from axios i get iframe video with link:

<iframe src="https..." width="1920" height="1080" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen title="Tr&eacute;ning TEXT"></iframe>

...and I need to display this iframe on the page and play video (the automatic start of the video is not important, I need it only after clicking on the button)

Thanks for help.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

别把无礼当个性 2025-01-18 08:09:17

如果我理解正确，请尝试像下面的代码片段一样：

const app = Vue.createApp({
  data() {
    return {
      showFrame: false,
      video: '<iframe src="https://www.youtube.com/embed/qZXt1Aom3Cs" width="1920" height="1080" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen title="Tr&eacute;ning TEXT"></iframe>'
    };
  },
})
app.mount('#demo')

<script src="https://unpkg.com/[email protected]/dist/vue.global.prod.js"></script>
<div id="demo">
  <button @click="showFrame = true">Show</button>
  <div v-html="video" v-show="showFrame"></div>
</div>

If I understood you correctly try like following snippet:

const app = Vue.createApp({
  data() {
    return {
      showFrame: false,
      video: '<iframe src="https://www.youtube.com/embed/qZXt1Aom3Cs" width="1920" height="1080" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen title="Tr&eacute;ning TEXT"></iframe>'
    };
  },
})
app.mount('#demo')

<script src="https://unpkg.com/[email protected]/dist/vue.global.prod.js"></script>
<div id="demo">
  <button @click="showFrame = true">Show</button>
  <div v-html="video" v-show="showFrame"></div>
</div>

回复收藏 0 原文

~没有更多了~