vue项目中实现视频播放

最新推荐文章于 2025-06-06 17:10:11 发布

原创最新推荐文章于 2025-06-06 17:10:11 发布 · 1.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍了在Vue中使用vue-video-player组件的详细步骤，包括安装组件、配置vue.config.js和main.js，还给出了html和javascript部分的配置。此外，提供了重新赋值视频地址、获取视频总时长与当前进度、设置播放进度等常用方法，最后给出HTTP Live Streaming相关参考文章。

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

一、安装组件：vue-video-player

npm install vue-video-player -S

二、配置vue.config.js（目的是把videojs提升为全局变量）

configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        videojs: ‘video.js’,
      })
    ]
  }
或
chainWebpack: config => {
    config
        .plugin(‘provide’)
        .use(webpack.ProvidePlugin, [{
            videojs: ‘video.js’,
            ‘window.videojs’: ‘video.js’
        }])
  }

三、配置main.js

import VideoPlayer from ‘vue-video-player’
import ‘video.js/dist/video-js.css’
import ‘vue-video-player/src/custom-theme.css’
// 加载国际化相关js （如果不需要则上面的第二个步骤可以省略）
import ‘video.js/dist/lang/zh-CN.js’
Vue.use(VideoPlayer)

四、html部分

五、javascript部分

playerOptions: {
// 播放速度
playbackRates: [0.5, 1.0, 1.5, 2.0],
// 如果true,浏览器准备好时开始回放。
autoplay: false,
// 默认情况下将会消除任何音频。
muted: false,
// 导致视频一结束就重新开始。
loop: false,
// 建议浏览器在加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
preload: ‘auto’,
language: ‘zh-CN’,
// 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
aspectRatio: ‘16:9’,
// 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
fluid: true,
sources: [{
// 类型
type: “video/mp4”,
// url地址
src: ‘’
}],
// 你的封面地址
poster: ‘’,
// 允许覆盖Video.js无法播放媒体源时显示的默认信息
notSupportedMessage: ‘此视频暂无法播放，请稍后再试’,
controlBar: {
// 分隔符 ‘/’
timeDivider: true,
// 总时间
durationDisplay: true,
// 剩余播放时间
remainingTimeDisplay: false,
//全屏按钮
fullscreenToggle: true
}
}

到此就已经一切ok了。

下面再提供几个常用的方法:

重新赋值视频地址
this.playerOptions.sources[0].src = ‘http://vjs.zencdn.net/v/oceans.mp4’
或
this.playerOptions.sources = [{
type: “video/mp4”,
src: ‘http://vjs.zencdn.net/v/oceans.mp4’
}]
获取视频的总时长与当前播放进度
// 监听 timeupdate 事件
onPlayerTimeupdate (player) {
let {currentTime, duration} = player.cache_
console.log(‘当前进度：’, currentTime, ’ 秒, 总时长: ', duration, ‘秒’)
}
设置视频播放进度
// 监听 ready 事件，或其他合适的时机
onPlayerReadied (player) {
player.currentTime(30)
}

记录：针对杨总提到的HTTP Live Streaming，找到了两篇文章，后期有需要时可以参考一下。

https://segmentfault.com/a/1190000020149370
https://www.jianshu.com/p/8cfc2c953d8a?utm_campaign=haruki