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 @@
"node-polyfill-webpack-plugin": "^2.0.1",
"pdfh5": "^1.4.2",
"qs": "^6.11.0",
"video.js": "^8.0.4",
"vue": "^2.6.14",
"vue-clipboard2": "^0.3.3",
"vue-pdf": "^4.3.0",
......
src/axios/api.js
View file @ 03b0e29a
......@@ -112,6 +112,12 @@ live: {
console.log(data,'p')
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"
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_PROD = 'https://test6.douniu8.com'
const BASEURL_PROD = 'https://api.douniu8.com'
const CONTRACT_TEST = 'http://47.95.140.89:9090'
const CONTRACT_PROD = 'http://ht.douniu8.com:9090'
const baseURL = IS_PROD ? BASEURL_PROD : BASEURL_TEST;
......
src/views/liveList.vue
View file @ 03b0e29a
......@@ -7,11 +7,20 @@
<img v-if="ifLog==2" class="portait-not" :src="userImg" alt="" @click="mine">
</div>
<div class="tab">
<span :class="{free:ifFree,nonefree:!ifFree}" @click="clickFree()">免费</span>
<span :class="{member:!ifFree,nonemember:ifFree}" @click="clickVIP()">VIP</span>
<!-- <span :class="{free:ifFree == 1,nonefree:ifFree != 1}" @click="clickFree(1)">直播</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 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="head-img" :src="i.headPhoto" alt="">
<span class="head-name">{{i.udNickname}}</span>
......@@ -22,7 +31,7 @@
<span class="people-num">{{i.hotNum}}</span>
</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="head-img" :src="i.headPhoto" alt="">
<span class="head-name">{{i.udNickname}}</span>
......@@ -36,22 +45,73 @@
</div>
<img v-if="!ifFree" class="vip-img" src="../common/img/VIP.png" alt="">
</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>
</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>
export default {
name: 'NewliveLivelist',
data() {
return {
ifFree:true,
ifFree:1,
timestamp:Date.parse(new Date())/1000,
freeList:[],
ifLog:0,
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(){
......@@ -61,14 +121,16 @@ export default {
mounted() {
this.getRecommendList()
this.getList()
this.getvideo()
//判断是否有主播Id
this.ifUbId()
},
methods: {
clickFree(){
this.ifFree=true
clickFree(type){
this.ifFree=type
},
clickVIP(){
this.ifFree=false
......@@ -188,6 +250,7 @@ export default {
},
//游客登录
visitorLog(){
let temp=this.qs.stringify({
pmAppVersion:'884',
pmModel:'iPhone 12/13 (Pro)',
......@@ -196,6 +259,7 @@ export default {
pmIp:1,
pmOperator:'无运营商',
applicationType:4,
contentType:'json',
})
this.server.live.tourist(temp).then(res=>{
let thisToken= res.data.data.token
......@@ -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>
<style scoped>
<style >
.head{
width: 100%;
height: 10vw;
......@@ -261,6 +342,11 @@ export default {
top: 1.5vw;
right: 4vw;
}
.moudle ._video{
width: 88%;
margin: 20px;
}
.tab{
width: 100%;
height: 10vw;
......@@ -270,35 +356,55 @@ export default {
/* background: yellow; */
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{
position: absolute;
left: 53vw;
position: absolute;
left: 45vw;
top: 2vw;
height: 7vw;
text-align: center;
display: block;
width: 11vw;
width: 12vw;
border-bottom: 1vw solid red;
}
.nonemember{
position: absolute;
left: 53vw;
left: 45vw;
top: 2vw;
height: 7vw;
text-align: center;
display: block;
color: #999999;
width: 11vw;
/* border-bottom: 1vw solid red; */
width: 12vw;
}
.free{
position: absolute;
text-align: center;
display: block;
height: 7vw;
width: 11vw;
width: 12vw;
border-bottom: 1vw solid red;
left: 35vw;
left: 27vw;
top: 2vw;
}
.nonefree{
......@@ -307,9 +413,9 @@ position: absolute;
display: block;
height: 7vw;
color: #999999;
width: 11vw;
width: 12vw;
/* border-bottom: 1vw solid red; */
left: 35vw;
left: 27vw;
top: 2vw;
}
.content{
......@@ -402,4 +508,13 @@ height: 9vw;
top: 31vw;
left: 33vw;
}
.sent{
margin-left:20px
}
.v_plin{
width:90px
}
/* .vjs-custom-skin > .video-js .vjs-big-play-button{
display: block;
} */
</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