首页 > 其他分享 >vue3视频播放器组件vue-video-player

vue3视频播放器组件vue-video-player

时间:2023-12-07 16:57:46浏览次数:33  
标签:play vue player video vue3 组件 import

1、安装

npm i vue3-video-play --save

2、全局注册

import vue3videoPlay from 'vue3-video-play' // 引入组件
import 'vue3-video-play/dist/style.css' // 引入css
app.use(vue3videoPlay)

3、使用

<vue3VideoPlay
              width="1210px"
              height="334px"
              :src="park.videoPath"
              :poster="park.imagePath"
              :autoPlay="true"
          />

效果:

 

标签:play,vue,player,video,vue3,组件,import
From: https://www.cnblogs.com/zwh0910/p/17883374.html

相关文章

  • 如何使用Visual Studio 2022创建基本Vue.js.Web应用程序
    最近接了个物联网项目,需要用到   VUEAnt-Design 对于vue没有概念 只能查找相关  vue.js的知识。 了解vue.js的前提条件 是要对  HTML+CSS+Jscript有一定的知识储备。所以又去看了看对应的三剑客(HTML+CSS+Jscript)。跟着vue.js官网学习了一下,就......
  • 基于vue2开发的html5页面实现微信分享卡片(微信好友+朋友圈+qq好友+qq空间)
    首先附上文档链接:1.微信官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#1112.免费生成二维码的草料官网:https://cli.im/text/other 需求:在浏览器分享链接时携带用户id(因为是拉人活动,需要给用户积分),并且在微信中分享为卡片模式 具体......
  • vue3组件通信Props()
    vue3组件通信父传子defineProps()在使用 <scriptsetup> 的单文件组件中,props可以使用 defineProps() 宏来声明://父<HelloWorldmsg="Youdidit!"/><!--根据一个变量的值动态传入-->//<BlogPost:title="post.title"/>//子<scriptsetup>//写法1......
  • vue中孙子调用爷爷组件的方法怎么调用?
    使用Vue的provide和inject来实现跨层级的组件通信。provide允许一个祖先组件(爷爷组件)提供数据,而inject允许子孙组件(孙子组件)在任意层级注入这个数据。通过这种方式,你可以在孙子组件中访问到爷爷组件提供的方法。以下是一个简单的例子://在爷爷组件中提供方法exportdefault......
  • a-table(AntDesign Vue)实现表格行上下拖动排序
    参考链接:https://blog.csdn.net/song_de/article/details/125218350https://blog.csdn.net/m0_61342618/article/details/132556739?utm_medium=distribute.pc_relevant.none-task-blog-2defaultbaidujs_baidulandingword~default-1-132556739-blog-125218350.235v39pc_releva......
  • 小说网站|基于Springboot和Vue实现在线小说阅读网站
     作者简介:Java领域优质创作者、CSDN博客专家、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、腾讯课堂常驻讲师主要内容:Java项目、Python项目、前端项目、人工智能与大数据、简历模板、学习资料、面试题库、技术互助收藏点赞不迷路 关注......
  • vue中this.$set()的使用
    data中数据,都是响应式。也就是说,如果操作data中的数据,视图会实时更新;但在实际开发中,遇到过一个坑:若data中数据类型较为复杂,方法methods中改变对象的属性,而页面并不会改变原因是vue监听不到数据类型特别复杂的属性。可以使用this.$set()来进行强制更新,进而解决问题一。对象操作......
  • Vue + Element 实现按钮指定间隔时间点击
    1、业务需求需要加一个按钮,调用第三方API,按钮十分钟之内只能点击一次,刷新页面也只能点击一次2、思路加一个本地缓存的时间戳,通过时间戳计算指定时间内不能点击按钮3、实现1)vue页面<template><el-row:gutter="15"><el-col:span="4"><el-buttontype="danger"......
  • vue webpack 配置babel es6转化转化es5
    1、安装相关依赖npmi-D@babel/[email protected]@babel/[email protected]@8.0.6//语法中有asyncawait等npmi-D@babel/[email protected]@babel/[email protected]、babel.config.jsmodule.exports={pres......
  • uni-app 基础架构搭建 ts+vue3 命令行
    1. 安装全局degitnpminstall-gdegit2.创建工程my-vue3-ts-project#创建以javascript开发的工程npxdegitdcloudio/uni-preset-vue#vitemy-vue3-ts-project#创建以ts开发的工程npxdegitdcloudio/uni-preset-vue#vite-tsmy-vue3-ts-project3进入目录cdmy-v......