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

效果图:

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导入并注册后全局使用:
javascript 复制代码
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文件中引入使用:
javascript 复制代码
import { VideoPlayer } from "@videojs-player/vue";
import "video.js/dist/video-js.css";

4、使用组件:

html 复制代码
 <video-player
     ref="videoPlayer"
     @play="handleFullScreen"
     :options="playerOptions"
 />
javascript 复制代码
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博客

相关推荐
iphone108几秒前
一次编码,多端运行:HTML5多终端调用
前端·javascript·html·html5
paopaokaka_luck7 分钟前
智能推荐社交分享小程序(websocket即时通讯、协同过滤算法、时间衰减因子模型、热度得分算法)
数据库·vue.js·spring boot·后端·websocket·小程序
老坛00118 分钟前
2025决策延迟的椭圆算子分析:锐减协同工具的谱间隙优化
前端
老坛00119 分钟前
从记录到预测:2025新一代预算工具如何通过AI实现前瞻性资金管理
前端
今禾22 分钟前
" 当Base64遇上Blob,图像转换不再神秘,让你的网页瞬间变身魔法画布! "
前端·数据可视化
华科云商xiao徐26 分钟前
高性能小型爬虫语言与代码示例
前端·爬虫
十盒半价27 分钟前
深入理解 React useEffect:从基础到实战的全攻略
前端·react.js·trae
攀登的牵牛花28 分钟前
Electron+Vue+Python全栈项目打包实战指南
前端·electron·全栈
iccb101328 分钟前
我是如何实现在线客服系统的极致稳定性与安全性的
前端·javascript·后端
一大树29 分钟前
Vue3祖孙组件通信方法总结
前端·vue.js