var icon =
'<div class="clearR" style="height: 30px;line-height: 30px; width:60px;"><i class="iconfont icon-shezhi sheZhi" style=" height: 30px;line-height: 30px; width:30px;" ></i><div class="clearSon"><div class="clearUltra ">超清1080 </div> <div class="highClear">高清720 </div> <div class="StandardClear">標清480 </div> </div> </div>'
var html =
'<button class="tongji" >統計</button> <button class="tiwen" >提問</button> '
var time =
'<div class="delayTime"><p class="delay">20ms</p> <p class="goTime">00:00 </p></div>'
//瀏覽器刷新就添加
$(document).ready(function () {
//在節點後面添加元素.after() 在節點前面添加元素.before()
$('.vjs-volume-menu-button').before(time)
$('.vjs-volume-menu-button').before(html)
$('.vjs-volume-menu-button').after(icon)
//由於不須要其餘的內容因此都刪除掉
$('.vjs-progress-control ').remove()
$('.vjs-remaining-time').remove()
$('.vjs-live-display').remove()
//設置css樣式
$('.tongji').css({
position: 'absolute',
bottom: '15px',
right: '350px',
'background-color': '#F39800',
height: '30px',
width: '80px',
'line-height': '30px',
'border-radius': '4px'
})
$('.tiwen').css({
position: 'absolute',
bottom: '15px',
right: '240px',
'background-color': '#6ACE48',
height: '30px',
width: '80px',
'line-height': '30px',
'border-radius': '4px'
})
$('.clearR').css({
position: 'absolute',
'text-align': 'center',
top: '17px',
right: '64px'
})
$('.clearSon').css({
display: 'none',
position: 'absolute',
height: '114px',
'font-size': ' 14px',
color: '#999',
'text-align': 'center',
'background-image': 'url(./images/bg_qingxidu.png)',
top: '-119px',
right: '-8px'
})
// 超清樣式
$('.clearUltra').css({
'margin-top': '6px',
width: '78px',
height: '14px'
})
// 高清樣式
$('.highClear').css({
margin: '18px 0',
height: '14px'
})
$('.delayTime').css({
display: 'flex',
'justify-content': ' flex-start'
})
// 延遲樣式
$('.delay').css({
'font-size': '14px',
'margin-left': '40px',
color: '#7DF87C',
width: '100PX'
})
// 已直播樣式
$('.goTime').css({
'font-size': '14px',
color: '#FFF',
width: '162PX'
})
// 鼠標進入離開音量 提問 統計樣式
$('.vjs-volume-menu-button')
.mouseover(function () {
$('.tiwen').css({
transition: 'all 0.4s',
right: '240px'
})
$('.tongji').css({
transition: 'all 0.4s',
right: '350px'
})
})
.mouseout(function () {
$('.tiwen').css({
right: '160px',
transition: 'all 0.4s'
})
$('.tongji').css({
transition: 'all 0.4s',
right: '270px'
})
})
// 鼠標進入離開顏色變動 超清
$('.clearUltra')
.mouseover(function () {
// $("#test").removeClass("cur");
$(this).css({
color: '#7DF87C'
})
})
.mouseout(function () {
$(this).css({
color: '#999'
})
})
// 鼠標進入離開顏色變動 高清
$('.highClear')
.mouseover(function () {
// $("#test").removeClass("cur");
$(this).css({
color: '#7DF87C'
})
})
.mouseout(function () {
$(this).css({
color: '#999'
})
})
// 鼠標進入離開顏色變動 標清
$('.StandardClear')
.mouseover(function () {
// $("#test").removeClass("cur");
$(this).css({
color: '#7DF87C'
})
})
.mouseout(function () {
$(this).css({
color: '#999'
})
})
// 點擊設置icon顯示清晰度
$('.sheZhi').click(function () {
if (flagR) {
flagR = false
$('.clearSon').show()
} else {
flagR = true
$('.clearSon').hide()
}
})
// 鼠標點擊後隱藏超清等
$('.clearUltra').click(function () {
$('.clearSon').hide()
})
// 鼠標點擊後隱藏超清等
$('.highClear').click(function () {
$('.clearSon').hide()
})
// 鼠標點擊後隱藏超清等
$('.StandardClear').click(function () {
$('.clearSon').hide()
})
})
