|
|
|
<template>
|
|
|
|
<div class="video-player">
|
|
|
|
<video
|
|
|
|
v-if="showVideo"
|
|
|
|
ref="videoPlayer"
|
|
|
|
class="video-js vjs-matrix vjs-yoho"
|
|
|
|
controls
|
|
|
|
:poster="coverImg"
|
|
|
|
preload="auto"
|
|
|
|
muted="muted"
|
|
|
|
autoplay="none"
|
|
|
|
playsinline
|
|
|
|
x5-playsinline
|
|
|
|
webkit-playsinline="true"
|
|
|
|
>
|
|
|
|
<source :src="source" :type="sourceType" />
|
|
|
|
<p class="vjs-no-js">
|
|
|
|
To view this video please enable JavaScript, and consider upgrading to a
|
|
|
|
web browser
|
|
|
|
</p>
|
|
|
|
<div class="vjs-yoho-voice"></div>
|
|
|
|
</video>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import { get } from "lodash";
|
|
|
|
import videojs from "video.js";
|
|
|
|
import { getArticleImageSize, processImage } from "utils/image-handler";
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: "VideoPlayer",
|
|
|
|
props: {
|
|
|
|
source: String,
|
|
|
|
cover: String,
|
|
|
|
width: [Number, String],
|
|
|
|
height: [Number, String],
|
|
|
|
options: {
|
|
|
|
type: Object,
|
|
|
|
default() {
|
|
|
|
return {
|
|
|
|
muted: true,
|
|
|
|
controls: true,
|
|
|
|
aspectRatio: "1:1"
|
|
|
|
};
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
showVideo: false,
|
|
|
|
player: null
|
|
|
|
};
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
coverImg() {
|
|
|
|
if (this.cover) {
|
|
|
|
if (this.width && this.height) {
|
|
|
|
let imgSize = getArticleImageSize({
|
|
|
|
width: this.width,
|
|
|
|
height: this.height,
|
|
|
|
minScale: 0,
|
|
|
|
maxWidth: 500
|
|
|
|
});
|
|
|
|
|
|
|
|
return processImage(
|
|
|
|
this.cover,
|
|
|
|
2,
|
|
|
|
imgSize.width,
|
|
|
|
imgSize.height,
|
|
|
|
get(this.yoho, "window.supportWebp")
|
|
|
|
);
|
|
|
|
} else {
|
|
|
|
return this.cover.split("?")[0];
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
return "";
|
|
|
|
}
|
|
|
|
},
|
|
|
|
sourceType() {
|
|
|
|
let type = "video/mp4";
|
|
|
|
|
|
|
|
if (this.source) {
|
|
|
|
let source = this.source.split("?")[0];
|
|
|
|
|
|
|
|
source = source.split(".");
|
|
|
|
|
|
|
|
switch (source[source.length - 1]) {
|
|
|
|
case "opus":
|
|
|
|
case "ogv":
|
|
|
|
type = "video/ogg";
|
|
|
|
break;
|
|
|
|
case "mkv":
|
|
|
|
type = "video/x-matroska";
|
|
|
|
break;
|
|
|
|
case "m3u8":
|
|
|
|
type = "application/x-mpegURL";
|
|
|
|
break;
|
|
|
|
case "m4a":
|
|
|
|
type = "audio/mp4";
|
|
|
|
break;
|
|
|
|
case "mp3":
|
|
|
|
type = "audio/mpeg";
|
|
|
|
break;
|
|
|
|
case "aac":
|
|
|
|
type = "audio/aac";
|
|
|
|
break;
|
|
|
|
case "oga":
|
|
|
|
type = "audio/ogg";
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return type;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
source() {
|
|
|
|
this.showPlayer();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
this.showPlayer();
|
|
|
|
},
|
|
|
|
beforeDestroy() {
|
|
|
|
if (this.player) {
|
|
|
|
this.player.dispose();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
parentHandleclick() {
|
|
|
|
this.player.play();
|
|
|
|
const timeId = setTimeout(() => {
|
|
|
|
this.player.requestFullscreen();
|
|
|
|
clearTimeout(timeId);
|
|
|
|
});
|
|
|
|
},
|
|
|
|
showPlayer() {
|
|
|
|
if (this.showVideo || !this.source) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.showVideo = true;
|
|
|
|
this.$nextTick(() => {
|
|
|
|
this.initPlayer();
|
|
|
|
});
|
|
|
|
},
|
|
|
|
initPlayer() {
|
|
|
|
const noVioceClass = "vjs-yoho-novoice";
|
|
|
|
|
|
|
|
this.player = videojs(this.$refs.videoPlayer, this.options);
|
|
|
|
|
|
|
|
this.voiceBtn = this.player.addChild("button");
|
|
|
|
this.voiceBtn.addClass("vjs-yoho-voice");
|
|
|
|
this.voiceBtn.addClass(noVioceClass);
|
|
|
|
this.backBtn = this.player.addChild("button");
|
|
|
|
this.backBtn.addClass("vjs-yoho-back");
|
|
|
|
this.voiceBtn.on("touchend", () => {
|
|
|
|
this.player.muted(!this.voiceBtn.hasClass(noVioceClass));
|
|
|
|
});
|
|
|
|
this.backBtn.on("touchend", () => {
|
|
|
|
this.player.exitFullscreen();
|
|
|
|
});
|
|
|
|
|
|
|
|
this.player.on("play", () => {
|
|
|
|
this.player._yohoPlayTime = this.getTime();
|
|
|
|
});
|
|
|
|
this.player.on("pause", () => {
|
|
|
|
this.player._yohoPauseTime = this.getTime();
|
|
|
|
});
|
|
|
|
this.player.on("ended", () => {
|
|
|
|
this.player._yohoEndedTime = this.getTime();
|
|
|
|
});
|
|
|
|
|
|
|
|
this.player.on("fullscreenchange", () => {
|
|
|
|
this.player._yohoPlayTime = this.getTime();
|
|
|
|
});
|
|
|
|
|
|
|
|
this.player.on("volumechange", () => {
|
|
|
|
const soundOff = this.player.muted() || this.player.volume() === 0;
|
|
|
|
|
|
|
|
if (soundOff) {
|
|
|
|
this.voiceBtn.addClass(noVioceClass);
|
|
|
|
} else {
|
|
|
|
this.voiceBtn.removeClass(noVioceClass);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
// setTimeout(() => {
|
|
|
|
// this.$yoho.getNetStatus({}, res => {
|
|
|
|
// if (res && +res.wifi === 1) {
|
|
|
|
// this.player.autoplay("muted");
|
|
|
|
// }
|
|
|
|
// });
|
|
|
|
// }, 1000);
|
|
|
|
},
|
|
|
|
getTime() {
|
|
|
|
return new Date().getTime();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.video-js {
|
|
|
|
width: 100%;
|
|
|
|
height: auto;
|
|
|
|
|
|
|
|
video {
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.vjs-yoho /deep/ {
|
|
|
|
position: relative;
|
|
|
|
background-color: #222;
|
|
|
|
|
|
|
|
.vjs-resize-manager {
|
|
|
|
z-index: 0;
|
|
|
|
visibility: hidden;
|
|
|
|
}
|
|
|
|
|
|
|
|
.vjs-poster {
|
|
|
|
background-color: #222;
|
|
|
|
}
|
|
|
|
|
|
|
|
.vjs-yoho-voice {
|
|
|
|
width: 60px;
|
|
|
|
height: 60px;
|
|
|
|
position: absolute;
|
|
|
|
top: 20px;
|
|
|
|
right: 28px;
|
|
|
|
opacity: 0;
|
|
|
|
visibility: hidden;
|
|
|
|
background: url("~statics/image/components/video-voice-icon.png");
|
|
|
|
background-size: cover;
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
|
|
&.vjs-yoho-novoice {
|
|
|
|
background-position: bottom left;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&.vjs-has-started .vjs-yoho-voice {
|
|
|
|
visibility: visible;
|
|
|
|
opacity: 1;
|
|
|
|
transition: visibility 1s, opacity 1s;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-yoho-voice {
|
|
|
|
visibility: visible;
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.vjs-big-play-button {
|
|
|
|
width: 126px;
|
|
|
|
height: 126px;
|
|
|
|
line-height: 126px;
|
|
|
|
font-size: 60px;
|
|
|
|
border: none;
|
|
|
|
left: 50%;
|
|
|
|
top: 50%;
|
|
|
|
margin: -63px auto auto -63px;
|
|
|
|
|
|
|
|
/*background: url("~statics/image/components/video-play-btn.png");*/
|
|
|
|
background: url("data:image/png;base64,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");
|
|
|
|
background-size: contain;
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
|
|
> * {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes roundframe {
|
|
|
|
0% {
|
|
|
|
-webkit-transform: rotate(0deg);
|
|
|
|
}
|
|
|
|
25% {
|
|
|
|
-webkit-transform: rotate(90deg);
|
|
|
|
}
|
|
|
|
50% {
|
|
|
|
-webkit-transform: rotate(180deg);
|
|
|
|
}
|
|
|
|
75% {
|
|
|
|
-webkit-transform: rotate(270deg);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
-webkit-transform: rotate(360deg);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.vjs-loading-spinner {
|
|
|
|
width: 110px;
|
|
|
|
height: 110px;
|
|
|
|
margin-top: -55px;
|
|
|
|
margin-left: -55px;
|
|
|
|
border: none;
|
|
|
|
background: url("~statics/image/components/video-loading-icon.png");
|
|
|
|
background-size: contain;
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
background-position: center center;
|
|
|
|
visibility: visible;
|
|
|
|
animation: roundframe 1.3s linear infinite;
|
|
|
|
|
|
|
|
&:before,
|
|
|
|
&:after,
|
|
|
|
> * {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.vjs-control-bar {
|
|
|
|
height: 80px;
|
|
|
|
background: none;
|
|
|
|
padding-bottom: 20px;
|
|
|
|
|
|
|
|
.vjs-control {
|
|
|
|
width: 80px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.vjs-play-control {
|
|
|
|
width: 60px;
|
|
|
|
height: 60px;
|
|
|
|
margin-left: 20px;
|
|
|
|
background: url("~statics/image/components/video-play-icon.png");
|
|
|
|
background-size: cover;
|
|
|
|
|
|
|
|
&.vjs-playing {
|
|
|
|
background-position: bottom left;
|
|
|
|
}
|
|
|
|
|
|
|
|
> * {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.vjs-volume-panel {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
.vjs-duration,
|
|
|
|
.vjs-current-time {
|
|
|
|
display: block;
|
|
|
|
order: 3;
|
|
|
|
|
|
|
|
> span {
|
|
|
|
font-size: 22px;
|
|
|
|
font-weight: 300;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.vjs-time-control {
|
|
|
|
line-height: 60px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.vjs-current-time {
|
|
|
|
order: 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
.vjs-remaining-time {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
.vjs-progress-control {
|
|
|
|
order: 2;
|
|
|
|
|
|
|
|
.vjs-progress-holder {
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.vjs-progress-holder,
|
|
|
|
.vjs-load-progress,
|
|
|
|
.vjs-play-progress {
|
|
|
|
height: 1px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.vjs-play-progress:before {
|
|
|
|
font-size: 10px;
|
|
|
|
top: 0;
|
|
|
|
transform: translateY(-44%);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.vjs-fullscreen-control {
|
|
|
|
order: 4;
|
|
|
|
width: 60px;
|
|
|
|
height: 60px;
|
|
|
|
margin-right: 20px;
|
|
|
|
background: url("~statics/image/components/video-fullscreen-icon.png");
|
|
|
|
background-size: cover;
|
|
|
|
|
|
|
|
> * {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.vjs-icon-placeholder:before {
|
|
|
|
font-size: 38px;
|
|
|
|
line-height: 60px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&.vjs-fullscreen .vjs-fullscreen-control {
|
|
|
|
background-position: bottom left;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.vjs-fullscreen .vjs-yoho-back {
|
|
|
|
width: 40px;
|
|
|
|
height: 42px;
|
|
|
|
background: url("~statics/image/components/video-back-icon.png");
|
|
|
|
background-size: contain;
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
position: absolute;
|
|
|
|
top: 20px;
|
|
|
|
left: 32px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style> |
...
|
...
|
|
