vue 播放视频，默认有视频封面

最新推荐文章于 2024-08-07 16:41:51 发布

xggllc

最新推荐文章于 2024-08-07 16:41:51 发布

阅读量1.9k

点赞数

分类专栏： VUE Piece 文章标签： vue

本文链接：https://blog.youkuaiyun.com/xggllc/article/details/117590226

版权

Vue.js video标签封面播放控制前端开发

关键词由优快云通过智能技术生成

VUE Piece 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了在Vue项目中如何利用内置的video标签轻松实现视频播放，并发现video标签默认提供了封面功能，无需额外引入vue-video-player库。通过绑定src属性和使用refs进行播放状态控制，简洁地实现了视频组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前几天做视频管理器，原计划使用vue-video-player 库来播放视频，但是发现这个库播放视频，好像需要自己手动截封面【ps: 没有仔细研究vue-video-player，如果这里有不对的地方，请告诉小弟……】

由于不想再多引一个库，索性用video 试了一下，惊奇的发现默认就有封面：

以下是 .vue 文件：

<template>
   <video class="video-style"
       controls
       autoplay
      :src="file.url"
      :ref="dialogVideo" 
      style="width: 268px; height: 170px"
      ></video>
</template>

<script>
export default {
  data () {
    return {
        // 视频url地址
        file: {
            url: 'http://……'
        }
    }
  }
}
</script>


<style lang="scss" scoped>
      .video-style {
        background: #303643;
        border-radius: 8px;
        margin: 4px;
      }
</style>

也可以使用 dialogVideo 来控制播放状态：

if (this.$refs.dialogVideo.paused) {

this.$refs.dialogVideo.play();

} else {

this.$refs.dialogVideo.pause();

}