本文链接:【Nuxt】四、vue-video-player使用
相关文档:【Vue】插件:八、结合 vue-video-player、videojs-flash、videojs-contrib-hls使用videojs播放视频
相关文档:【JS&JQuery】videojs插件使用
video.js
|--项目
|--|--plugins
|--|--|--video.js
import Vue from 'vue';
const VueVideoPlayer= require('vue-video-player/dist/ssr');
const hls = require('videojs-contrib-hls');
import 'vue-video-player/src/custom-theme.css';
import Video from 'video.js';
import 'video.js/dist/video-js.css';
import zhCN from './video-zh-CN.json';
import 'videojs-flash';
const SWF_URL=require('videojs-swf/dist/video-js.swf');
Video.options.flash.swf = SWF_URL; // 设置flash路径，Video.js会在不支持html5的浏览中使用flash播放视频文件
Video.addLanguage('zh-CN', zhCN);// 添加中文支持
Vue.use(hls);
Vue.use(VueVideoPlayer);
video-zh-CN.json
|--项目
|--|--node_modules
|--|--|--video.js
|--|--|--|--dist
|--|--|--|--|--lang
|--|--|--|--|--|--zh-CN.js
将zh-CN.js中的 JSON 内容拷贝至video-zh-CN.json中
{
"Play": "播放",
...
}
|--|--plugins
|--|--|--video.js
|--|--|--video-zh-CN.json
nuxt.config.js
plugins: [
"@/plugins/video",
],
build: {
transpile: [/^element-ui/],
/*
** You can extend webpack config here
*/
postcss: [
require("postcss-px2rem")({
remUnit: 100
})
],
extend(config, {isDev, isClient}) {
if (isDev && isClient) {
config.module.rules.push({
enforce: "pre",
test: /\.(js|vue)$/,
loader: "eslint-loader",
exclude: /(node_modules)/
});
config.devtool = "eval-source-map";
}
config.module.rules.push({
test: /\.swf$/,
loader: "url-loader",
options:{
limit: 10000
}
});
}
}
template
第1种SPA
template
<video-player
class="confVideo vjs-custom-skin video-player"
ref="videoPlayer"
:options="playerOptions"
:playsinline="true"
customEventName="customstatechangedeventname"
@ready="playerReadied"
@loadeddata="onPlayerLoadeddata($event)"
@canplay="onPlayerCanplay($event)"
@canplaythrough="onPlayerCanplaythrough($event)"
@play="onPlayerPlay($event)"
@playing="onPlayerPlaying($event)"
@timeupdate="onPlayerTimeupdate($event)"
@pause="onPlayerPause($event)"
@waiting="onPlayerWaiting($event)"
@ended="onPlayerEnded($event)"
@statechanged="playerStateChanged($event)"
>
</video-player>
script
import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'
export default {
components: {
videoPlayer
},
mounted() {
console.log('当前videojs对象', this.player)
},
computed: {
player() {
return this.$refs.videoPlayer.player
}
},
}
第2种SSR
template
<div
v-video-player:myVideoPlayer="playerOptions"
class="confVideo vjs-custom-skin video-player"
ref="videoPlayer"
:playsinline="true"
customEventName="customstatechangedeventname"
@ready="playerReadied"
@loadeddata="onPlayerLoadeddata($event)"
@canplay="onPlayerCanplay($event)"
@canplaythrough="onPlayerCanplaythrough($event)"
@play="onPlayerPlay($event)"
@playing="onPlayerPlaying($event)"
@timeupdate="onPlayerTimeupdate($event)"
@pause="onPlayerPause($event)"
@waiting="onPlayerWaiting($event)"
@ended="onPlayerEnded($event)"
@statechanged="playerStateChanged($event)"
></div>
script
<script>
export default {
mounted() {
console.log('当前videojs对象, this.myVideoPlayer)
}
// Omit the same parts as in the following component sample code
// ...
}
</script>
script
playerOptions: {
techOrder: ['html5', 'flash'], // 兼容顺序,使用flash播放，可以播放flv格式的文件
playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
autoplay: false, // 如果true,浏览器准备好时开始回放
notSupportedMessage: '此视频暂无法播放!', // 无法播放时显示的信息
sourceOrder: true,
loop: false, // 导致视频一结束就重新开始。
// preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
muted: true, // 默认情况下将会消除任何音频。
language: 'zh-CN',
// aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
hls: true, //启用hls？
flash: {
hls: { withCredentials: false },
swf: '/videojs/video-js.swf'
},
html5: { hls: { withCredentials: false } },
sources: [
{
type: 'video/mp4', // 资源格式写法：'video/mp4'
src: '/video/1.mp4' // 本地资源地址，注意：本地资源存放在public文件夹中，本文视频资源路径public/video/1.mp4
}，
{
// withCredentials: true，
type: 'application/x-mpegURL', // hls
src: 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8' // url地址
}，
{
type:'rtmp/flv',//rtmp
src:'rtmp://live.hkstv.hk.lxdns.com/live/hks'//rtmp
},
{
type: 'rtmp/flv',//rtmp
src: `rtmp://58.200.131.2:1935/livetv/hunantv`
},
{
type: 'rtmp/mp4', // 资源格式写法：'video/mp4'
src: 'rtmp://' // url地址
}
],
poster: 'path', // 你的封面地址
// width: document.documentElement.clientWidth,
// height: this.fileAreaHeight, // 设置高度，fluid需要设置成flase
// 配置控制栏
controlBar: {
volumePanel: {
inline: false //音量调节是否水平
},
currentTimeDisplay: true, //当前播放位置
timeDivider: false, // 时间分割线
durationDisplay: false, // 总时间
progressControl: true, // 进度条
remainingTimeDisplay: false, // 剩余时间
fullscreenToggle: true // 全屏按钮
}
},
