custom-vue-video-player
v0.0.3
Published
vue-video-player custom version
Downloads
1
Readme
custom-vue-video-player
介绍
修改 vue-video-player 组件,解决使用指令时组件重载问题。以及包含 hls 防盗链案例。
安装说明
npm install custom-vue-video-player videojs-contrib-hls -S
使用说明
1. nuxtjs 中使用
import Vue from "vue";
const VueVideoPlayer = require("custom-vue-video-player/dist/ssr");
import "custom-vue-video-player/src/custom-theme.css"; // 如何过你需要的话。
const hls = require("videojs-contrib-hls");
Vue.use(hls);
Vue.use(VueVideoPlayer);
<div
class="video-player-box"
ref="videoPlayer"
crossOrigin="anonymous"
playsinline
@mousemove="mouseMoveVideo"
@mouseleave="mouseOverVideo"
@play="onPlayerPlay($event)"
@pause="onPlayerPause($event)"
@ended="onPlayerEnded($event)"
@loadeddata="onPlayerLoadeddata($event)"
@waiting="onPlayerWaiting($event)"
@playing="onPlayerPlaying($event)"
@timeupdate="onPlayerTimeupdate($event)"
@canplay="onPlayerCanplay($event)"
@canplaythrough="onPlayerCanplaythrough($event)"
@ready="playerReadied"
@statechanged="playerStateChanged($event)"
v-video-player:myVideoPlayer="{...options,allowUpdate: false}"
></div>
2. 常规使用
<template>
<div id="app">
<-- 常规、可播m3u8 -->
<video-player
class="video-player-box vjs-custom-skin"
ref="videoPlayer"
:options="playerOptions"
:playsinline="true"
>
</video-player>
</div>
</template>
<script>
import VideoPlayer from "custom-vue-video-player";
export default {
name: "app",
data() {
return {
playerOptions: {
// videojs options
allowUpdate: false, // 设置false,禁止指令强制重载组件。
muted: true,
language: "en",
playbackRates: [0.7, 1.0, 1.5, 2.0],
sources: [
{
type: "application/x-mpegURL",
src: "https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8"
}
]
}
};
},
components: {
VideoPlayer
},
computed: {
player() {
return this.$refs.videoPlayer.player;
}
}
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.video-player-box .video-js {
margin: 0 auto;
width: 796px;
height: 448px;
}
</style>
3. Hls 防盗链模拟(此处指 m3u8 文件和 ts 文件都加上防盗 token)
<template>
<div id="app">
<-- 常规、可播m3u8、防盗链模拟 -->
<video-player
class="video-player-box2 vjs-custom-skin"
ref="videoPlayer"
:options="playerOptions"
:playsinline="true"
@ready="playerReadied"
>
</video-player>
</div>
</template>
<script>
import VideoPlayer from "custom-vue-video-player";
import md5 from "md5";
const vUrl = "https://d2zihajmogu5jn.cloudfront.net";
export default {
name: "app",
data() {
return {
playerOptions: {
// videojs options
allowUpdate: false, // 设置false,禁止指令强制重载组件。
muted: true,
language: "en",
playbackRates: [0.7, 1.0, 1.5, 2.0],
sources: [
{
type: "application/x-mpegURL",
src: this.uptUpdate("/bipbop-advanced/bipbop_16x9_variant.m3u8")
}
]
}
};
},
components: {
VideoPlayer
},
methods: {
uptUpdate(path) {
let secret = md5(new Date().getTime());
return vUrl + path + "?token=" + secret;
},
playerReadied() {
let that = this;
this.player.hls.xhr.beforeRequest = function(options) {
options.uri = that.uptUpdate(options.uri.replace(vUrl, ""));
console.info("防盗链token模拟", options.uri);
return options;
};
}
},
computed: {
player() {
return this.$refs.videoPlayer.player;
}
}
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.video-player-box2 .video-js {
margin: 0 auto;
width: 796px;
height: 448px;
margin-top: 50px;
}
</style>