vue中视频播放

image.png

这里使用了一个用videojs封装的vue组件https://github.com/surmon-china/vue-video-player

1. 安装注册
npm install vue-video-player --save

import VueVideoPlayer from 'vue-video-player'

// 引入基本样式 因为我想直接修改样式 所以复制出来自己引入 当然也可以引入他的然后复写
import '@/assets/css/video-js.css';

Vue.use(VueVideoPlayer, /* {
  options: global default options,
  events: global videojs events
} */)
2. 使用

这里主要需要两个功能,一个是播放,另一个就是动态加载不同的视频。
主要代码如下

export default { data() { return { playerOptions: { muted: true, language: 'zh-CN', playbackRates: [0.7, 1.0, 1.5, 2.0], sources: [{ type: 'video/mp4', src: 'http://192.168.201.188:8000/demo-video.mp4', }], }, computed: { player() { return this.$refs.videoPlayer.player; }, },
如何动态切换视频源
// 直接通过动态修改 playerOptions.sources[0]就可以了
playerOptions.sources[0].src = item

你可能感兴趣的:(vue中视频播放)