Skip to content

A
Athena
Commit 0de36292 authored by zhengke's avatar zhengke
Browse files
Options

增加视频显示

parent a97d63f5
Hide whitespace changes
Inline Side-by-side
Showing with 70 additions and 13 deletions
src/components/trip/block/fiveday.vue
View file @ 0de36292
...@@ -4,7 +4,13 @@ ...@@ -4,7 +4,13 @@
<div class="five-box"> <div class="five-box">
<div class="left"> <div class="left">
<div class="image"> <div class="image">
<img :src='day.details[0].img' :style="{position: 'relative',top:day.details[0].scenicJson.y + 'px'}"/> <template v-if="day.details[0].fileType&&day.details[0].fileType=='.mp4'">
<video ref="myVideo" width="100%" height="100%" :src="day.details[0].videoPath" controls="controls">
</video>
</template>
<template v-else>
<img :src='day.details[0].img' :style="{position: 'relative',top:day.details[0].scenicJson.y + 'px'}"/>
</template>
</div> </div>
<div class="item"> <div class="item">
<h3 v-html="day.details[0].title" @click.stop="goUrl(day.details[0].url)" style="cursor: pointer" ></h3> <h3 v-html="day.details[0].title" @click.stop="goUrl(day.details[0].url)" style="cursor: pointer" ></h3>
...@@ -29,7 +35,13 @@ ...@@ -29,7 +35,13 @@
<div class="item"> <div class="item">
<div class="three-item"> <div class="three-item">
<div class="image"> <div class="image">
<img :src='item.img' /> <template v-if="item.fileType&&item.fileType=='.mp4'">
<video ref="myVideo" width="100%" height="100%" :src="item.videoPath" controls="controls">
</video>
</template>
<template v-else>
<img :src='item.img' />
</template>
</div> </div>
<h3 v-html="item.title" @click.stop="goUrl(item.url)" style="cursor: pointer" ></h3> <h3 v-html="item.title" @click.stop="goUrl(item.url)" style="cursor: pointer" ></h3>
<div class="playInfo"> <div class="playInfo">
......
src/components/trip/block/fourday.vue
View file @ 0de36292
...@@ -3,7 +3,13 @@ ...@@ -3,7 +3,13 @@
<div class="one-block"> <div class="one-block">
<div class="item big"> <div class="item big">
<div class="left"> <div class="left">
<img :src='day.details[0].img' /> <template v-if="day.details[0].fileType&&day.details[0].fileType=='.mp4'">
<video ref="myVideo" width="100%" height="100%" :src="day.details[0].videoPath" controls="controls">
</video>
</template>
<template v-else>
<img :src='day.details[0].img' />
</template>
</div> </div>
<div class="right"> <div class="right">
<div class="details"> <div class="details">
...@@ -29,7 +35,13 @@ ...@@ -29,7 +35,13 @@
<div class="item"> <div class="item">
<div class="three-item"> <div class="three-item">
<div class="image"> <div class="image">
<img :src='item.img' /> <template v-if="item.fileType&&item.fileType=='.mp4'">
<video ref="myVideo" width="100%" height="100%" :src="item.videoPath" controls="controls">
</video>
</template>
<template v-else>
<img :src='item.img' />
</template>
</div> </div>
<h3 v-html="item.title" @click.stop="goUrl(item.url)" style="cursor: pointer" ></h3> <h3 v-html="item.title" @click.stop="goUrl(item.url)" style="cursor: pointer" ></h3>
<div class="playInfo"> <div class="playInfo">
......
src/components/trip/block/index.vue
View file @ 0de36292
...@@ -110,7 +110,10 @@ export default { ...@@ -110,7 +110,10 @@ export default {
playTimeHour:y.childItem.playTimeHour, playTimeHour:y.childItem.playTimeHour,
playTimeMinutes:y.childItem.playTimeMinutes, playTimeMinutes:y.childItem.playTimeMinutes,
url:y.childItem.url, url:y.childItem.url,
scenicJson: y.childItem.scenicJson scenicJson: y.childItem.scenicJson,
videoPath: y.childItem.imaArray[0].videoPath,
fileType: y.childItem.imaArray[0].fileType,
} }
jin.push(obj) jin.push(obj)
} else if(y.type==3 && y.childItem.hotelName!='' && y.childItem.imaArray.length>0){ } else if(y.type==3 && y.childItem.hotelName!='' && y.childItem.imaArray.length>0){
......
src/components/trip/block/oneday.vue
View file @ 0de36292
...@@ -3,10 +3,16 @@ ...@@ -3,10 +3,16 @@
<div class="one-block"> <div class="one-block">
<div class="item big"> <div class="item big">
<div class="left"> <div class="left">
<img v-if="day.details[0].img!=''" :src='day.details[0].img' /> <template v-if="day.details[0].fileType&&day.details[0].fileType=='.mp4'">
<img v-else-if="day.dayNum==1 && day.details[0].img==''" src='../../../assets/img/nll.jpg' /> <video ref="myVideo" width="100%" height="100%" :src="day.details[0].videoPath" controls="controls">
<img v-else-if="day.islast && day.details[0].img==''" src='../../../assets/img/nll.jpg' /> </video>
<img v-else src='../../../assets/img/activy.jpg' /> </template>
<template v-else>
<img v-if="day.details[0].img!=''" :src='day.details[0].img' />
<img v-else-if="day.dayNum==1 && day.details[0].img==''" src='../../../assets/img/nll.jpg' />
<img v-else-if="day.islast && day.details[0].img==''" src='../../../assets/img/nll.jpg' />
<img v-else src='../../../assets/img/activy.jpg' />
</template>
</div> </div>
<div class="right"> <div class="right">
<div class="details"> <div class="details">
......
src/components/trip/block/threeday.vue
View file @ 0de36292
...@@ -3,7 +3,13 @@ ...@@ -3,7 +3,13 @@
<div class="two-block"> <div class="two-block">
<div class="item big"> <div class="item big">
<div class="left"> <div class="left">
<img :src='day.details[0].img' :style="{position: 'relative',top:day.details[0].scenicJson.y + 'px'}" /> <template v-if="day.details[0].fileType&&day.details[0].fileType=='.mp4'">
<video ref="myVideo" width="100%" height="100%" :src="day.details[0].videoPath" controls="controls">
</video>
</template>
<template v-else>
<img :src='day.details[0].img' :style="{position: 'relative',top:day.details[0].scenicJson.y + 'px'}" />
</template>
</div> </div>
<div class="right"> <div class="right">
<div class="details"> <div class="details">
...@@ -48,7 +54,13 @@ ...@@ -48,7 +54,13 @@
<el-col :span="16"> <el-col :span="16">
<div class="item hor-box"> <div class="item hor-box">
<div class="image"> <div class="image">
<img :src="day.details[1].img" :style="{position: 'relative',top:day.details[1].scenicJson.y + 'px'}" /> <template v-if="day.details[1].fileType&&day.details[1].fileType=='.mp4'">
<video ref="myVideo" width="100%" height="100%" :src="day.details[1].videoPath" controls="controls">
</video>
</template>
<template v-else>
<img :src="day.details[1].img" :style="{position: 'relative',top:day.details[1].scenicJson.y + 'px'}" />
</template>
</div> </div>
</div> </div>
</el-col> </el-col>
...@@ -57,7 +69,13 @@ ...@@ -57,7 +69,13 @@
<el-col :span="16"> <el-col :span="16">
<div class="item hor-box"> <div class="item hor-box">
<div class="image"> <div class="image">
<img :src="day.details[2].img" :style="{position: 'relative',top:day.details[2].scenicJson.y + 'px'}" /> <template v-if="day.details[2].fileType&&day.details[2].fileType=='.mp4'">
<video ref="myVideo" width="100%" height="100%" :src="day.details[2].videoPath" controls="controls">
</video>
</template>
<template v-else>
<img :src="day.details[2].img" :style="{position: 'relative',top:day.details[2].scenicJson.y + 'px'}" />
</template>
</div> </div>
</div> </div>
</el-col> </el-col>
......
src/components/trip/block/twoday.vue
View file @ 0de36292
...@@ -5,7 +5,13 @@ ...@@ -5,7 +5,13 @@
<el-col :span="12" v-for="item in day.details" :key="item.dayNum"> <el-col :span="12" v-for="item in day.details" :key="item.dayNum">
<div class="item"> <div class="item">
<div class="up"> <div class="up">
<img :src='item.img' /> <template v-if="item.fileType&&item.fileType=='.mp4'">
<video ref="myVideo" width="100%" height="100%" :src="item.videoPath" controls="controls">
</video>
</template>
<template v-else>
<img :src='item.img' />
</template>
</div> </div>
<div class="down"> <div class="down">
<h3 v-if='item.title!=""' v-html="item.title" @click.stop="goUrl(item.url)" style="cursor: pointer" ></h3> <h3 v-if='item.title!=""' v-html="item.title" @click.stop="goUrl(item.url)" style="cursor: pointer" ></h3>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment