草庐IT

vue3视频播放插件

大吉大利的卦象 2024-01-23 原文

1、效果图（网上随便找的视频用来测试的，所以有个水印）

2、引入插件

npm 安装：npm i vue3-video-play --save
yarn 安装：yarn add vue3-video-play --save

3、项目中引入
全局引入方式：在main.js中引入以下

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

组件内引入方式：

import "vue3-video-play/dist/style.css";
import { videoPlay } from "vue-video-play";
components: { videoPlay },

4、使用及例子(因为我用的全局引入)

<template>
  <div class="about">
    <vue3VideoPlay
      v-bind="options"
      poster="https://xxxxx.jpg" //  视频封面地址
    />
  </div>
</template>
<script setup>
import { reactive } from "vue";

const options = reactive({
  width: "100%", //播放器宽度 也可以使用px
  height: "100%", //播放器高度  同理可以使用px
  color: "#409eff", //主题色
  title: "", //视频名称
  src: "https://xxxxx.mp4", //视频源
  muted: false, //静音
  webFullScreen: false,
  speedRate: ["0.5", "0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
  autoPlay: false, //自动播放
  loop: false, //循环播放
  mirror: false, //镜像画面
  ligthOff: false, //关灯模式
  volume: 0.3, //默认音量大小
  control: true, //是否显示控制
  controlBtns: [
    "audioTrack",
    "quality",
    "speedRate",
    "volume",
    "setting",
    "pip",
    "pageFullScreen",
    "fullScreen",
  ], //显示所有按钮,
});
</script>

5、该插件支持原生video所有事件

<template>
  <div>
    <vue3VideoPlay
      width="800px"
      title="钢铁侠"
      :src="options.src"
      :poster="options.poster"
      @play="onPlay"
      @pause="onPause"
      @timeupdate="onTimeupdate"
      @canplay="onCanplay"
    />
  </div>
</template>

<script setup>
import { reactive } from "vue";

const options = reactive({
  src: "https://xxxx.mp4", //视频源
  poster: "", //封面
});
const onPlay = (ev) => {
  console.log("播放");
};
const onPause = (ev) => {
  console.log(ev, "暂停");
};

const onTimeupdate = (ev) => {
  console.log(ev, "时间更新");
};
const onCanplay = (ev) => {
  console.log(ev, "可以播放");
};
</script>

<style scoped></style>
参数说明类型可选值默认值
width播放器宽度string-800px
height播放器高度string-450px
color播放器主色调string-#409eff
src视频资源string--
title视频名称string--
type视频类型string-video/mp4
poster视频封面string-视频第一帧
webFullScreen网页全屏boolean-false
speed是否支持快进快退boolean-true
currentTime跳转到固定播放时间(s)number-0
playsinlineios 点击屏幕是否全屏boolean-false
muted静音boolean-false
speedRate倍速配置array-[“2.0”, “1.0”, “1.5”, “1.25”, “0.75”, “0.5”]
autoPlay自动播放boolean-false,为 true 时会自动静音
loop循环播放boolean-false
mirror镜像画面boolean-false
ligthOff关灯模式boolean-false
volume默认音量number0-10.3
control是否显示控制器boolean-true
controlBtns控制器显示的按钮array[‘audioTrack’, ‘quality’, ‘speedRate’, ‘volume’, ‘setting’, ‘pip’, ‘pageFullScreen’, ‘fullScreen’][‘audioTrack’, ‘quality’, ‘speedRate’, ‘volume’, ‘setting’, ‘pip’, ‘pageFullScreen’, ‘fullScreen’]
preload预加载stringmeta/auto/noneauto

controlBtns 按钮说明

名称说明
audioTrack音轨切换按钮
quality视频质量切换按钮
speedRate速率切换按钮
volume音量
setting设置
pip画中画按钮
pageFullScreen网页全屏按钮
fullScreen全屏按钮

事件Events

事件名称说明回调
mirrorChange镜像翻转事件val
loopChange循环播放开关事件val
lightOffChange关灯模式事件val
loadstart客户端开始请求数据event
progress客户端正在请求数据event
error请求数据时遇到错误event
stalled网速失速event
play开始播放时触发event
pause暂停时触发event
loadedmetadata成功获取资源长度event
loadeddata缓冲中event
waiting等待数据，并非错误event
playing开始回放event
canplay暂停状态下可以播放event
canplaythrough可以持续播放event
timeupdate更新播放时间event
ended播放结束event
ratechange播放速率改变event
durationchange资源长度改变event
volumechange音量改变event

快捷键说明

键名说明
Space(空格)暂停/播放
方向右键 →单次快进 10s，长按 5 倍速播放
方向左键 ←快退 10s
方向上键 ↑音量+10%
方向下键 ↓音量-10%
Esc(退出)退出全屏/退出网页全屏
F(就是F键)全屏/退出全屏
vue3vuespanclasstoken音视频javascriptvue.js

有关vue3视频播放插件的更多相关文章

  1. ruby - 如何每月在 Heroku 运行一次 Scheduler 插件？ - 2

    在选择我想要运行操作的频率时，唯一的选项是“每天”、“每小时”和“每10分钟”。谢谢!我想为我的Rails3.1应用程序运行调度程序。 最佳答案 这不是一个优雅的解决方案，但您可以安排它每天运行，并在实际开始工作之前检查日期是否为当月的第一天。 关于ruby-如何每月在Heroku运行一次Scheduler插件？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/8692687/

  2. ruby-on-rails - 无法使用 Rails 3.2 创建插件？ - 2

    我对最新版本的Rails有疑问。我创建了一个新应用程序(railsnewMyProject)，但我没有脚本/生成，只有脚本/rails，当我输入ruby./script/railsgeneratepluginmy_plugin"Couldnotfindgeneratorplugin.".你知道如何生成插件模板吗？没有这个命令可以创建插件吗？PS:我正在使用Rails3.2.1和ruby​​1.8.7[universal-darwin11.0] 最佳答案 随着Rails3.2.0的发布，插件生成器已经被移除。查看变更日志here.现在

  3. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  4. 动漫制作技巧如何制作动漫视频 - 2

    动漫制作技巧是很多新人想了解的问题，今天小编就来解答与大家分享一下动漫制作流程，为了帮助有兴趣的同学理解，大多数人会选择动漫培训机构，那么今天小编就带大家来看看动漫制作要掌握哪些技巧？一、动漫作品首先完成草图设计和原型制作。设计草图要有目的、有对象、有步骤、要形象、要简单、符合实际。设计图要一致性，以保证制作的顺利进行。二、原型制作是根据设计图纸和制作材料，可以是手绘也可以是3d软件创建。在此步骤中，要注意的问题是色彩和平面布局。三、动漫制作制作完成后，加工成型。完成不同的表现形式后，就要对设计稿进行加工处理，使加工的难易度降低，并得到一些基本准确的概念，以便于后续的大样、准确的尺寸制定。四、

  5. python ffmpeg 使用 pyav 转换 一组图像 到 视频 - 2

    2022/8/4更新支持加入水印水印必须包含透明图像，并且水印图像大小要等于原图像的大小pythonconvert_image_to_video.py-f30-mwatermark.pngim_dirout.mkv2022/6/21更新让命令行参数更加易用新的命令行使用方法pythonconvert_image_to_video.py-f30im_dirout.mkvFFMPEG命令行转换一组JPG图像到视频时，是将这组图像视为MJPG流。我需要转换一组PNG图像到视频，FFMPEG就不认了。pyav内置了ffmpeg库，不需要系统带有ffmpeg工具因此我使用ffmpeg的python包装p

  6. TimeSformer：抛弃CNN的Transformer视频理解框架 - 2

    Transformers开始在视频识别领域的“猪突猛进”，各种改进和魔改层出不穷。由此作者将开启VideoTransformer系列的讲解，本篇主要介绍了FBAI团队的TimeSformer，这也是第一篇使用纯Transformer结构在视频识别上的文章。如果觉得有用，就请点赞、收藏、关注！paper:https://arxiv.org/abs/2102.05095code(offical):https://github.com/facebookresearch/TimeSformeraccept:ICML2021author:FacebookAI一、前言Transformers(VIT)在图

  7. ruby-on-rails - 您希望看到哪些 Rails 插件？ - 2

    您认为可以作为插件很好地存在于您的Rails应用程序中必须实现的哪些行为？您过去曾搜索过哪些插件功能但找不到？哪些现有的Rails插件可以改进或扩展，如何改进或扩展？ 最佳答案 我希望在管理界面中看到一个引擎插件，它提供了应用程序中所有模型的仪表板摘要，以及可配置的事件图表。 关于ruby-on-rails-您希望看到哪些Rails插件？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questio

  8. ruby - vagrant 从 github 安装插件 - 2

    我们正在使用Vagrant进行部署，我们最终希望将此集群部署在Rackspace上。vagrant-rackspace插件是一个自然的选择，但它有一些错误，这些错误未包含在最新的0.1.1版本中(notablythatvagrantprovisiondoesn'twork)。我已经在我的personalfork中解决了这个问题通过合并其他人的工作来对存储库进行改造。是否可以从github安装vagrant插件？显而易见的事情没有奏效:[unix]$vagrantplugininstallvagrant-rackspace--plugin-sourcehttps://github.com

  9. ruby - 如何更改此正则表达式以从未指定 v 参数的 Youtube URL 获取 Youtube 视频 ID？ - 2

    目前我正在使用这个正则表达式从YoutubeURL中提取视频ID:url.match(/v=([^&]*)/)[1]我怎样才能改变它，以便它也可以从这个没有v参数的YoutubeURL获取视频ID:http://www.youtube.com/user/SHAYTARDS#p/u/9/Xc81AajGUMU感谢阅读。编辑:我正在使用ruby​​1.8.7 最佳答案 对于Ruby1.8.7，这就可以了。url_1='http://www.youtube.com/watch?v=8WVTOUh53QY&feature=feedf'url

  10. ruby - 如何以编程方式将 mp3 转换为 itunes 可播放的 aac/m4a 文件？ - 2

    我一直在寻找一种以编程方式或通过命令行将mp3转换为aac的方法，但没有成功。理想情况下，我有一段代码可以从我的Rails应用程序中调用，将mp3转换为aac。我安装了ffmpeg和libfaac，并能够使用以下命令创建aac文件:ffmpeg-itest.mp3-acodeclibfaac-ab163840dest.aac当我将输出文件的名称更改为dest.m4a时，它无法在iTunes中播放。谢谢! 最佳答案 FFmpeg提供AAC编码功能(如果您已编译它们)。如果您使用的是Windows，则可以从here获取完整的二进制文件。

随机推荐