Skip to content

J
jianchayuan
Commit 89a54f6f authored by mahui's avatar mahui
Browse files
Options

ss

parent 6622e059
Hide whitespace changes
Inline Side-by-side
Showing with 253 additions and 60 deletions
src/page/index.vue
View file @ 89a54f6f
...@@ -19,16 +19,13 @@ export default { ...@@ -19,16 +19,13 @@ export default {
{ {
src:'static/animal.png', src:'static/animal.png',
name:'动物实观' name:'动物实观'
},{
src:'static/welfare.png',
name:'公益案件'
},{ },{
src:'static/scene.png', src:'static/scene.png',
name:'现场连线' name:'现场连线'
},{ },{
src:'static/network.png', src:'static/welfare.png',
name:'网络视频' name:'公益宣传'
}, }
] ]
} }
}, },
...@@ -53,16 +50,16 @@ export default { ...@@ -53,16 +50,16 @@ export default {
} }
.firstPage .imgList{ .firstPage .imgList{
position: absolute; position: absolute;
top: 485px; top: 453px;
width: 1920px; width: 1920px;
margin: 0 auto; margin: 0 auto;
} }
.firstPage .imgList .item{ .firstPage .imgList .item{
position: relative; position: relative;
display: inline-block; display: inline-block;
margin: 0 20px; margin: 0 32px;
cursor: pointer; cursor: pointer;
left: 1px; left: 0;
} }
.firstPage .imgList .item .cover{ .firstPage .imgList .item .cover{
position: absolute; position: absolute;
...@@ -75,6 +72,7 @@ export default { ...@@ -75,6 +72,7 @@ export default {
display: none; display: none;
border-radius: 10px; border-radius: 10px;
filter: alpha(opacity=50); filter: alpha(opacity=50);
cursor: pointer;
} }
.firstPage .imgList .item .cover img{ .firstPage .imgList .item .cover img{
position: absolute; position: absolute;
...@@ -83,8 +81,8 @@ export default { ...@@ -83,8 +81,8 @@ export default {
top: 0; top: 0;
bottom: 0; bottom: 0;
margin: auto; margin: auto;
opacity: 1; opacity: 1;
filter: alpha(opacity=100); filter: alpha(opacity=100);
} }
.firstPage .imgList .item:hover .cover{ .firstPage .imgList .item:hover .cover{
display: block; display: block;
...@@ -92,13 +90,13 @@ export default { ...@@ -92,13 +90,13 @@ export default {
.firstPage .imgList .item .img{ .firstPage .imgList .item .img{
width: 100%; width: 100%;
} }
.firstPage .imgList .item_0{
left: -3px;
}
.firstPage .imgList .item_1{ .firstPage .imgList .item_1{
left: 2px; left: -1px;
} }
.firstPage .imgList .item_2{ .firstPage .imgList .item_2{
left: 2px; left: 2px;
} }
.firstPage .imgList .item_3{
left: 4px;
}
</style> </style>
src/page/secondPage.vue
View file @ 89a54f6f
...@@ -5,22 +5,30 @@ ...@@ -5,22 +5,30 @@
<img class="title" :src="videoList[index].header" alt=""> <img class="title" :src="videoList[index].header" alt="">
</div> </div>
<div class="body"> <div class="body">
<div class="left"> <div class="left" :style="{width:index==2?'1860px':'1300px'}">
<div id="divPlugin" v-if="index==2"></div> <div id="divPlugin" v-if="index==1"></div>
<video v-else class="video" :src="video_src" width="1300" height="750" controls autoplay>不支持当前video标签</video> <video v-if="index==0" class="video" :src="video_src" width="1300" height="750" controls autoplay @ended="ended(sort)">不支持当前video标签</video>
<p class="video_name">{{video_name}}</p> <p class="video_name" v-if="index==0">{{video_name}}</p>
<div v-if="index==2" class="videoList">
<div v-for="(item,index) in channelLists" :key="index" class="video_one" @click="item.play=!item.play">
<!--<div class="cover" v-show="!item.play">-->
<!--<img src="static/play.png" alt="">-->
<!--</div>-->
<video :src="item.src" width="500" height="300" controls @ended="ended(sort)">不支持当前video标签</video>
</div>
</div>
</div> </div>
<div class="right"> <div class="right" v-if="index!=2">
<div v-if="index!=2"> <div v-if="index==0" style="width: 100%">
<div class="item" v-for="(item,index) in channelLists" :key="index" @click="switch_video(item)"> <div class="item" v-for="(item,index) in channelLists" :key="index" @click="switch_video(item,index)">
<img class="poster" :src="item.poster" alt="" /> <video class="poster" :src="item.src" width="150" height="100" />
<p class="poster_title"> <p class="poster_title">
<span class="title" :class="{selected:item.src==video_src}">{{item.title}}</span> <span class="title" :class="{selected:item.src==video_src}">{{item.title}}</span>
<span class="date"></span> <span class="date"></span>
</p> </p>
</div> </div>
</div> </div>
<div v-else> <div v-else-if="index==1" style="width: 100%">
<div class="switch clearFix" v-for="(item,item_index) in camera_info.site_name" :key="item_index" @click="change(item_index)"> <div class="switch clearFix" v-for="(item,item_index) in camera_info.site_name" :key="item_index" @click="change(item_index)">
<p class="item_one">{{item}}</p> <p class="item_one">{{item}}</p>
<div v-show="v==item_index" class="switch_item" :class="{selected:item.id == channels_id}" v-for="(item,index) in channelLists" :key="index" @click="getChannelChange(item.id)"> <div v-show="v==item_index" class="switch_item" :class="{selected:item.id == channels_id}" v-for="(item,index) in channelLists" :key="index" @click="getChannelChange(item.id)">
...@@ -39,47 +47,150 @@ ...@@ -39,47 +47,150 @@
data:function(){ data:function(){
return { return {
index:'0', index:'0',
sort:0,
videoList:{ videoList:{
"0":{ "0":{
list:[ list:[
{ {
title:'2018年8月14日，杭州市人民检察院公益诉讼检察开放日典型案例介绍', title:'白鹤展翅',
src:'/static/video/welfare_1.mp4', src:'/static/video/animal/baihezhanchi.mp4'
poster:'/static/poster/welfare_1_poster.png', },{
title:'干坑梅花鹿母子添毛',
src:'/static/video/animal/gankengmeihualumuzitianmao.mp4'
},{
title:'华南梅花鹿3--千顷塘',
src:'/static/video/animal/huananmeihualu-3.mp4'
},{
title:'华南梅花鹿--千顷塘',
src:'/static/video/animal/huananmeihualu.mp4'
},{
title:'龙塘山大群燕雀',
src:'/static/video/animal/longtangshandaqunyanque.mp4'
},{
title:'龙塘山鬣羚',
src:'/static/video/animal/longtangshanlieling.mp4'
},{
title:'龙塘山猕猴群',
src:'/static/video/animal/longtangshanmihouqun.mp4'
},{
title:'龙塘山野猪大背小',
src:'/static/video/animal/longtangshanyezhudabeixiao.mp4'
},{
title:'马啸勺鸡对',
src:'/static/video/animal/maxiaoshaojidui.mp4'
},{
title:'马啸猪獾群',
src:'/static/video/animal/maxiaozhuhuanqun.mp4'
},{
title:'梅花鹿-1',
src:'/static/video/animal/meihualu-1.mp4',
poster:'/static/poster/welfare/welfare_1.png'
},{
title:'梅花鹿-2',
src:'/static/video/animal/meihualu-2.mp4'
},{
title:'梅花鹿-3',
src:'/static/video/animal/meihualu-3.mp4'
},{
title:'梅花鹿-4',
src:'/static/video/animal/meihualu-4.mp4'
},{
title:'梅花鹿-5',
src:'/static/video/animal/meihualu-5.mp4'
},{
title:'梅花鹿-6',
src:'/static/video/animal/meihualu-6.mp4'
},{
title:'梅花鹿-7',
src:'/static/video/animal/meihualu-7.mp4'
},{
title:'梅花鹿-8',
src:'/static/video/animal/meihualu-8.mp4'
},{
title:'梅花鹿-9',
src:'/static/video/animal/meihualu-9.mp4'
},{
title:'梅花鹿-10',
src:'/static/video/animal/meihualu-10.mp4'
},{
title:'梅花鹿-11',
src:'/static/video/animal/meihualu-11.mp4'
},{
title:'梅花鹿-12',
src:'/static/video/animal/meihualu-12.mp4'
},{
title:'梅花鹿-13',
src:'/static/video/animal/meihualu-13.mp4'
},{
title:'梅花鹿刚掉角',
src:'/static/video/animal/meihualugangdiaojiao.mp4'
},{
title:'梅花鹿和小鹿和平相处',
src:'/static/video/animal/meihualuandxiaolupeace.mp4'
},{
title:'梅花鹿觅食',
src:'/static/video/animal/meihualumishi.mp4'
},{
title:'梅花鹿母子',
src:'/static/video/animal/meihualumuzi.mp4'
},{
title:'梅花鹿母子舔毛',
src:'/static/video/animal/meihualumuzitianmao.mp4'
},{
title:'梅花鹿群',
src:'/static/video/animal/meihualuqun.mp4'
},{
title:'梅花鹿群-1',
src:'/static/video/animal/meihualuqun-1.mp4'
},{
title:'梅花鹿群-2',
src:'/static/video/animal/meihualuqun-2.mp4'
},{
title:'梅花鹿一家',
src:'/static/video/animal/meihualuyijia.mp4'
},{
title:'梅花鹿抓痒',
src:'/static/video/animal/meihualuzhuayang.mp4'
},{
title:'母鹿与小鹿',
src:'/static/video/animal/muluandxiaolu.mp4'
},{
title:'缺腿的梅花鹿',
src:'/static/video/animal/quetuidemeihualu.mp4'
} }
], ],
header:'/static/animal_title.png', header:'/static/animal_title.png',
}, },
"1":{ "1":{
list:[ list:[],
{
title:'2018年8月14日，杭州市人民检察院公益诉讼检察开放日典型案例介绍',
src:'/static/video/welfare_1.mp4',
poster:'/static/poster/welfare_1_poster.png',
}
],
header:'/static/welfare_title.png',
},
"2":{
list:[
{
title:'2018年8月14日，杭州市人民检察院公益诉讼检察开放日典型案例介绍',
src:'/static/video/welfare_1.mp4',
poster:'/static/poster/welfare_1_poster.png',
}
],
header:'/static/scene_title.png', header:'/static/scene_title.png',
}, },
"3":{ "2":{
list:[ list:[
{ {
title:'2018年8月14日，杭州市人民检察院公益诉讼检察开放日典型案例介绍', title:'2018年8月14日，杭州市人民检察院公益诉讼检察开放日典型案例介绍',
src:'/static/video/welfare_1.mp4', src:'/static/video/welfare/welfare_1.mp4',
poster:'/static/poster/welfare_1_poster.png', play:false,
},{
title:'爸爸去哪儿了',
src:'/static/video/welfare/welfare_3.mp4',
play:false,
},{
title:'遇到非法猎捕 买卖野生动物 怎么办？',
src:'/static/video/welfare/welfare_4.mp4',
play:false,
},{
title:'非法猎捕野生动物 批捕！',
src:'/static/video/welfare/welfare_5.mp4',
play:false,
},{
title:'公益诉讼在身边--视频',
src:'/static/video/welfare/welfare_6.mp4',
play:false,
} }
], ],
header:'/static/network_title.png', header:'/static/welfare_post_title.png',
}, }
}, },
hover:false, hover:false,
v:0, v:0,
...@@ -95,12 +206,7 @@ ...@@ -95,12 +206,7 @@
password:'', password:'',
}, },
video_data:{}, video_data:{},
channelLists:[{ channelLists:[],
title:'2018年8月14日，杭州市人民检察院公益诉讼检察开放日典型案例介绍',
src:'/static/video/welfare_1.mp4',
poster:'/static/poster/welfare_1_poster.png',
id:0,
}],
video_src:'', video_src:'',
video_name:'', video_name:'',
} }
...@@ -110,7 +216,7 @@ ...@@ -110,7 +216,7 @@
if(!this.index){ if(!this.index){
this.index="0"; this.index="0";
} }
if(this.index==2){ if(this.index==1){
var self = this; var self = this;
this.$nextTick(function () { this.$nextTick(function () {
var iRet = WebVideoCtrl.I_CheckPluginInstall(); var iRet = WebVideoCtrl.I_CheckPluginInstall();
...@@ -150,22 +256,74 @@ ...@@ -150,22 +256,74 @@
} }
}, },
methods:{ methods:{
switch_video(item){ ended:function(){
if(this.index == 2){ this.video_name = this.channelLists[(this.sort+1)%this.channelLists.length].title;
this.video_src = this.channelLists[(this.sort+1)%this.channelLists.length].src;
this.sort = (this.sort+1)%this.channelLists.length;
},
switch_video:function(item,index){
if(this.index == 1){
}else{ }else{
this.video_src = item.src; this.video_src = item.src;
this.video_name = item.title; this.video_name = item.title;
this.sort = index;
} }
}, },
//开始回放 //开始回放
startPlayback:function(){ startPlayback:function(){
clickStartPlayback(); this.clickStartPlayback();
}, },
//结束回放 //结束回放
stopPlayback:function(){ stopPlayback:function(){
this.clickStopPlayback(); this.clickStopPlayback();
}, },
// 开始回放
clickStartPlayback:function() {
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(0),
bZeroChannel = false,
szStartTime = '',
szEndTime = '',
bChecked = false;
if ("" == this.login_info.ip) {
return;
}
if (bZeroChannel) { // 零通道不支持回放
return;
}
if (oWndInfo != null) { // 已经在播放了，先停止
WebVideoCtrl.I_Stop();
}
if (bChecked) { // 启用转码回放
var oTransCodeParam = {
TransFrameRate: "14", // 0：全帧率，5：1，6：2，7：4，8：6，9：8，10：10，11：12，12：16，14：15，15：18，13：20，16：22
TransResolution: "1", // 255：Auto，3：4CIF，2：QCIF，1：CIF
TransBitrate: "19" // 2：32K，3：48K，4：64K，5：80K，6：96K，7：128K，8：160K，9：192K，10：224K，11：256K，12：320K，13：384K，14：448K，15：512K，16：640K，17：768K，18：896K，19：1024K，20：1280K，21：1536K，22：1792K，23：2048K，24：3072K，25：4096K，26：8192K
};
WebVideoCtrl.I_StartPlayback(this.login_info.ip, {
iChannelID: this.channels_id,
szStartTime: szStartTime,
szEndTime: szEndTime,
oTransCodeParam: oTransCodeParam
});
} else {
WebVideoCtrl.I_StartPlayback(this.login_info.ip, {
iChannelID: this.channels_id,
szStartTime: szStartTime,
szEndTime: szEndTime
});
}
},
// 停止回放
clickStopPlayback:function() {
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(0);
if (oWndInfo != null) {
WebVideoCtrl.I_Stop();
}
},
get_video_info:function() { get_video_info:function() {
this.login_info = { this.login_info = {
ip:this.video_data[0], ip:this.video_data[0],
...@@ -402,6 +560,43 @@ ...@@ -402,6 +560,43 @@
height: 750px; height: 750px;
font-size: 0; font-size: 0;
} }
.left .videoList{
width: 1860px;
}
.left .videoList .video_one{
position: relative;
float: left;
width: 500px;
margin:0 50px 50px 50px;
background-color: #000;
}
.left .videoList .video_one .cover{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 4px;
background-color:#000;
opacity: .5;
display: none;
border-radius: 10px;
z-index: 1;
filter: alpha(opacity=50);
}
.left .videoList .video_one .cover img{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
opacity: 1;
filter: alpha(opacity=100);
}
.left .videoList .video_one:hover .cover{
display: block;
cursor: pointer;
}
.video{ .video{
background-color: #000; background-color: #000;
width: 1300px; width: 1300px;
...@@ -475,7 +670,7 @@ ...@@ -475,7 +670,7 @@
.right .item .poster_title{ .right .item .poster_title{
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
width:155px; width:130px;
text-align: left; text-align: left;
margin-left: 20px; margin-left: 20px;
margin-right: 5px; margin-right: 5px;
......
static/animal.png
View replaced file @ 6622e059 View file @ 89a54f6f
static/animal.png

115 KB | W: | H:

static/animal.png

167 KB | W: | H:

static/animal.png
static/animal.png
static/animal.png
static/animal.png
  • 2-up
  • Swipe
  • Onion skin
static/firstPage.png
View replaced file @ 6622e059 View file @ 89a54f6f
static/firstPage.png

75 KB | W: | H:

static/firstPage.png

133 KB | W: | H:

static/firstPage.png
static/firstPage.png
static/firstPage.png
static/firstPage.png
  • 2-up
  • Swipe
  • Onion skin
static/scene.png
View replaced file @ 6622e059 View file @ 89a54f6f
static/scene.png

148 KB | W: | H:

static/scene.png

196 KB | W: | H:

static/scene.png
static/scene.png
static/scene.png
static/scene.png
  • 2-up
  • Swipe
  • Onion skin
static/welfare.png
View replaced file @ 6622e059 View file @ 89a54f6f
static/welfare.png

119 KB | W: | H:

static/welfare.png

119 KB | W: | H:

static/welfare.png
static/welfare.png
static/welfare.png
static/welfare.png
  • 2-up
  • Swipe
  • Onion skin
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