video.js 自定义播放组件

这个要放到全局样式，不然不起作用

/*动态渲染的，要放到全局样式*/
.vjs-time-control {
display:block !important;
}
.vjs-remaining-time {
display:none !important;
}
.vjs-no-flex .vjs-current-time{
padding-right: 0;
}
.vjs-time-control.vjs-control{
padding-left: 0;
}

const video =
videojs('player',{
language:'zh-CN',
width:630,
height: 439,
fluid:true,
playbackRates:[0.5,1,1.5,2],
controls:true
})

全部代码参考

<template>
<nav-bar />
<div class="Icontainer">
<div class="video-wrapper">
<video id="player"
preload="auto" controls
class="video-js vjs-default-skin vjs-big-play-centered">
<source :src="videoUrl" type="video/mp4">
<p class="vjs-no-js">不支持这个视频格式</p>
</video>
<div id="demo">
<div class="left">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch1">
<label class="custom-control-label" for="customSwitch1">开启弹幕</label>
</div>
</div>
<div class="right">
<input type="text"
class="form-control" placeholder="发句弹幕吧~">
<div class="btn btn-primary send">发送</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import {Options, Vue} from "vue-class-component";
import NavBar from "@/components/navbar/NavBar.vue";
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
@Options({
components:{
NavBar
}
})
export default class VideoRoom extends Vue {
// player:any
videoUrl = 'http://666.itshare.club/1604130528960';
mounted() {
const video =
videojs('player',{
language:'zh-CN',
width:630,
height: 439,
fluid:true,
playbackRates:[0.5,1,1.5,2],
controls:true
})
}
}
</script>
<style scoped lang="scss">
@import "@/assets/style/layout.scss";
.Icontainer{
width: 1688px;
height: 755px;
position: relative;
}
.video-wrapper{
position: absolute;
top: 70px;
left: 143px;
width: 640px;
height: 439px;
#demo {
@include flex-row-between;
@include bar-shadow;
/*border-bottom: 1px solid #414040;*/
flex-wrap: nowrap;
align-items: center;
.right {
width: 402px;
height: 38px;
overflow: hidden;
display: flex;
.send {
min-width: 105px
}
input:focus {
border: 1px solid #ced4da;
}
input{
border: 1px solid #ced4da;
}
}
}
}
</style>

最后

以上就是大意朋友为你收集整理的video.js 自定义播放组件的全部内容，希望文章能够帮你解决video.js 自定义播放组件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。