vue3通过vue-video-player实现视频倍速、默认全屏、拖拽进度条等功能

news2024/11/9 10:14:24

效果图:

1、场景:

js原生的video标签在不同浏览器及不同型号手机上都展示的不一样,一部分没有倍速,一部分没有全屏等功能,为了统一视频播放的交互功能,使用vue-video-player插件来完成,vue-video-player插件支持在Vue2/Vue3/Reacet项目中使用,以下是在vue3中使用示例

2、下载插件:

npm i vue-video-player@6.0.0

这里我下载的是最新版6.0.0

3、注册组件

  • 方式一,在main.js导入并注册后全局使用:
import { createApp } from 'vue'
import VideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
const app = createApp(App)
app.use(VideoPlayer)
  • 方式二,在具体的vue文件中引入使用:
import { VideoPlayer } from "@videojs-player/vue";
import "video.js/dist/video-js.css";

4、使用组件:

 <video-player
     ref="videoPlayer"
     @play="handleFullScreen"
     :options="playerOptions"
 />
import { VideoPlayer } from "@videojs-player/vue";
import "video.js/dist/video-js.css";
import poster from "@/assets/images/videoStar.png"; // 封面图
const { proxy } = getCurrentInstance();

const playerOptions = ref({
  language: "zh-CN", // 语言
  playbackRates: [0.5, 1.0, 1.5, 2.0],  // 倍速可选项 可自定义
  playsinline: true,
  controls: true, // 是否展示控制栏
  poster,  // 封面图
  sources: [
    {
      // type为视频资源类型 application/x-mpegURL在总结着重介绍
      type: "video/mp4", 
      src: '如果是指定的http链接,请确保后端返会的是MP4格式的数据'
    },
  ],
});

const handleFullScreen = () => {
  if (!proxy.$refs.videoPlayer?.$el?.player) return;
  // 点击播放时设置默认全屏 proxy可以理解为vue2的this
  proxy.$refs.videoPlayer.$el.player.requestFullscreen();
};

总结:

vue-video-player插件的使用方式很简单,一般情况下是可以在播放视频的过程中拖动进度条的,但开发过程中也遇到一些问题:

  • options中的soure.type可选值
    • application/dash+xml:DASH(Dynamic Adaptive Streaming over HTTP)流媒体
    • application/x-mpegURL(或application/vnd.apple.mpegurl):HLS流媒体
    • video/webm:WebM视频文件
    • audio/mpeg:MP3音频文件
    • video/mp4:MP4视频文件
    • 注意:type类型一定要和src值返回的数保持一致!!
  • 鼠标点击进度条后视频直接重置到了起点,这个问题可以参考:

解决浏览器使用 vue-video-player播放视频不能拖动或点击进度条到指定位置播放,拖动或点击进度条会立即反弹回起点播放-CSDN博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1861436.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

3_电机的发展及学习方法

一、电机组成及发展 1、什么是励磁&#xff1f; 在电磁学中&#xff0c;励磁是通过电流产生磁场的过程。 发电机或电动机由在磁场中旋转的转子组成。磁场可以由 永磁体或励磁线圈产生。对于带有励磁线圈的机器&#xff0c;电流必须在线圈中流动才能产生&#xff08;激发&#x…

基于JSP的列车票务信息管理系统

开头语&#xff1a; 你好&#xff0c;我是专注于计算机科学与技术研究的学长。如果你对列车票务信息管理系统感兴趣或有相关需求&#xff0c;欢迎联系我。 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;JSP技术 工具&#xff1a;IDE、数据库管理工具…

【java计算机毕设】网络教学平台java MySQL ssm vue html maven 项目设计 源代码+万字文档

目录 1项目功能 2项目介绍 3项目地址 1项目功能 【java计算机毕设】网络教学平台系统MySQL ssm vue html maven项目代码文档 小组作业 2项目介绍 系统功能&#xff1a; 网络教学平台系统包括管理员、学生、教师俩种角色。 管理员功能包括个人中心模块用于修改个人信息和密码…

HBDNY-40/1端子排电压继电器 DC110V 导轨安装 约瑟JOSEF

HBDNY系列端子排型电压电流继电器 系列型号&#xff1a;&#xff08;3、4过/低电压型&#xff0c;5、6过/低电流型&#xff09; HBDNY-30/1端子排型电压继电器&#xff1b;HBDNY-30/2端子排型电压继电器&#xff1b; HBDNY-30/3端子排型电压继电器&#xff1b;HBDNY-30/4端子…

芒果YOLOv10改进64:主干Backbone篇RepVGG结构:简单但功能强大的卷积神经网络架构

💡本篇内容:YOLOv10改进RepVGG结构:简单但功能强大的卷积神经网络架构 💡🚀🚀🚀本博客 改进源代码改进 适用于 YOLOv10 按步骤操作运行改进后的代码即可 💡本文提出改进 原创 方式:二次创新,YOLOv10 应部分读者要求,新增一篇RepVGG 论文理论部分 + 原创最…

AI视频教程下载-定制GPT:使用您的数据创建一个定制聊天GPT

Custom GPTs_ Create a Custom ChatGPT with Your Data 构建一个定制的GPT&#xff0c;与您自己的数据进行聊天。添加文档&#xff0c;生成图像&#xff0c;并集成API和Zapier。 这门全面的Udemy课程专为那些渴望学习如何创建自己定制版ChatGPT的人设计&#xff0c;以满足他们…

Java 面试笔记 | Java 基础:线程池

