单页面引用
import "video.js/dist/video-js.css";
import { videoPlayer } from "vue-video-player";
import VideoPlayerOption from "@/app/com/bean/VideoPlayerOption";
html
<div class="video">
<video-player
class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions"
@pause="onPlayerPause($event)"
@play="onPlayerPlay($event)"
@ended="onPlayerEnded($event)"
>
</video-player>
<div
class="tilt"
@click="onPlayerClick"
>
</div>
css
.video-player,
.video-js {
position: relative;
width: 100%;
height: 100% !important;
}
.vjs-fluid {
padding: 0 !important;
}
.video {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 0;
.tilt {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 3.0em;
z-index: 1;
}
}
ts
private playerOptions: VideoPlayerOption = new VideoPlayerOption();
private isPlay: boolean = false;
get player() {
const videoPlayer: any = this.$refs.videoPlayer;
return videoPlayer.player;
}
private onPlayerPause(e: any) {
this.isPlay = false;
}
private onPlayerPlay(e: any) {
this.isPlay = true;
}
private onPlayerClick() {
if (this.isPlay) {
this.player.pause();
} else {
this.player.play();
}
}
VideoPlayerOption
export default class VideoPlayerOption {
public playbackRates: Array<number> = [0.5, 1.0, 1.5, 2.0]
public autoplay: boolean = false
public muted: boolean = false
public loop: boolean = true
public preload: string = "auto"
public language: string = "zh-CN"
public aspectRatio: string = "16:9"
public fluid: boolean = true
public sources: Array<{ type: string, src: string }> = [
{
type: "video/mp4",
src: ""
},
]
public poster: string = ""
public notSupportedMessage: string = "此视频暂无法播放,请稍后再试"
public controlBar: object = {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: true
}
}