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了。

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

  1. 重新赋值视频地址
    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’
    }]
  2. 获取视频的总时长与当前播放进度
    // 监听 timeupdate 事件
    onPlayerTimeupdate (player) {
    let {currentTime, duration} = player.cache_
    console.log(‘当前进度:’, currentTime, ’ 秒, 总时长: ', duration, ‘秒’)
    }
  3. 设置视频播放进度
    // 监听 ready 事件,或其他合适的时机
    onPlayerReadied (player) {
    player.currentTime(30)
    }

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

  1. https://segmentfault.com/a/1190000020149370
  2. https://www.jianshu.com/p/8cfc2c953d8a?utm_campaign=haruki
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值