前端点播和直播
1.阿里云直播https://player.alicdn.com/aliplayer/setting/setting.html2.腾讯云播放器TcPlayerhttps://imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.2.2.js3.FLV.jsvue可以使用node npm、cnpm安装flv.js<template>&
·
1.阿里云直播
https://player.alicdn.com/aliplayer/setting/setting.html
2.腾讯云播放器TcPlayer
https://imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.2.2.js
3.FLV.js
vue可以使用node npm、cnpm安装flv.js
<template>
<transition name="slide">
<div class="videoplayback" >
<div class="mbl-con" :class="{'mbl-con-ver':(verOrHor === 0),'mbl-con-hor':(verOrHor === 1)}">
<div class="videoPlayTop">
<div class="passwordTip" >{{ secname }}</div>
<div class="goBack" @click="videoplayHidden">
<div class="imgDiv">
<img src="http://static.crecgec.com/wxmobile/left_arrow.png"/>
</div>
</div>
<div class="voconItem" @click='shareopen'>
<div class="divImg">
<img src="../../../static/share.png"/>
</div>
</div>
<!--<div class="videoOperation" @click.stop="voconShow=!voconShow">
<div class="videoOperationImg">
<img src="http://static.crecgec.com/wxmobile/videoOperation.png"/>
</div>
</div>-->
</div>
<!-- flv播放器 -->
<div class="mainContainer" v-show='isFlv'>
<div>
<div id="streamURL">
<div class="url-input displayNone" >
<label for="sURL">Stream URL:</label>
<input id="sURL" type="text" :value="allURL" />
<button @click="switch_mds">Switch to MediaDataSource</button>
</div>
<div class="options displayNone">
<input type="checkbox" id="isLive" onchange="saveSettings()" checked/>
<label for="isLive">isLive</label>
<input type="checkbox" id="withCredentials" onchange="saveSettings()" />
<label for="withCredentials">withCredentials</label>
<input type="checkbox" id="hasAudio" onchange="saveSettings()" checked />
<label for="hasAudio">hasAudio</label>
<input type="checkbox" id="hasVideo" onchange="saveSettings()" checked />
<label for="hasVideo">hasVideo</label>
</div>
</div>
<div id="mediaSourceURL" style="display: none;" class="hidden displayNone">
<div class="url-input">
<input id="msURL" type="text" :value="allURL" />
<button @click="switch_url">Switch to URL</button>
</div>
</div>
</div>
<div class="video-container">
<div>
<video name="videoElement" class="centeredVideo" controls autoplay>
您的浏览器版本太久，请点击切换播放器播放
</video>
</div>
</div>
<div class="controls displayNone">
<!--<button @click="flv_load">Load</button>
<button @click="flv_start">Start</button>
<button @click="flv_pause">Pause</button>
<button @click="flv_destroy">Destroy</button>-->
<input style="width:100px" type="text" name="seekpoint"/>
<button @click="flv_seekto">SeekTo</button>
</div>
<textarea name="logcatbox" class="logcatBox displayNone" rows="10" readonly></textarea>
</div>
<!-- 阿里云播放器 -->
<div class="play-hrzt" id="videoPlay" v-show='!isFlv'>
</div>
<div class="showButton" v-show="AorO">
<a href="javascript:;" class="videoline" name="线路切换" @click='changeLine'>线路切换</a>
<a href="javascript:;" class="jiemudan" name="节目单" v-show="jiemudanShow" @click="openProgramPuides">节目单</a>
</div>
<div class="liveBottom" v-show="verOrHor === 0">
<div class="replyMessageUl">
<ul>
<li v-for="(item, index) in taolunList" :key="index">
<div class="tltouxiang">
<img :src="'/data/upload/avatar/' + item.avatar">
</div>
<div class="tlname" :class="{'tlnameTeacher' : (item.isteacher == 1)}">{{item.client_name}}:</div>
<div class="tlcon">{{item.msg}}</div>
</li>
</ul>
</div>
<div class="sendMessage">
<input class="msgInput" type="text" placeholder="说一句话吧..." v-model="msgText">
<button type='button' class="sendMsgA" @click="sendMessage">发送</button>
</div>
</div>
</div>
<!--<div class="videoOperationCon" v-show="voconShow" @click.stop="voconShow=true">
<div class="voconItem" v-if="favorite === null" @click="collectionYes">
<div class="divImg">
<img src="http://static.crecgec.com/wxmobile/collection.png"/>
</div>
<div class="divVal">收藏</div>
</div>
<div class="voconItem" v-else @click="collectionNo">
<div class="divImg">
<img src="http://static.crecgec.com/wxmobile/collectionHas.png"/>
</div>
<div class="divVal">已收藏</div>
</div>
<div class="voconItem" @click='shareopen'>
<div class="divImg">
<img src="http://static.crecgec.com/wxmobile/share.png"/>
</div>
<div class="divVal">分享</div>
</div>
</div>-->
<!-- 分享 -->
<van-actionsheet v-model="shareSelect" title="分享" class="shareCh">
<div class="bdsharebuttonbox bdshare-button-style0-32">
<div class="shareline" @click='Qzshare'>
<a class="bds_qzone" data-cmd="qzone" href="javascript:;"></a>
<p>QQ空间</p>
</div>
<div class="shareline" @click='tsina'>
<a class="bds_tsina" data-cmd="tsina" href="javascript:;"></a>
<p>微博</p>
</div>
<div class="shareline" v-clipboard:copy="copyUrl" v-clipboard:success="onCopy" v-clipboard:error="onError">
<a class="bds_copyurl" data-cmd="copyurl" href="javascript:;"></a>
<p>复制链接</p>
</div>
</div>
</van-actionsheet>
<!--<div class="commentShow" v-show="commentShow">
<div class="commentCon">
<div class="closeCommentCon">
<a class="commentConClose" @click.stop="commentConClose">
<div class="commentConCloseImg">
<img src="http://static.crecgec.com/wxmobile/close.png"/>
</div>
</a>
</div>
<van-rate
class="scroeRate"
v-model="scoreVal"
:size="25"
:count="5"
color="#398ed1"
void-color="#ceefe8"
/>
<a class="commentSubmit" @click.stop="commentSubmit">提交</a>
</div>
</div>
<div class="playTitle">{{playTitle}}</div>
<div v-show="introduceObj.course_type == 'doc' ">
<div class="playText" v-html="doccontent">
{{ doccontent }}
</div>
</div>-->
<!--<div class="playDetails">
<div class="detailsPlay">
<div class="classHour">共{{ classHour }}课时</div>
<a class="goCourseDetail" @click="videoplayHidden">课程详情></a>
</div>
</div>
<div class="catalog-list">
<ul v-if="catalogList.length > 0">
<li v-for="(item, index) in catalogList" :key="index" @click="changeVideoPlay(index)">
<div class="catalog-list-title">{{item.sc_name}}</div>
</li>
</ul>
<div class="noLists" v-else>没有数据</div>
</div>-->
</div>
</transition>
</template>
<script type="text/ecmascript-6">
import {liveWs} from '@/common/js/liveSocket.js'
import bdshare from 'bdshare'
import flvjs from 'flv.js'
import { Toast } from 'vant'
export default {
props: {
},
data () {
return {
ws: null,
wsUrl: '',
wsFun: null,
// 直播状态
livestate: '',
playurl: '',
allURL: '',
secname: '',
client_name: '',
c_id: 0,
avatar: '',
isteacher: '',
section_id: '',
jystatus: null,
msgText: '',
publishtime: '', // 发布评论时候的时间
msgDisplay: false,
isJinyan: false,
msgPlaceholder: '请在此输入参与评论……',
taolunList: [],
verOrHor: 0, // 0为竖屏，1为横屏
player: null,
flvplayer: null,
danmukuList: [],
isFlv: false,
programPuidesShow: false,
jiemudanShow: false,
LBOrWMimg: true,
checkBoxFields: ['isLive', 'withCredentials', 'hasAudio', 'hasVideo'],
streamURL: '',
mediaSourceURL: '',
live_wsurl: '',
socketkey: '',
AorO: false,
shareConfig: {
bdText: this.$store.state.courseName,
bdUrl: this.$store.state.bdUrl,
bdPic: this.$store.state.bdPic
},
submitIsCollection: true,
favorite: '',
shareSelect: false,
copyUrl: window.location.href,
scoketNo: true,
room_id: this.$route.query.classHourid
}
},
created () {
// this.starts()
// this.resize()
},
watch: {
ws: {
// 深度监听，可监听到对象、数组的变化
handler (val, oldVal) {
if (val != null) {
console.log(val)
}
},
deep: true
}
},
mounted () {
this.inits()
},
methods: {
inits() {
let _this = this
_this.ws = null
_this.axios({
method: 'get',
url: _this.api.live.livestudy,
params: {
id: _this.$route.query.classHourid,
token: _this.api.token,
client: _this.api.encodeClient
}
})
.then(function (response) {
if (response.data.state + '' !== 'true') {
_this.api.ErrorFn(response.data)
} else {
_this.livestate = response.data.data.lession.livestate
_this.allURL = response.data.data.lession.flvplayurl
_this.playurl = response.data.data.lession.url
_this.client_name = response.data.data.nicename
_this.secname = response.data.data.lession.secname
_this.c_id = Number(response.data.data.c_id)
_this.avatar = response.data.data.avatar
_this.isteacher = response.data.data.isteacher
_this.section_id = response.data.data.cid
_this.live_wsurl = response.data.data.live_wsurl
_this.socketkey = response.data.data.socketkey
_this.favorite = response.data.data.favorite
_this.wsUrl = 'ws://' + _this.live_wsurl + '/' + _this.socketkey
_this.webSockinit()
}
})
.catch(function (error) {
console.log(error)
})
},
webSockinit() {
let _this = this
if ('WebSocket' in window) {
// 打开一个 web socket
console.log(_this.wsUrl)
_this.ws = new WebSocket(_this.wsUrl)
var heartCheck = {
timeout: 10000, // 10s
timeoutObj: null,
serverTimeoutObj: null,
reset: function() {
clearTimeout(this.timeoutObj)
clearTimeout(this.serverTimeoutObj)
this.start()
},
start: function() {
var self = this
this.timeoutObj = setTimeout(function() {
_this.wsFun.liveSend('heartbeat')
self.serverTimeoutObj = setTimeout(function() {
_this.ws.close() // 如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
}, self.timeout)
}, this.timeout)
}
}
_this.wsFun = new liveWs(this.ws, this)
_this.ws.onopen = function() {
// Web Socket 已连接上，使用 send() 方法发送数据
heartCheck.start()
_this.wsFun.liveSend('login', _this)
}
_this.ws.onmessage = function (evt) {
heartCheck.reset()
var received_msg = JSON.parse(evt.data)
switch (received_msg.type) {
case 'login':
_this.isJinyan = received_msg.jystatus
_this.msgText = ''
if (_this.isJinyan === '1') {
if (_this.isteacher !== '1') {
_this.msgDisplay = true
_this.msgPlaceholder = '管理员禁言中……'
}
} else {
_this.msgDisplay = false
_this.msgPlaceholder = '请在此输入参与评论……'
if (_this.isteacher === '1') {
// _this.isJinyan = false
} else {
}
}
break
case 'saystatus':
_this.isJinyan = received_msg.jystatus
_this.msgDisplay = (received_msg.isJinyan === '1')
if (_this.isJinyan === '1') {
if (_this.isteacher !== '1') {
_this.msgDisplay = true
_this.msgPlaceholder = '管理员禁言中……'
}
} else {
_this.msgDisplay = false
_this.msgPlaceholder = '请在此输入参与评论……'
}
break
case 'heartbeat':
_this.wsFun.liveSend('heartbeat')
break
case 'say':
_this.taolunList.push({ 'avatar': received_msg.avatar, 'client_name': received_msg.from_client_name, 'time': new Date().Format('yyyy-MM-dd hh:mm:ss'), 'msg': received_msg.content, 'isteacher': received_msg.isteacher })
// 发布讨论后，滚动到最底部
var scrollHeight = $('.replyMessageUl').prop('scrollHeight')
$('.replyMessageUl').animate({scrollTop: scrollHeight}, 400)
break
case 'danmu':
if (_this.isFlv === true) {
_this.run_example('/data/upload/avatar/' + received_msg.avatar, received_msg.content)
} else {
_this.run_example('/data/upload/avatar/' + received_msg.avatar, received_msg.content)
_this.danmukuList.push({ 'mode': 1, 'text': received_msg.content, 'isteacher': received_msg.isteacher, 'size': 25, 'color': 0xffffff, 'stime': _this.player.getCurrentTime() + 1 })
}
break
}
}
_this.ws.onclose = function() {
if(_this.scoketNo){
console.log('连接已关闭,开始重连')
_this.webSockinit()
}
}
_this.ws.onerror = function () { _this.ws.close() }
} else {
// 浏览器不支持 WebSocket
alert('您的浏览器不支持 WebSocket!')
}
// flv视频直播
setTimeout(function () {
if (_this.getAorO() === 'Android') {
if (_this.getaversion() >= 6) {
_this.AorO = true
} else {
_this.AorO = false
}
_this.isFlv = true
_this.createFlvplayer()
} else {
_this.AorO = false
_this.createAliplayer()
}
}, 0)
if (this.getUrlParam('id') === '190' || this.getUrlParam('id') === '175') {
this.jiemudanShow = true
} else {
this.jiemudanShow = false
}
if (this.getUrlParam('id') === '190') {
this.LBOrWMimg = true
} else {
this.LBOrWMimg = false
}
},
starts() {
var deviceWidth = document.documentElement.clientWidth || document.body.clientWidth
if (deviceWidth > 375) deviceWidth = 375
document.documentElement.style.fontSize = deviceWidth / 3.75 + 'px'
var loaclHeight = $('section').height() // 获取可视宽度
$('input,textarea').focus(function() {
var keyboardHeight = loaclHeight - $('section').height() // 获取键盘的高度
var keyboardY = loaclHeight - keyboardHeight
var addBottom = (parseInt($(this).position().top) + parseInt($(this).height())) // 文本域的底部
var offset = addBottom - keyboardY // 计算上滑的距离
$('section').scrollTop(offset)
})
},
resize() {
window.onresize = function() {
var deviceWidth = document.documentElement.clientWidth || document.body.clientWidth
if (deviceWidth > 375) deviceWidth = 375
document.documentElement.style.fontSize = deviceWidth / 3.75 + 'px'
}
},
createFlvplayer() {
// flv视频播放
this.streamURL = document.getElementById('streamURL')
this.mediaSourceURL = document.getElementById('mediaSourceURL')
this.showVersion()
this.flvaddLog()
this.flv_load()
},
getaversion () {
var ua = navigator.userAgent.toLowerCase()
var version = null
if (ua.indexOf('android') > 0) {
var reg = /android [\d._]+/gi
var v_info = ua.match(reg)
version = (v_info + '').replace(/[^0-9|_.]/ig, '').replace(/_/ig, '.') // 得到版本号4.2.2
version = parseInt(version.split('.')[0]) // 得到版本号第一位
}
return version
},
getAorO() { // 获取当前操作系统
var os
if (navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Linux') > -1) {
os = 'Android'
} else if (navigator.userAgent.indexOf('iPhone') > -1 || navigator.userAgent.indexOf('iPad') > -1) {
os = 'iOS'
}
return os
},
createAliplayer() {
var _this = this
// $('#videoPlay').html('')
// 初始化阿里云播放器
_this.player = null
var aliplayerConfig = {
'id': 'videoPlay',
'source': _this.playurl,
'width': '100%',
'height': '80vw',
'autoplay': true,
'isLive': true,
'cover': '',
'rePlay': false,
'playsinline': true,
'preload': true,
'controlBarVisibility': 'hover',
'useH5Prism': true,
'skinLayout': [
{
'name': 'bigPlayButton',
'align': 'blabs',
'x': 30,
'y': 80
},
{
'name': 'H5Loading',
'align': 'cc'
},
{
'name': 'tooltip',
'align': 'blabs',
'x': 0,
'y': 56
},
{
'name': 'thumbnail'
},
{
'name': 'controlBar',
'align': 'blabs',
'x': 0,
'y': 0,
'children': [
{
'name': 'playButton',
'align': 'tl',
'x': 15,
'y': 12
},
{
'name': 'timeDisplay',
'align': 'tl',
'x': 10,
'y': 7
},
{
'name': 'fullScreenButton',
'align': 'tr',
'x': 10,
'y': 12
},
{
'name': 'volume',
'align': 'tr',
'x': 5,
'y': 10
}
]
}
],
"components": [{
name: 'AliplayerDanmuComponent',
type: AliPlayerComponent.AliplayerDanmuComponent,
args: [_this.danmukuList]
}]
}
_this.player = new Aliplayer(aliplayerConfig, function (player) {
console.log("播放器创建了。");
});
},
sendMessage() {
if (this.msgText == '') {
alert('禁止发送空消息！')
return false
}
this.publishtime = new Date().Format('yyyy-MM-dd hh:mm:ss')
this.wsFun.liveSend('say', this)
},
// 横竖屏切换，设置不同的样式
orient() {
if (window.orientation === 0 || window.orientation === 180) {
this.verOrHor = 0
$('#videoPlay').css({'width': '100%', 'height': '3rem'})
$('.liveBroadcast').removeClass('liveBroadcastHor').addClass('liveBroadcastVer')
$('.play-hrzt').css({'height': '80vw', 'flex': '0 0 80vw'})
// 可针对横竖屏改变用js动态改变css样式
return false
} else if (window.orientation === 90 || window.orientation === -90) {
this.verOrHor = 1
$('#videoPlay').css({'width': '100%', 'height': 'auto'})
$('.liveBroadcast').removeClass('liveBroadcastVer').addClass('liveBroadcastHor')
$('.play-hrzt').css({'height': '100%', 'flex': '0 0 auto'})
return false
}
},
changeLine() {
if (this.isFlv) {
this.createAliplayer()
this.flvplayer.pause()
} else {
this.createFlvplayer()
this.player.pause()
}
this.isFlv = !this.isFlv
},
// 打开节目单
openProgramPuides () {
this.programPuidesShow = true
},
// 关闭节目单
closeProgramPuides() {
this.programPuidesShow = false
},
flv_load() {
var i;
var mediaDataSource = {
type: 'flv'
};
for (i = 0; i < this.checkBoxFields.length; i++) {
var field = this.checkBoxFields[i]
/** @type {HTMLInputElement} */
var checkbox = document.getElementById(field)
mediaDataSource[field] = checkbox.checked
}
console.log(this.allURL)
mediaDataSource['url'] = this.allURL
console.log('MediaDataSource', mediaDataSource)
this.flv_load_mds(mediaDataSource)
// }
},
flv_load_mds(mediaDataSource) {
this.flvplayer = null
var element = document.getElementsByName('videoElement')[0];
if (typeof this.flvplayer !== 'undefined') {
if (this.flvplayer != null) {
this.flvplayer.unload()
this.flvplayer.detachMediaElement()
this.flvplayer.destroy()
this.flvplayer = null
}
}
this.flvplayer = flvjs.createPlayer(mediaDataSource, {
enableWorker: false,
lazyLoadMaxDuration: 3 * 60,
seekType: 'range',
});
this.flvplayer.attachMediaElement(element);
this.flvplayer.load()
},
// flv_start() {
// this.player.play();
// },
// flv_pause() {
// this.player.pause();
// },
// flv_destroy() {
// this.player.pause();
// this.player.unload();
// this.player.detachMediaElement();
// this.player.destroy();
// this.player = null;
// return false;
// },
flv_seekto() {
var input = document.getElementsByName('seekpoint')[0]
this.flvplayer.currentTime = parseFloat(input.value)
},
switch_url() {
this.streamURL.className = ''
this.mediaSourceURL.className = 'hidden'
this.saveSettings()
},
switch_mds() {
this.streamURL.className = 'hidden'
this.mediaSourceURL.className = ''
this.saveSettings()
},
ls_get(key, def) {
try {
var ret = localStorage.getItem('flvjs_demo.' + key)
if (ret === null) {
ret = def
}
return ret
} catch (e) {}
return def
},
ls_set(key, value) {
try {
localStorage.setItem('flvjs_demo.' + key, value)
} catch (e) {}
},
saveSettings() {
if (this.mediaSourceURL.className === '') {
this.ls_set('inputMode', 'MediaDataSource')
} else {
this.ls_set('inputMode', 'StreamURL')
}
var i;
for (i = 0; i < this.checkBoxFields.length; i++) {
var field = this.checkBoxFields[i];
/** @type {HTMLInputElement} */
var checkbox = document.getElementById(field);
this.ls_set(field, checkbox.checked ? '1' : '0')
}
this.ls_set('msURL', this.allURL)
this.ls_set('sURL', this.allURL)
console.log('save')
},
loadSettings() {
var i
for (i = 0; i < this.checkBoxFields.length; i++) {
var field = this.checkBoxFields[i]
/** @type {HTMLInputElement} */
var checkbox = document.getElementById(field)
}
},
showVersion() {
var version = flvjs.version
},
flvaddLog(){
var logcatbox = document.getElementsByName('logcatbox')[0]
flvjs.LoggingControl.addLogListener(function(type, str) {
logcatbox.value = logcatbox.value + str + '\n'
logcatbox.scrollTop = logcatbox.scrollHeight
});
},
// 插件发送弹幕
run_example(imgUrl, msg){
var example_item={'img': imgUrl,'info':msg}
$('body').barrager(example_item)
return false
},
videoplayHidden () {
this.scoketNo = false
this.$router.push({
path:`/liveDetails`,
query:{
id:this.$route.query.id,
}
})
},
// 收藏
collectionYes () {
let _this = this
if (this.submitIsCollection) {
this.submitIsCollection = false
_this.axios({
method: 'post',
url: _this.api.live.livefavorite,
data: {
cid: this.c_id,
token: _this.api.token,
client: _this.api.encodeClient
}
})
.then(function (response) {
if (response.status === 200 && response.data.states === true) {
}
_this.submitIsCollection = true
})
.catch(function (error) {
console.log(error)
_this.submitIsCollection = true
})
}
},
// 取消收藏
collectionNo () {
let _this = this
if (this.submitIsCollection) {
_this.axios({
method: 'post',
url: _this.api.live.liveunfavorite,
data: {
cid: this.c_id,
token: _this.api.token,
client: _this.api.encodeClient
}
})
.then(function (response) {
if (response.status === 200 && response.data.states === true) {
}
_this.submitIsCollection = true
})
.catch(function (error) {
console.log(error)
_this.submitIsCollection = true
})
}
},
shareopen () {
this.shareSelect = true
},
Qzshare () {
bdshare.qzone(this.shareConfig)
},
tsina () {
bdshare.tsina(this.shareConfig)
},
onCopy (e) {
this.shareSelect = false
Toast('复制链接成功')
},
onError () {
this.shareSelect = false
Toast('复制链接失败')
},
//获取url中的参数
getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)") // 构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg) // 匹配目标参数
if (r != null) return unescape(r[2]);return null // 返回参数值
},
}
}
</script>
<style scoped lang="less" rel="stylesheet/less" type="text/less">
@import "../../common/less/variable";
.videoplayback{
position: absolute;
z-index: 900;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #f3f5f7;
overflow: auto;
.mbl-con{
width: 100%;
height: 100%;
overflow: auto;
display: flex;
#videoPlay{
min-height: 80vw;
background: #000;
}
.videoPlayTop{
position: relative;
height: 90px;
background-color: rgba(0, 0, 0, 0.7);
.goBack{
margin-left: 10px;
width: 58px;
height: 90px;
vertical-align: middle;
text-align: center;
display: flex;
justify-content:center;
align-items:Center;
float: left;
.imgDiv{
width: 18px;
height: 30px;
img{
display: inline-block;
float: left;
width: 100%;
height: 100%;
}
}
}
.passwordTip{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
white-space: nowrap;
width: 80%;
text-overflow: ellipsis;
color: #fff;
font-size: 28px;
}
.videoOperation{
width: 80px;
height: 90px;
float: right;
margin-right: 10px;
display: flex;
justify-content:center;
align-items:Center;
.videoOperationImg{
width: 30px;
height: 6px;
img{
display: inline-block;
float: left;
width: 100%;
height: 100%;
}
}
}
}
.liveBottom{
flex: 1;
width: 100%;
position: relative;
display: flex;
flex-flow: column;
.sendMessage{
width: 100%;
height: 100px;
flex: 0 0 100px;
display: flex;
align-items: center;
background: #fff;
margin: 0 auto;
.msgInput{
padding: 0 60px 0 60px;
width: 98%;
height: 76px;
border: 1px solid #F1F1F1;
background-color: #F8F8F8;
font-size: 30px;
border-radius: 40px;
margin-left: 16px;
}
.msgInput:focus{
outline: none;
background-color: transparent;
}
.sendMsgA{
/*height: 0.38rem;*/
text-align: center;
padding: 18px 20px;
background-color: #4A90E2;
color: #FFFFFF;
font-size: 13px;
border-radius: 36px;
margin-left: 16px;
margin-right: 20px;
white-space:nowrap;
}
}
.replyMessageUl{
width: 100%;
background-color: #F8F8F8;
overflow: auto;
flex: 1;
ul li{
width: 100%;
height: auto;
margin-top: 10px;
display: flex;
.tltouxiang{
width: 40px;
height: 40px;
img{
width: 100%;
height: 100%;
}
}
}
}
}
.showButton{
width: 100%;
height: 76px;
padding: 10px;
background: #fff;
a{
width: auto;
display: block;
float: right;
height: 56px;
line-height: 56px;
text-align: center;
padding: 0 16px;
color: #FFFFFF;
font-size: 26px;
margin-left: 16px;
margin-right: 20px;
white-space: nowrap;
text-decoration: none;
border-radius: 12px;
}
.videoline{
background-color: #4A90E2;
}
.jiemudan{
background-color: #f44848;
}
}
}
.mbl-con-ver{
flex-direction: column;
}
.mbl-con-hor{
flex-direction: row;
}
}
.slide-enter-active,.slide-leave-active{
transition: all .3s
}
.slide-enter,.slide-leave-to{
transform: translate3d(100%, 0, 0)
}
.displayNone{
display: none !important;
}
.video-container{
height: 80vw;
background: #000;
div{
height: 80vw;
.centeredVideo{
height: 80vw;
width: 100%;
}
}
}
.videoOperationCon{
position: absolute;
background-color: #fff;
border-radius: 4px;
margin-top: 10px;
top: 80px;
right: 30px;
display: flex;
flex-direction: column;
padding-bottom:26px;
padding-right: 24px;
padding-left: 30px;
.voconItem{
line-height: 28px;
padding-top: 26px;
&:first-child{
padding-top: 22px;
}
.divImg{
width: 30px;
height: 28px;
display: inline-block;
img{
vertical-align: top;
width: 100%;
height: 100%;
}
}
.divVal{
display: inline-block;
font-size: @font-size-22;
color: #313131;
text-align: center;
width: 72px;
}
}
}
.shareCh{
overflow: hidden;
.shareline{
height: 120px;
width: 150px;
padding-top:36px;
text-align:center;
float: left;
overflow: hidden;
}
.bdshare-button-style0-32 a{
height: 50px;
width: 32px;
display: block;
margin: 0 auto;
float: initial;
}
.bdshare-button-style0-32 p{
font-size: @font-size-24;
}
.bdshare-button-style0-32 a.bds_qzone{
background: url(http://static.crecgec.com/wxmobile/kongjian.png) 0 0 no-repeat;
background-size: 100% auto;
}
.bdshare-button-style0-32 a.bds_tsina{background: url(http://static.crecgec.com/wxmobile/weibo.png) 0 0 no-repeat;
background-size: 100% auto;}
.bdshare-button-style0-32 a.bds_copyurl{background: url(http://static.crecgec.com/wxmobile/copyUrl.png) 0 0 no-repeat;
background-size: 100% auto;}
}
.voconItem{
width: 80px;
height: 90px;
float: right;
margin-right: 10px;
display: flex;
justify-content:center;
align-items:Center;
.divImg{
width: 28px;
height:30px;
img{
display: inline-block;
float: left;
width: 100%;
height: 100%;
}
}
}
</style>
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)