vue3 使用video播放视频

最新推荐文章于 2024-08-10 15:37:15 发布

回忆哆啦没有A梦

最新推荐文章于 2024-08-10 15:37:15 发布

阅读量2.1k

点赞数

分类专栏： vue相关问题（vue3、vue2）文章标签：音视频前端 javascript

本文链接：https://blog.csdn.net/weixin_39550080/article/details/128530795

版权

vue相关问题（vue3、vue2）专栏收录该内容

39 篇文章 4 订阅

订阅专栏

该段代码展示了在Vue.js应用中如何设置一个HTML5视频播放器，使用`<video>`标签加载视频资源，并通过`v-if`和`@click`指令控制播放按钮的显示与视频播放。`onMounted`钩子用于在组件挂载后获取视频元素，`videoPlayer`函数则用于播放视频并更新播放状态。

摘要由CSDN通过智能技术生成

请添加图片描述

  <div>
    <video id="myVideoTwo" poster="@/assets/images/video-poster.jpg" :controls="isPlaying">
      <source src="@/assets/yalla.mp4" type="video/mp4" />
    </video>
    <--播放按钮图片-->
    <img
      v-if="!isPlaying"
      @click="videoPlayer"
      class="video-play-btn"
      src="@/assets/images/play-btn.png" />
  </div>

setup代码：

setup() {
	let video: any
 	onMounted(() => {
		// 初始化视频播放器
		video = document.getElementById('myVideoTwo')
	})
	const videoPlayer = () => {
      video.play()
      state.isPlaying = true
    }
    return {
      videoPlayer,
    }
}