Skip to content

N
newLive
Commit 03b0e29a authored by jiaoyahui's avatar jiaoyahui
Browse files
Options

新增直播回放

parent 008e8517
Show whitespace changes
Inline Side-by-side
Showing with 149 additions and 26 deletions
package.json
View file @ 03b0e29a
...@@ -21,6 +21,7 @@ ...@@ -21,6 +21,7 @@
"node-polyfill-webpack-plugin": "^2.0.1", "node-polyfill-webpack-plugin": "^2.0.1",
"pdfh5": "^1.4.2", "pdfh5": "^1.4.2",
"qs": "^6.11.0", "qs": "^6.11.0",
"video.js": "^8.0.4",
"vue": "^2.6.14", "vue": "^2.6.14",
"vue-clipboard2": "^0.3.3", "vue-clipboard2": "^0.3.3",
"vue-pdf": "^4.3.0", "vue-pdf": "^4.3.0",
......
src/axios/api.js
View file @ 03b0e29a
...@@ -112,6 +112,12 @@ live: { ...@@ -112,6 +112,12 @@ live: {
console.log(data,'p') console.log(data,'p')
return service.get('/app/live/deleteLiveHistory/'+historyId,data) return service.get('/app/live/deleteLiveHistory/'+historyId,data)
}, },
shortVideo:function(data,historyId){
return service.post('/content/shortVideo/list',data,{
headers:{ 'Content-Type': 'application/json'}
})
},
......
src/axios/request.js
View file @ 03b0e29a
...@@ -9,9 +9,10 @@ const appName = "test5" ...@@ -9,9 +9,10 @@ const appName = "test5"
const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV); const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
// 接口路径 // 接口路径
const BASEURL_TEST = 'https://test6.douniu8.com' //测试test6https://test6.douniu8.com
const BASEURL_TEST = 'https://api.douniu8.com'
// const BASEURL_TEST = 'http://39.105.193.58:8081' // const BASEURL_TEST = 'http://39.105.193.58:8081'
const BASEURL_PROD = 'https://test6.douniu8.com' const BASEURL_PROD = 'https://api.douniu8.com'
const CONTRACT_TEST = 'http://47.95.140.89:9090' const CONTRACT_TEST = 'http://47.95.140.89:9090'
const CONTRACT_PROD = 'http://ht.douniu8.com:9090' const CONTRACT_PROD = 'http://ht.douniu8.com:9090'
const baseURL = IS_PROD ? BASEURL_PROD : BASEURL_TEST; const baseURL = IS_PROD ? BASEURL_PROD : BASEURL_TEST;
......
src/views/liveList.vue
View file @ 03b0e29a
...@@ -7,11 +7,20 @@ ...@@ -7,11 +7,20 @@
<img v-if="ifLog==2" class="portait-not" :src="userImg" alt="" @click="mine"> <img v-if="ifLog==2" class="portait-not" :src="userImg" alt="" @click="mine">
</div> </div>
<div class="tab"> <div class="tab">
<span :class="{free:ifFree,nonefree:!ifFree}" @click="clickFree()">免费</span> <!-- <span :class="{free:ifFree == 1,nonefree:ifFree != 1}" @click="clickFree(1)">直播</span>
<span :class="{member:!ifFree,nonemember:ifFree}" @click="clickVIP()">VIP</span>
<span :class="{member:ifFree == 3,nonemember:ifFree != 3}" @click="clickFree(3)">小视频</span>
<span :class="{v_video:ifFree == 2,videomember:ifFree != 2}" @click="clickFree(2)">VIP</span> -->
<!-- <span :class="{free:ifFree == 1,nonefree:ifFree != 1}" @click="clickFree(1)">免费</span>
<span :class="{member:ifFree == 2,nonemember:ifFree != 2}" @click="clickFree(2)">VIP</span>
<span :class="{v_video:ifFree == 3,videomember:ifFree != 3}" @click="clickFree(3)">小视频</span> -->
<span :class="{member:ifFree == 3,nonemember:ifFree != 3}" @click="clickFree(3)">直播</span>
<span :class="{free:ifFree == 1,nonefree:ifFree != 1}" @click="clickFree(1)">小视频</span>
<span :class="{v_video:ifFree == 2,videomember:ifFree != 2}" @click="clickFree(2)">VIP</span>
</div> </div>
<div class="content"> <div class="content">
<div v-if="ifFree" @click="liveDetail(i)" v-for="i in freeList" :key="i.lvrId" class="moudle" > <!-- 1,2,3，-->
<div v-if="ifFree == 3" @click="liveDetail(i)" v-for="i in freeList" :key="i.lvrId" class="moudle" >
<img class="recommed-img" v-if="i.ifrecom" src="../common/img/recommend.png" alt=""> <img class="recommed-img" v-if="i.ifrecom" src="../common/img/recommend.png" alt="">
<img class="head-img" :src="i.headPhoto" alt=""> <img class="head-img" :src="i.headPhoto" alt="">
<span class="head-name">{{i.udNickname}}</span> <span class="head-name">{{i.udNickname}}</span>
...@@ -22,7 +31,7 @@ ...@@ -22,7 +31,7 @@
<span class="people-num">{{i.hotNum}}</span> <span class="people-num">{{i.hotNum}}</span>
</div> </div>
<div v-if="!ifFree" @click="liveDetail(i)" v-for="i in vipList" :key="i.lvrId" class="moudle"> <div v-if="ifFree == 2" @click="liveDetail(i)" v-for="i in vipList" :key="i.lvrId" class="moudle">
<img class="recommed-img" v-if="i.ifrecom" src="../common/img/recommend.png" alt=""> <img class="recommed-img" v-if="i.ifrecom" src="../common/img/recommend.png" alt="">
<img class="head-img" :src="i.headPhoto" alt=""> <img class="head-img" :src="i.headPhoto" alt="">
<span class="head-name">{{i.udNickname}}</span> <span class="head-name">{{i.udNickname}}</span>
...@@ -36,22 +45,73 @@ ...@@ -36,22 +45,73 @@
</div> </div>
<img v-if="!ifFree" class="vip-img" src="../common/img/VIP.png" alt=""> <img v-if="!ifFree" class="vip-img" src="../common/img/VIP.png" alt="">
</div> </div>
<div v-if="ifFree == 1" class="moudle" v-for="(item,index) in playerOptions" :key="index">
<div class="sent">{{item.title}}</div>
<!-- <video-player class="video-player _video vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="Object.assign(playerOption, {
poster: item.remake
}, {sources: [{
require: 'video/mp4',
src: item.url,
}]})"
>
</video-player> -->
<video :src="item.url" class="_video" controls height="200" :poster="item.remake" wight="100%"></video>
</div>
</div> </div>
</div> </div>
</template> </template>
<script type="text/javascript" charset="utf-8" src="//i2.wp.com/g.alicdn.com/de/prismplayer/2.8.1/aliplayer-min.js"></script>
<script> <script>
export default { export default {
name: 'NewliveLivelist', name: 'NewliveLivelist',
data() { data() {
return { return {
ifFree:true, ifFree:1,
timestamp:Date.parse(new Date())/1000, timestamp:Date.parse(new Date())/1000,
freeList:[], freeList:[],
ifLog:0, ifLog:0,
userImg:'', userImg:'',
vipList:[] vipList:[],
video_auth:[],
playerOptions: [],
playerOption: {
// title:'',
playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
autoplay: true, // 如果为true,浏览器准备好时开始回放。
muted: false, // 默认情况下将会消除任何音频。
loop: true, // 是否视频一结束就重新开始。
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
language: 'zh-CN',
aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
fluid: true,
autoplay: false,
poster: ''
// 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
// sources: [{
// type: "video/mp4", // 类型
// src: ,
// }],
// poster: '', // 封面地址
// notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
// controlBar: {
// timeDivider: true, // 当前时间和持续时间的分隔符
// durationDisplay: true, // 显示持续时间
// remainingTimeDisplay: false, // 是否显示剩余时间功能
// fullscreenToggle: true, // 是否显示全屏按钮
// }
},
}; };
}, },
created(){ created(){
...@@ -61,14 +121,16 @@ export default { ...@@ -61,14 +121,16 @@ export default {
mounted() { mounted() {
this.getRecommendList() this.getRecommendList()
this.getList() this.getList()
this.getvideo()
//判断是否有主播Id //判断是否有主播Id
this.ifUbId() this.ifUbId()
}, },
methods: { methods: {
clickFree(){ clickFree(type){
this.ifFree=true this.ifFree=type
}, },
clickVIP(){ clickVIP(){
this.ifFree=false this.ifFree=false
...@@ -188,6 +250,7 @@ export default { ...@@ -188,6 +250,7 @@ export default {
}, },
//游客登录 //游客登录
visitorLog(){ visitorLog(){
let temp=this.qs.stringify({ let temp=this.qs.stringify({
pmAppVersion:'884', pmAppVersion:'884',
pmModel:'iPhone 12/13 (Pro)', pmModel:'iPhone 12/13 (Pro)',
...@@ -196,6 +259,7 @@ export default { ...@@ -196,6 +259,7 @@ export default {
pmIp:1, pmIp:1,
pmOperator:'无运营商', pmOperator:'无运营商',
applicationType:4, applicationType:4,
contentType:'json',
}) })
this.server.live.tourist(temp).then(res=>{ this.server.live.tourist(temp).then(res=>{
let thisToken= res.data.data.token let thisToken= res.data.data.token
...@@ -238,12 +302,29 @@ export default { ...@@ -238,12 +302,29 @@ export default {
}); });
} }
} },
getvideo(){
var self_ = this;
let temp=({
title:null,
createDateUpperLimit:null,
createDateLowLimit:null,
source:1
})
this.server.live.shortVideo(temp).then(res=>{
this.playerOptions = res.data.data.list
})
},
}, },
}; };
</script> </script>
<style scoped> <style >
.head{ .head{
width: 100%; width: 100%;
height: 10vw; height: 10vw;
...@@ -261,6 +342,11 @@ export default { ...@@ -261,6 +342,11 @@ export default {
top: 1.5vw; top: 1.5vw;
right: 4vw; right: 4vw;
} }
.moudle ._video{
width: 88%;
margin: 20px;
}
.tab{ .tab{
width: 100%; width: 100%;
height: 10vw; height: 10vw;
...@@ -270,35 +356,55 @@ export default { ...@@ -270,35 +356,55 @@ export default {
/* background: yellow; */ /* background: yellow; */
position: relative; position: relative;
} }
.videomember{
position: absolute;
left: 60vw;
top: 2vw;
height: 7vw;
text-align: center;
display: block;
width: 14vw;
color: #999999;
}
.v_video{
position: absolute;
left: 60vw;
top: 2vw;
height: 7vw;
text-align: center;
display: block;
width: 14vw;
border-bottom: 1vw solid red;
}
.member{ .member{
position: absolute; position: absolute;
left: 53vw; left: 45vw;
top: 2vw; top: 2vw;
height: 7vw; height: 7vw;
text-align: center; text-align: center;
display: block; display: block;
width: 11vw; width: 12vw;
border-bottom: 1vw solid red; border-bottom: 1vw solid red;
} }
.nonemember{ .nonemember{
position: absolute; position: absolute;
left: 53vw; left: 45vw;
top: 2vw; top: 2vw;
height: 7vw; height: 7vw;
text-align: center; text-align: center;
display: block; display: block;
color: #999999; color: #999999;
width: 11vw; width: 12vw;
/* border-bottom: 1vw solid red; */
} }
.free{ .free{
position: absolute; position: absolute;
text-align: center; text-align: center;
display: block; display: block;
height: 7vw; height: 7vw;
width: 11vw; width: 12vw;
border-bottom: 1vw solid red; border-bottom: 1vw solid red;
left: 35vw; left: 27vw;
top: 2vw; top: 2vw;
} }
.nonefree{ .nonefree{
...@@ -307,9 +413,9 @@ position: absolute; ...@@ -307,9 +413,9 @@ position: absolute;
display: block; display: block;
height: 7vw; height: 7vw;
color: #999999; color: #999999;
width: 11vw; width: 12vw;
/* border-bottom: 1vw solid red; */ /* border-bottom: 1vw solid red; */
left: 35vw; left: 27vw;
top: 2vw; top: 2vw;
} }
.content{ .content{
...@@ -402,4 +508,13 @@ height: 9vw; ...@@ -402,4 +508,13 @@ height: 9vw;
top: 31vw; top: 31vw;
left: 33vw; left: 33vw;
} }
.sent{
margin-left:20px
}
.v_plin{
width:90px
}
/* .vjs-custom-skin > .video-js .vjs-big-play-button{
display: block;
} */
</style> </style>
\ No newline at end of file
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