前言 在日常的工作学习生活中&#xff0c;用一种好的方法去学习&#xff0c;可以更加有效&#xff0c;比如费曼学习法&#xff1a;将学到的知识用自己的组织的语言表达出来&#xff0c;如果能够清晰明白的向别人解释清楚&#xff0c;那么就说明你是真的懂了&#xff0c;学会了…

常用调试器的接口介绍、支持标准及接线方法

目录 一、STLink接口介绍及接线方法 二、DAPLink接口介绍及接线方法 三、推荐购买链接&#x1f517; 一、STLink接口介绍及接线方法 第一种&#xff1a; 有10个接口&#xff0c;其中SWIM是STM8专用引脚。 查阅资料发现仅支持SWD标准&#xff0c;不支持JTAG标准。我们就知道…

深入理解桥接模式(Bridge Pattern)及其实际应用

引言 在软件开发过程中&#xff0c;设计模式为我们提供了优雅且高效的解决方案&#xff0c;以应对常见的设计问题。桥接模式&#xff08;Bridge Pattern&#xff09;作为一种结构型设计模式&#xff0c;旨在将抽象部分与其实现部分分离&#xff0c;使它们可以独立变化&#xf…

老杨说运维 | 基于业务全链路的端到端排障分析(文末附现场视频)

前言 青城山脚下的滔滔江水奔涌而过&#xff0c;承载着擎创一往无前的势头&#xff0c;共同去向未来。2024年6月&#xff0c;双态IT成都用户大会擎创科技“数智化可观测赋能双态运维”专场迎来了完满的收尾。 本期回顾来自擎创科技产品总监殷传旺的现场演讲&#xff1a;云原生…

雨量传感器设备的监测控制和智慧运维

雨量传感器是一种用于测量降雨量的设备&#xff0c;它通常通过一些感应机制来检测雨水的数量或强度。雨量传感器在气象监测、农业、水利等领域有着广泛应用。 在气象领域&#xff0c;它能为天气预报和气候研究提供重要的数据支持&#xff1b;在农业方面&#xff0c;可以帮助农民…

从零开始如何学习人工智能?

我接触AI的时候&#xff0c;是在研一。那个时候AlphaGo战胜围棋世界冠军李世石是大新闻&#xff0c;人工智能第一次出现我面前&#xff0c;当时就想搞清楚背后的原理以及这些技术有什么作用。 就开始找资料&#xff0c;看视频。随着了解的深入&#xff0c;对AI的兴趣就越大。这…

【已解决】Python报错:AttributeError: module ‘json‘ has no attribute ‘loads‘

&#x1f60e; 作者介绍&#xff1a;我是程序员行者孙&#xff0c;一个热爱分享技术的制能工人。计算机本硕&#xff0c;人工制能研究生。公众号&#xff1a;AI Sun&#xff0c;视频号&#xff1a;AI-行者Sun &#x1f388; 本文专栏&#xff1a;本文收录于《AI实战中的各种bug…

snakeyaml从1.x升级2.x的方案

一、背景 因公司漏洞扫描&#xff0c;发现SnakeYAML 反序列化漏洞(CVE-2022-1471)&#xff0c;所以要求对SnakYaml进行升级。 因项目中未直接引用snakyaml包&#xff0c;经分析是springboot引用的这个包。但是在这个项目中&#xff0c;springboot用的版本是2.3.12.RELEASE版本…

Linux系统学习——指令四

Linux系统学习——指令四 Linux 系统学习——指令四查看文件MD5校验和fuser 指令基本语法常用选项访问类型使用示例 系统信息 Linux 系统学习——指令四 查看文件MD5校验和 在Linux中&#xff0c;你可以使用 md5sum 命令来查看一个文件的MD5校验和。以下是具体的操作方法&…

【C语言】解决C语言报错:Invalid Pointer

文章目录 简介什么是Invalid PointerInvalid Pointer的常见原因如何检测和调试Invalid Pointer解决Invalid Pointer的最佳实践详细实例解析示例1&#xff1a;未初始化的指针示例2&#xff1a;已释放的指针示例3&#xff1a;返回局部变量的指针示例4&#xff1a;野指针 进一步阅…

常见的结构型设计模式

设计模式&#xff08;二&#xff09; 常见的结构型模式 1.代理模式: 提供一种代理方法 &#xff0c;来控制对其他对象的访问。在有些情况下&#xff0c;一个对象不能或者不适合直接访问另一个对象&#xff0c;而代理对象可以在这两个类之间起一个中介的作用。 举例&#xf…

Qt 实战(6)事件 | 6.1、事件机制

文章目录 一、事件1、基本概念2、事件描述3、事件循环4、事件分发4.1、QApplication::notify()4.2、QObject::event() 5、事件传递6、事件处理器 前言&#xff1a; Qt 框架中的事件机制&#xff08;Event Mechanism&#xff09;是一种核心功能&#xff0c;它允许应用程序以事件…

仓库管理系统04--创建业务逻辑

1、添加业务逻辑类 然后依次添加其他的类 2、创建所有DB操作的接口类 3、业务逻辑实现接口类 实现接口的客户类方法 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Xml.Linq;namespace…

Mybatis-Plus学习|快速入门CRUD、主键生成策略(雪花算法、主键自增等)、自动填充、乐观锁、分页插件、逻辑删除

MyBatisPlus概述 为什么要学习它呢?MyBatisPlus可以节省我们大量工作时间&#xff0c;所有的CRUD代码它都可以自动化完成! JPA、tk-mapper、MyBatisPlus 偷懒的! MyBatis-Plus(简称 MP)是一个 MyBatis 的增强工具&#xff0c;在 MyBatis 的基础上只做增强不做改变&#xff…