所用插件vue-video-player 这是一款基于video.js的视频播放器插件
插件的使用:
安装:
npm install vue-video-player --save
全局引入
import Vue from 'vue'
import VueVideoPlayer from 'vue-video-player'
// require videojs style
import 'video.js/dist/video-js.css'
// import 'vue-video-player/src/custom-theme.css'
Vue.use(VueVideoPlayer, /* {
options: global default options,
events: global videojs events
} */)
在组件中引入
// require styles
import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'
export default {
components: {
videoPlayer
}
}
我们封装一个video的组件
<template> <div class="video-js"> <div v-if="videoSrc===''" class="no-video"> </div> <video-player v-else class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions" > </video-player> </div> </template> <script> import videojs from 'video.js' import 'video.js/dist/video-js.css' import 'vue-video-player/src/custom-theme.css' import {videoPlayer} from 'vue-video-player' import 'videojs-flash' import SWF_URL from 'videojs-swf/dist/video-js.swf' import 'videojs-contrib-hls.js/src/videojs.hlsjs' videojs.options.flash.swf = SWF_URL // 设置flash路径,Video.js会在不支持html5的浏览中使用flash播放视频文件 export default { components: { videoPlayer }, props: { videoSrc: { type: String, required: true }, sources02: { type: String, required: true }, poster: { type: String, required: true } }, data () { return { playerOptions: { live: true, autoplay: true, // 如果true,浏览器准备好时开始播放 muted: false, // 默认情况下将会消除任何音频 loop: false, // 是否视频一结束就重新开始 preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持) aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3") fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。 controlBar: { timeDivider: false, durationDisplay: false, remainingTimeDisplay: false, currentTimeDisplay: false, // 当前时间 volumeControl: false, // 声音控制键 playToggle: false, // 暂停和播放键 progressControl: false, // 进度条 fullscreenToggle: true // 全屏按钮 }, techOrder: ['html5', 'flash'], // 兼容顺序 flash: { hls: { withCredentials: false }, html5: { hls: { withCredentials: false } }, swf: SWF_URL }, sources: [ { withCredentials: false, type: 'application/x-mpegURL', src: this.sources02 } ], poster: this.poster, notSupportedMessage: '此视频暂无法播放,请稍后再试' // 允许覆盖Video.js无法播放媒体源时显示的默认信息。 } } } } </script> <style scoped lang="scss"> .video-js{ width:100%; height:auto; .no-video{ display:flex; color: #fff; height:150px; width: 100%; font-size:14px; text-align:center; justify-content: center; align-items:center; } } </style>
在父组件中引入
videoSrc:播放源1
sources02:播放源2
poster:封面图