<template>
<div class="activity-rule">
<div v-if="videoUrl" style="position: relative;">
<!-- 视频和图片 -->
<van-swipe
class="my-swipe"
indicator-color="#1989fa"
:loop="false"
:show-indicators="true"
:height="swiperHeight"
@change="swiper_change"
>
<!-- 视频 -->
<van-swipe-item>
<video-player
ref="videoPlayer"
class="video-player vjs-custom-skin"
:playsinline="true"
:options="playerOptions"
custom-event-name="customstatechangedeventname"
@pause="onPlayPause()"
@play="onPlayPlay()"
@ended="onPlayEnded($event)"
/>
</van-swipe-item>
<!-- 图片 -->
<van-swipe-item v-for="(item,index) in images" :key="index">
<van-image :src="item">
<template v-slot:loading>
<van-loading type="spinner" size="20" />
</template>
</van-image>
</van-swipe-item>
<template #indicator>
<div class="custom-indicator"><span>{{ currents + 1 }}/{{ images.length+1 }}</span></div>
</template>
</van-swipe>
<img
v-if="currents === 0 && isShowPlayIcon"
src="../../assets/img/video_play.png"
class="play-icon"
alt=""
@click="onPlay"
>
</div>
<!-- 仅图片 -->
<van-swipe
v-else
class="my-swipe"
indicator-color="#1989fa"
:loop="true"
:autoplay="3000"
:show-indicators="true"
:height="swiperHeight"
@change="swiper_change"
>
<van-swipe-item v-for="(item,index) in images" :key="index">
<van-image :src="item">
<template v-slot:loading>
<van-loading type="spinner" size="20" />
</template>
</van-image>
</van-swipe-item>
<template #indicator>
<div class="custom-indicator"><span>{{ currents + 1 }}/{{ images.length+1 }}</span></div>
</template>
</van-swipe>
</div>
</template>
<script>
import { Swipe, SwipeItem, Image } from 'vant'
import Vue from 'vue'
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(Image)
export default {
props: {
videoSrc: {
type: String,
default: ''
},
headUrl: {
type: String,
default: ''
}
},
data() {
return {
isShowPlayIcon: true,
videoUrl: '',
images: [],
playerOptions: {
playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
autoplay: false, // 如果true,浏览器准备好时开始回放。
muted: false, // 默认情况下将会消除任何音频。
loop: false, // 导致视频一结束就重新开始。
// 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
language: 'zh-CN',
aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
sources: [{
type: 'video/mp4', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
src: '' // url地址
}],
notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
controlBar: {// 允许覆盖Video.js无法播放媒体源时显示的默认信息。
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: false // 全屏按钮
},
width: 0,
height: 0,
// 你的封面地址
poster: ''
},
screenWidth: document.body.clientWidth, // body宽
swiperHeight: 0, // swiper块高
video_pause: 0, // 判断滑动块位置是不是video
videoType: true, // 这里判断滑动块是video界面时的视频状态（暂停、播放）
currents: 0, // 轮播当前号
jiaobiao_number: 0 // 角标数,根据图片长度和视频长度之和
}
},
computed: {
player() {
return this.$refs.videoPlayer && this.$refs.videoPlayer.player
}
},
created() {
this.$nextTick(() => {
setTimeout(() => {
this.swiperHeight = this.screenWidth * 422 / 750// swiper块高和body宽比例取值
this.videoUrl = this.videoSrc
// 轮播图
if (this.headUrl) {
const urlData = JSON.parse(this.headUrl)
if (urlData && urlData.length > 0) {
this.images = urlData.map(item => item.raw.url)
}
}
// 视频
if (this.videoUrl) {
// -----------------------修改视频参数------------------------------------
this.playerOptions['width'] = this.screenWidth// 修改data里playerOptions数组里面的视频宽width
this.playerOptions['height'] = this.swiperHeight// 修改data里playerOptions数组里面视频高height
if (this.images && this.images.length > 0) this.playerOptions['poster'] = this.images[0] // 给视频赋第一张图
this.playerOptions['sources'][0]['src'] = this.videoUrl
this.player && this.player.player()
}
}, 1000)
})
},
methods: {
swiper_change(index) { // swiper切换
this.currents = index
// 有视频的切换
if (this.videoUrl) {
var myVideo = document.getElementsByTagName('video')[0]
console.log(11111111111111, index)
if (index === 0) {
console.log(2222222222, myVideo.currentTime, this.video_pause, this.playerOptions)
this.video_pause = 0// 当在0（视频）处，赋值为0，其他地方赋值为1，为了后面判断切换状态
if (myVideo.currentTime > 0 && this.videoUrl) { // 判断视频是否被点击观看
if (this.videoType === true) { // 判断之前离开video滑块时是否暂停播放
myVideo.play()
} else {
return
}
}
} else {
console.log(333333333333)
this.video_pause = 1
myVideo.pause()
}
}
},
onPlayPause() {
console.log(666666666, this.video_pause)
if (this.video_pause === 0) {
this.videoType = false // 赋值视频已暂停
}
},
onPlayPlay() {
console.log(7777777777, this.video_pause)
if (this.video_pause === 0) {
this.videoType = true // 赋值视频已播放
}
},
onPlayEnded() {
console.log(8888888888, this.video_pause)
this.isShowPlayIcon = true
if (document.fullscreenElement) { // 判断当前视频已经播放结束
this.$refs.player.exitFullscreen() // 强制退出全屏，恢复正常大小
}
},
onPlay() {
var myVideo = document.getElementsByTagName('video')[0]
myVideo.play()
this.isShowPlayIcon = false
}
}
}
</script>
<style lang="scss" scoped>
.custom-indicator {
width: 78px;
height: 46px;
line-height: 46px;
border-radius: 24px;
background-color: rgba(0, 0, 0, 0.3);
text-align: center;
position: absolute;
right: 16px;
bottom: 8px;
font-size: 20px;
span{
display: inline-block;
width: 33px;
height: 28px;
font-size: 20px;
font-weight: 400;
color: #FFFFFF;
line-height: 28px;
}
}
.video-js .vjs-icon-placeholder {
width: 100%;
height: 100%;
display: block;
}
::v-deep {
.vjs-poster{
background-size: cover !important;
}
.video-js.vjs-ended .vjs-big-play-button {
visibility: hidden !important;
}
.vjs-big-play-button {
visibility: hidden !important;
}
.vjs-error .vjs-error-display:before{
visibility: hidden !important;
}
}
.activity-rule{
width: 100%;
background: #FFFFFF;
border-radius: 10px;
.play-icon{
width: 122px;
height: 122px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
.activity-rule-title{
width: 100%;
height: 88px;
position: relative;
font-size: 28px;
font-family: 'PingFangSC-Medium, PingFang SC';
font-weight: 500;
color: #333333;
text-align: center;
line-height: 88px;
.rule-title-icon1{
width: 131px;
height: 4px;
background: url('../../assets/img/activity_rule_icon1.png') no-repeat left top;
background-size: 100% 100%;
position: absolute;
left: 22%;
top: 41px;
}
.rule-title-icon2{
width: 131px;
height: 4px;
background: url('../../assets/img/activity_rule_icon2.png') no-repeat left top;
background-size: 100% 100%;
position: absolute;
right: 22%;
top: 41px;
}
}
.activity-rule-box{
width: 100%;
padding: 8px 30px 40px 30px;
box-sizing: border-box;
color: #999999;
font-size: 28px;
line-height: 42px;
.rule-box-li{
width: 100%;
font-size: 24px;
font-family: 'PingFangSC-Regular, PingFang SC';
font-weight: 400;
color: #999999;
line-height: 38px;
}
}
}
</style>
|
