本文参考：https://www.jianshu.com/p/df4780086a8b
https://segmentfault.com/a/1190000020149370
https://www.jianshu.com/p/532fc1d8c90c
http://www.hellojava.com/a/85349.html
安装
npm install vue-video-player --save
引入
【1】全局引用， 在main.js里面导入并引用
import VideoPlayer from 'vue-video-player'
import 'vue-video-player/src/custom-theme.css'
import 'video.js/dist/video-js.css'
Vue.use(VideoPlayer)
【2】组件内引用
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
export default {
components: {
videoPlayer
}
}
注意，如果出现报错找不到video.js/dist/video-js.css。
这里我们只需要将引入video-js.css的路径改为vue-video-player/node_modules/video.js/dist/video-js.css。
如：
require('vue-video-player/node_modules/video.js/dist/video-js.css')。
使用
【1】html部分
【2】js部分
export default {
data() {
return {
playerOptions: {
playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
autoplay: false, // 如果为true,浏览器准备好时开始回放。
muted: false, // 默认情况下将会消除任何音频。
loop: false, // 是否视频一结束就重新开始。
preload: 'auto', // 建议浏览器在内置方法
还可以通过ref控制播放和暂停
this.$refs.videoPlayer.player.play() // 播放
this.$refs.videoPlayer.player.pause() // 暂停
this.$refs.videoPlayer.player.src(src) // 重置进度条
兼容m3u8格式
npm install --save videojs-contrib-hls
在文件中引入
import 'videojs-contrib-hls'
我这么引入会出现找不到文件，我没找到问题所在，如果这么引入不行，可以改为
在main.js文件中
const hls = require('videojs-contrib-hls')
Vue.use(hls)
这样就好了
在页面中使用
{
type: 'application/x-mpegURL', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
src: 'https://cdn.letv-cdn.com/2018/12/05/JOCeEEUuoteFrjCg/playlist.m3u8' // url地址，从别的博主那看来的地址，亲测可用
}
播放rtmp视频流
安装videojs-flash插件
npm i videojs-flash -S
main.js引入
import 'videojs-flash'; //引入才能播放rtmp视屏
配置
playerOptions:{
playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
autoplay: false, //如果true,浏览器准备好时开始回放。
muted: false, // 默认情况下将会消除任何音频。
loop: false, // 导致视频一结束就重新开始。
preload: 'auto', // 建议浏览器在使用过程中遇到的问题
1、设置了autoplay: true 不能自动播放，原因是我这里播放视频的窗口小于了400x400
2、如何使用外部按钮点击全屏
//点击全屏播放
handleFullScreen(index){
const player = this.$refs.videoPlayer.player;
player.requestFullscreen();//调用全屏api方法
player.isFullscreen(true)
player.play()
}
用来测试的流
香港财经：rtmp://202.69.69.180:443/webcast/bshdlive-pc
芒果TV：rtmp://58.200.131.2:1935/livetv/hunantv
韩国GoodTV：rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp