基于flv.js自定义播放器UI界面

公司需要播放flv格式播放器，所以基于flv.js写了个带UI的播放器，可支持MP4和flv格式，需要的可以直接复制，播放器界面如下，鼠标hover状态，以及播放中下边界显示播放进度

1.引入

首先将后边代码保存作为组件引入

  <FlvVideo   :VideoUrl="defintion"  VideoCode="flv"> </FlvVideo>
import FlvVideo from "~/components/flv";
export default {
  components:{
    FlvVideo
  },
data(){
return{

defintion:[]


}
}
。。。。。
}

2.设置清晰度

 
 this.defintion=[//设置不同清晰度，以及清晰度按钮文本
              {url:this.urls+\'?definition=LD&videoType=flv\',leavel:\'高清\'},
              {url:this.urls+\'?definition=SD&videoType=flv\',leavel:\'超清\'}
              ]

//将一下代码保存为flv.vue

<svg

version="1.1"

id="loader-1"

x="0px"

y="0px"

width="100px"

height="100px"

viewBox="0 0 50 50"

style="enable-background:new 0 0 50 50;"

xml:space="preserve"

<path

fill="#000"

d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z"

transform="rotate(110.097 25 25)"

<animateTransform

attributeType="xml"

attributeName="transform"

type="rotate"

from="0 25 25"

to="360 25 25"

dur="0.6s"

repeatCount="indefinite"

</path>

</svg>

</div>

<canvas v-show="isCanvas" class="video-body" id="canvas">您的浏览器不支持canvas</canvas>

<video

v-show="!isCanvas"

class="video-body"

@ended="ended($event)"

@error="error($event)"

@loadstart="loadstart($event)"

@canplay="canplay($event)"

@seeking="seeking($event)"

@seeked="seeked($event)"

@timeupdate="timeupdate($event)"

id="videoBody"

>您的浏览器不支持video</video>

</div>

<div class="current-time pull-left">{{currentDuration|initTimeLength}}</div>

<div

class="drawbar"

:class="{drawbar_active:isdrawbar_active}"

:style="{left:(currentDuration/duration)*100+\'%\',transform: \'scale(2) rotateZ(\'+(currentDuration/duration)*4*720+\'deg)\'}"

></div>

<input

class="bar-input"

@mouseleave="removeDrawbar"

@mouseenter="setDrawbar"

@mouseup="sliderUp()"

@input="slider($event,\'continue\')"

@change="slider($event,\'\')"

type="range"

min="0"

max="100"

:value="getCurrentDurationPercent"

</div>

<div class="duration-time pull-left">{{duration|initTimeLength}}</div>

</div>

<div

class="leavel"

v-for="(item,index) in VideoUrl"

:key="item.leave"

:class="{isActive:defintion==item.leavel}"

@click="chooseDefintion(item.leavel,index)"

>{{item.leavel}}</div>

</div>

<div class="defintion" @click="openDefintion">{{defintion}}</div>

<div

class="leavel"

v-for="item in Speed"

:key="item"

@click="chooseSpeed(item)"

:class="{isActive:speed==item}"

>X{{item.toFixed(1)}}</div>

</div>

<div class="speed" @click="openSpeed">X{{speed}}</div>

<input

class="volume-input"

:style="{\'background\':\'linear-gradient(to right, #a7bfe8, #6190e8 \' + volume + \'%, #ebeff4)\' }"

@input="setvolume($event)"

@change="setvolume($event,\'end\')"

type="range"

min="0"

max="100"

v-model="volume"

</div>

</div>

</div>

</template>

export default {

data() {

return {

flvSdkPath: "https://cdn.bootcss.com/flv.js/1.5.0/flv.min.js",

mime: "flv",

currentDuration: "0",

currentDurationTemp: 0,

duration: "1",

getBuffPrecent: "",

isPlay: false,

refDom: null,

flv_player_instance: null,

volume: 0,

canvas: null,

context: null,

isCanvas: false,

isShowControl: false,

isLoading: false,

isdrawbar_active: false,

width: 0,

height: 0,

isFixed: "relative",

timer: null,

speed: 1,

defintion: "",

isShowSpeed: false,

isShowDefintion: false,

controlTimer: null,

getCurrentDurationPercent: 0,

isNotDrag: true, //标志是否拖动中，快进快退中避免更新进度条

flvVideoCode: "flv",

isLoaded: false,

defintionTimer: null,

speedTimer: null,

isMuted: false,

};

head() {

return {};

props: {

// VideoUrl: {

// type: String,

// default:

// "http://store.91yunshi.com/storage/videoAuth/gaugua/41175fe7fdc74354a8d99a3f7aa1457d.mp4?videoType=flv&_t=1592535251776"

// },

Speed: {

type: Array,

default() {

return [0.5, 1.0, 1.5, 2];

ifisShowControl: {

type: Boolean,

default: true, //只支持flv或MP4

VideoCode: {

type: String,

default: "flv", //只支持flv或MP4

validator: function (value) {

// 这个值必须匹配下列字符串中的一个

return ["flv", "mp4"].indexOf(value) !== -1;

VideoUrl: {

type: Array,

default() {

return [

// {

// url:

// "http://store.91yunshi.com/storage/videoAuth/gaugua/41175fe7fdc74354a8d99a3f7aa1457d.mp4?videoType=flv&_t=1592535251776",

// leavel: "高清"

// },

// {

// url:

// "http://store.91yunshi.com/storage/videoAuth/gaugua/41175fe7fdc74354a8d99a3f7aa1457d.mp4?videoType=flv&_t=1592535251776",

// leavel: "超清"

// },

// {

// url:

// "http://store.91yunshi.com/storage/videoAuth/gaugua/41175fe7fdc74354a8d99a3f7aa1457d.mp4?videoType=flv&_t=1592535251776",

// leavel: "蓝光"

// }

];

watch: {

VideoUrl: {

handler(newVal, old) {

this.reloadUrl();

deep: true,

filters: {

initTimeLength(timeLength) {

let result = parseInt(timeLength);

let h =

Math.floor(result / 3600) < 10

? "0" + Math.floor(result / 3600)

: Math.floor(result / 3600);

let m =

Math.floor((result / 60) % 60) < 10

? "0" + Math.floor((result / 60) % 60)

: Math.floor((result / 60) % 60);

let s =

Math.floor(result % 60) < 10

? "0" + Math.floor(result % 60)

: Math.floor(result % 60);

return `${h}:${m}:${s}`;

// //根据秒数格式化时间

// timeLength = parseInt(timeLength);

// var second = timeLength % 60;

// var minute = (timeLength - second) / 60;

// return (

// (minute < 10 ? "0" + minute : minute) +

// ":" +

// (second < 10 ? "0" + second : second)

// );

// speedFilter(val){

// console.log(val);

// let num = parseInt(val)

// return num.toFixed(1)

// }

methods: {

switchMime() {

if (this.mime == "flv") {

this.mime = "mp4";

} else {

this.mime = "flv";

}

this.$emit("mime", this.mime);

setDrawbar() {

this.isdrawbar_active = true;

removeDrawbar() {

this.isdrawbar_active = false;

Enter() {

clearTimeout(this.controlTimer);

this.isShowControl = true;

this.controlTimer = setTimeout(() => {

this.isShowControl = false;

}, 5000);

openDefintion() {

//打开清晰度切换容器

clearTimeout(this.defintionTimer);

this.isShowDefintion = true;

this.defintionTimer = setTimeout(() => {

this.isShowDefintion = false;

}, 3000);

chooseDefintion(defintion, index) {

localStorage.setItem("flv_defintion", index);

localStorage.setItem(

"flv_defintion_currenttime",

this.refDom.currentTime

);

//选择清晰度

this.defintion = defintion;

this.isShowDefintion = false;

this.reloadUrl();

reloadUrl() {

this.flv_destroy();

this.initPlay();

openSpeed() {

//打开播放速度容器

clearTimeout(this.speedTimer);

this.isShowSpeed = true;

this.speedTimer = setTimeout(() => {

this.isShowSpeed = false;

}, 3000);

chooseSpeed(speed) {

//选择播放速度

this.refDom.playbackRate = speed;

this.speed = speed;

this.isShowSpeed = false;

setvolume(e, isend) {

//设置音量

let dom = e.target;

if (isend == "end" && this.isMuted) {

this.refDom.muted = false;

this.isMuted = false;

}

this.refDom.volume = dom.value / 100;

localStorage.setItem("fly_volume", dom.value / 100);

this.volume = dom.value;

slider(e, type) {

//进度滑动设置

let dom = e.target;

this.currentDuration = this.currentDurationTemp =

(Number(dom.value) * this.duration) / 100;

if (type == "continue") {

this.refDom.pause();

} else {

this.refDom.currentTime = this.currentDuration;

}

sliderUp() {

this.refDom.currentTime = this.currentDurationTemp;

// this.isNotDrag=true;

// console.log( this.isNotDrag);

this.refDom.play();

init(videoItem) {

this.isLoaded = false; //播放器数据初始化能播放后再显示UI页面

let url = "";

this.refDom = document.getElementById("videoBody");

if (!!!videoItem) return;

url = videoItem.url;

console.log(url);

//flv播放器初始化

window.cancelAnimationFrame(this.timer);

if (flvjs.isSupported()) {

this.flv_player_instance = flvjs.createPlayer(

{

seekType: "range",

type: this.flvVideoCode,

url: url,

isLive:false

{

enableWorker: true,

lazyLoad: false,

lazyLoadMaxDuration: 20 * 60,

}

);

this.defintion = videoItem && videoItem.leavel;

this.flv_player_instance.attachMediaElement(this.refDom);

this.flv_player_instance.load(); //加载

this.flv_player_instance.play();

this.flv_player_instance.on("error", (err) => {

// console.log(\'err\', err);

if (err == "MediaError") {

if (this.flvVideoCode == "flv") {

//如果是格式错误，尝试切换格式播放

this.flvVideoCode = "mp4";

console.warn("尝试切换mp4格式播放");

} else {

console.warn("尝试切换flv格式播放");

this.flvVideoCode = "flv";

}

this.reloadUrl();

}

});

} else {

this.refDom.src = url;

}

flv_destroy() {

if (this.flv_player_instance) {

this.flv_player_instance.pause();

this.flv_player_instance.unload();

this.flv_player_instance.detachMediaElement();

this.flv_player_instance.destroy();

this.flv_player_instance = null;

}

setMute() {

if (!this.refDom.muted) {

this.refDom.muted = true;

this.isMuted = true;

} else {

this.refDom.muted = false;

this.isMuted = false;

}

canplay(e) {

this.isLoaded = true;

let currentTime = localStorage.getItem("flv_defintion_currenttime"); //保存上次进度，切换清晰度的时候还原进度

//资源可以播放

let dom = e.target;

if (!!currentTime) {

dom.currentTime = currentTime;

localStorage.removeItem("flv_defintion_currenttime");

}

this.duration = dom.duration || 1;

this.currentDuration = dom.currentTime || 0;

dom.volume = localStorage.getItem("fly_volume") || 0.5;

this.volume = dom.volume * 100;

this.speed = dom.playbackRate.toFixed(1);

dom.play();

this.isLoading = false;

this.$emit("isplay", true);

getCanvasInit() {

//canvas初始化

this.canvas = document.getElementById("canvas");

this.context = canvas.getContext("2d");

this.canvas.width = document.body.clientWidth;

this.canvas.height = document.body.clientHeight;

this.drawCanvas();

drawCanvas() {

//绘制视频到canvas

this.context.drawImage(

this.refDom,

this.canvas.width,

this.canvas.height

); //绘制视频

this.timer = window.requestAnimationFrame(this.drawCanvas);

play() {

//播放暂停

if (this.refDom.paused) {

this.refDom.play();

this.isPlay = false;

} else {

this.refDom.pause();

this.isPlay = true;

}

fullScreen() {

if (this.isFixed == "fixed") {

//如果全屏退出全屏

this.isFixed = "relative";

// this.isCanvas = false;

// window.cancelAnimationFrame(this.timer);

} else {

this.isFixed = "fixed";

// this.isCanvas = true;

// this.getCanvasInit();

}

ended(e) {

this.$emit("flvEnded", true);

seeking(e) {

// console.log(e);

this.isLoading = true;

seeked(e) {

this.isLoading = false;

// console.log(e);

error(e) {

let err = e.target.error;

console.error(err);

if (err.code == 4) {

//error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效

if (this.flvVideoCode == "flv") {

//如果是格式错误，尝试切换格式播放

this.flvVideoCode = "mp4";

console.warn("尝试切换mp4格式播放");

} else {

console.warn("尝试切换flv格式播放");

this.flvVideoCode = "flv";

}

this.reloadUrl();

}

this.isLoading = false;

loadstart() {

this.isLoading = true;

timeupdate(e) {

//播放进度更新回调

let dom = e.target;

// 视频时长

this.duration = dom.duration || 1;

// currentTime 当前播放时长

this.currentDuration = dom.currentTime;

//当前缓冲进度时长结束位置

let buffLength = dom.buffered.length;

if (buffLength != 0) {

var currentBuffer = dom.buffered.end(buffLength - 1);

var percentage = (100 * currentBuffer) / this.duration;

this.getBuffPrecent = percentage;

}

if (this.isNotDrag) {

this.getCurrentDurationPercent =

(this.currentDuration / this.duration) * 100;

}

initPlay() {

let defintion = localStorage.getItem("flv_defintion");

if (!!defintion) {

//如果本地保存了清晰度自动选择之前清晰度,否则加载第一个

this.insertScriptTag(() => {

this.init(this.VideoUrl[defintion]);

});

} else {

this.insertScriptTag(() => {

this.init(this.VideoUrl[0]);

});

}

insertScriptTag(cb) {

const _this = this;

let playerScriptTag = document.getElementById("playerScriptTag");

// 如果这个tag不存在，则生成相关代码tag以加载代码

if (playerScriptTag === null) {

playerScriptTag = document.createElement("script");

playerScriptTag.type = "text/javascript";

playerScriptTag.id = "playerScriptTag";

let s = document.getElementsByTagName("head")[0];

playerScriptTag.onload = playerScriptTag.onreadystatechange = function () {

if (

!this.readyState ||

this.readyState === "loaded" ||

this.readyState === "complete"

) {

cb && cb();

playerScriptTag.onload = playerScriptTag.onreadystatechange = null;

}

};

playerScriptTag.src = this.flvSdkPath;

s.appendChild(playerScriptTag);

} else {

cb && cb();

}

mounted() {

// console.log(this.VideoUrl);

if (this.VideoUrl.length == 0) {

return new Error("未输入地址");

}

this.flvVideoCode = this.VideoCode;

this.insertScriptTag(() => {

this.initPlay();

});

};

</script>

/*video样式*/

.video-box {

top: 0;

left: 0;

overflow: hidden;

background: #000;

width: 100%;

height: 100%;

z-index: 999;

}

.video-box-body {

position: relative;

width: 100%;

height: 100%;

overflow: hidden;

}

.video-body {

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

z-index: 15;

}

#canvas {

width: 80%;

left: 10%;

}

/*控制条样式*/

.video-control {

display: flex;

position: absolute;

width: 100%;

height: 60px;

padding: 5px;

line-height: 50px;

background: rgba(0, 0, 0, 0.5);

box-shadow: 0 1px 15px 15px rgba(0, 0, 0, 0.5);

transition-duration: 300ms;

z-index: 999;

left: 0;

bottom: 0;

}

.control-leftview {

display: flex;

position: relative;

z-index: 5;

width: 120px;

}

.control-btn {

display: inline-block;

width: 25px;

height: 25px;

background: rgba(256, 256, 256, 0.5);

cursor: pointer;

}

.control-leftview .control-btn {

margin-right: 10px;

}

.progress-box {

width: 85%;

height: 50px;

padding-right: 20px;

}

.progress-box-body {

display: flex;

width: 100%;

height: 100%;

}

.current-time,

.duration-time {

width: 60px;

text-align: center;

color: #fff;

}

.current-time {

margin-right: -60px;

position: relative;

z-index: 5;

}

.duration-time {

margin-left: -60px;

position: relative;

z-index: 5;

}

.durationbar-box {

position: relative;

width: 100%;

padding: 0 70px;

}

.durationbar {

width: 100%;

height: 6px;

margin-top: 23px;

background: #fff;

border-radius: 50px;

position: relative;

}

.bufferbar,

.currentbar {

position: absolute;

left: 0;

top: 0;

height: 100%;

width: 0;

background: rgba(0, 0, 0, 0.3);

border-radius: 50px;

z-index: 5;

cursor: pointer;

}

.currentbar {

background: linear-gradient(to right, #a7bfe8, #6190e8);

z-index: 10;

}

.drawbar {

position: absolute;

background: #fff;

width: 20px;

height: 20px;

left: 0;

top: -5px;

z-index: 10;

margin-left: -4px;

border-radius: 50px;

cursor: pointer;

background-color: transparent;

background-image: url("../assets/image/thumbs-sprite.png");

background-position: 0 0;

background-size: cover;

transform: scale(1.9) rotateZ(10deg);

}

.drawbar_active {

background-position: 100% 0px;

}

.control-rightview {

cursor: pointer;

position: relative;

width: 460px;

z-index: 5;

}

.speed {

display: inline-block;

width: 40px;

color: #fff;

font-size: 16px;

}

.defintion {

display: inline-block;

color: #fff;

font-size: 14px;

width: 40px;

}

.isActive {

color: coral;

}

.leavel {

cursor: pointer;

}

.speed-wrap {

position: absolute;

bottom: 50px;

left: 44px;

background: rgba(0, 0, 0, 0.5);

color: #fff;

padding: 0 10px;

border-radius: 6px;

line-height: 30px;

font-size: 16px;

}

.defintion-wrap {

position: absolute;

bottom: 50px;

left: -10px;

background: rgba(0, 0, 0, 0.5);

color: #fff;

padding: 0 10px;

border-radius: 6px;

line-height: 30px;

font-size: 16px;

}

.control-rightview .control-btn {

margin-left: 10px;

vertical-align: middle;

}

.control-leftview .control-btn:last-child,

.control-rightview .control-btn:first-child {

margin: 0;

}

.control-btn.loadbtn {

/* background: url(../img/load.png) no-repeat center; */

background-size: 100%;

}

.control-btn.playbtn {

width: 50px;

height: 50px;

background: url("../assets/image/pause.png") no-repeat center;

background-size: 100%;

}

.control-btn.playbtn.pausebtn {

background: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik04IDV2MTRsMTEtN3oiLz4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg==")

no-repeat center;

background-size: 100%;

}

.control-btn.mutedbtn {

background: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0zIDl2Nmg0bDUgNVY0TDcgOUgzem0xMy41IDNjMC0xLjc3LTEuMDItMy4yOS0yLjUtNC4wM3Y4LjA1YzEuNDgtLjczIDIuNS0yLjI1IDIuNS00LjAyek0xNCAzLjIzdjIuMDZjMi44OS44NiA1IDMuNTQgNSA2Ljcxcy0yLjExIDUuODUtNSA2LjcxdjIuMDZjNC4wMS0uOTEgNy00LjQ5IDctOC43N3MtMi45OS03Ljg2LTctOC43N3oiLz4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg==")

no-repeat center;

background-size: 100%;

}

.control-btn.muted {

background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAACZklEQVR4Xu2avy4FQRTGvxM9SomSChGVRCehUQkJiV6vEjrUXkNF4s8TeAQVFRoPIPECnxyZm6yxu7PuWHd2z2xzczN39u73m++c+bNHYPwS4/qRAWQHGCeQQ8C4AUaTBEluAFgGcCEiL6MchH8NAZIzAI4B7DvRNyKybQIAyQMnfqooWET+dRB82K3/Ocl1AEcA9PPH1VsAJHWk1e468pVXLwGQ1BhX8RrztVevAJBccXbfDAkftPcCAMlxJ1xjfaypeP1d5wGQ3HN2X/yN8KQcQHIHwAmA+WFExPQZuQNIqvDTGBExfVMA8ABgKUZETN8UADBGQGzfDGDUS2GS2QGxNo7pXxcChdlpGsA9gMPQ9tntOM8BrAF4BXArImdVzyipOqBidnoEsCsiT2WCSM4BuCyZzrXPVelmLGEAVbNTKYQa8ar7UUQWugbgHcBkhXW/QQiI11t8iMhE1wBcA9iqyS9fEFx7me2LXStPnlLOAbqVvgssz5+dytkAqM2q5JksABXUwNqhCag2aX7tRlNNggNlERCC4jsBYEgnNBLfGQAFCJoT6uJdf6p5QWO+dK3gx0zyIeCFgk0AQ+SB/oTAEOIHpmkEIekQiBDfGEKyANyuzu5CiKT5pbD5zZD57XDZcb2dAxG3+hu8sLF3JBba5v1Ve7LT4F8JDN0nAyBp/tWY7ZejXra193o8lCRC7b0okAiJDLWbLpEpwjFbJOU7xGyZnOcGu4WSHgibpbIlYWGzWNpzg91yeQ/Eqvv+Fqr4CE3Bse2tl8vHPmDb/TOAtgmnfv/sgNRHqO3nyw5om3Dq9/8EUtNyUHSPJr8AAAAASUVORK5CYII=")

no-repeat center;

background-size: 100%;

}

.control-btn.fullscreenbar {

background: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICAgIDxwYXRoIGQ9Ik03IDE0SDV2NWg1di0ySDd2LTN6bS0yLTRoMlY3aDNWNUg1djV6bTEyIDdoLTN2Mmg1di01aC0ydjN6TTE0IDV2MmgzdjNoMlY1aC01eiIvPgo8L3N2Zz4K")

no-repeat center;

background-size: 100%;

}

.control-btn.mime {

line-height: 25px;

background: none;

color: #fff;

}

.bar-input {

position: absolute;

height: 100%;

left: 0;

right: 0;

margin: auto;

width: 100%;

opacity: 0;

z-index: 999;

cursor: pointer;

}

.volumn-btn-wrap {

position: relative;

display: inline-block;

width: 120px;

}

/* .volumn-btn-slider{

} */

.volumn-btn {

position: absolute;

left: 0;

top: 20px;

height: 20px;

width: 20px;

transform: translateY(0px);

background: #fff;

border-radius: 15px;

border: 5px solid #6190e8;

z-index: -1;

}

.volume-input {

height: 100%;

width: 100%;

/* opacity: 0; */

z-index: 999;

cursor: pointer;

}

.loader {

width: 140px;

height: 140px;

/* border: 1px solid red; */

text-align: center;

position: absolute;

top: calc(50% - 70px);

left: calc(50% - 70px);

padding-top: 15px;

z-index: 9999;

background-color: rgba(0, 0, 0, 0.5);

border-radius: 5px;

}

#loader-1 {

width: 60px;

height: 60px;

}

svg path,

svg rect {

fill: #17a085;

}

.load-msg {

height: 50px;

line-height: 50px;

color: #fff;

font-size: 13px;

/* margin-top: 20px; */

}

.volume-input {

/*-webkit-box-shadow: 0 1px 0 0px #424242, 0 1px 0 #060607 inset, 0px 2px 10px 0px black inset, 1px 0px 2px rgba(0, 0, 0, 0.4) inset, 0 0px 1px rgba(0, 0, 0, 0.6) inset;*/

-webkit-appearance: none; /*去除默认样式*/

margin-top: 24px;

background-color: #ebeff4;

/*border-radius: 15px;*/

-webkit-appearance: none;

height: 4px;

padding: 0;

border: none;

outline: none;

/*input的长度为80%，margin-left的长度为10%*/

}

.volume-input::-webkit-slider-thumb {

-webkit-appearance: none; /*去除默认样式*/

cursor: pointer;

top: 0;

height: 20px;

width: 20px;

transform: translateY(0px);

background: #fff;

border-radius: 15px;

border: 5px solid #6190e8;

/*-webkit-box-shadow: 0 -1px 1px #fc7701 inset;*/

}

video:-webkit-full-screen {

z-index: 9 !important;

width: 100% !important;

height: 100% !important;

}

video::-webkit-media-controls {

display: none !important;

}

.video-progress {

position: absolute;

width: 100%;

left: 0;

bottom: 0;

height: 4px;

z-index: 999999;

}

.video-progress-current {

position: absolute;

width: 0%;

left: 0;

bottom: 0;

height: 4px;

border-radius: 2px;

background: tomato;

}

</style>

秒客网

基于flv.js自定义播放器UI界面

相关文章