videojs介绍

  1. 免费，开源
  2. 插件多
  3. 可自定义

【推】

  • 虽然，但是Videojs算好了，但我觉得有点杂，特别是文档与插件，且自定义插件有点困难，也可能是我比较菜吧

  • 相比之下，我还是强烈推荐 【Xgplayer ——点我进入】

  • 备用地址 http://t.csdn.cn/H0cAV

    • Xgplayer 优点
      1. 优雅、美观
      2. 文档清晰明了
      3. 大厂出品——字节跳动，大厂出品——稳，大厂出品必属精品
      4. 方便自定义插件/方法
      5. 对移动端友好，如果做移动端视频播放器，无脑选Xgplayer就行。
      6. 支持弹幕
      7. 支持音乐播放器与歌词滚动

videojs下载

cnpm install --save-dev video.js

videojs官网

videojs官网
备用地址 https://videojs.com/

vue3中使用videojs

创建videojs组件

src/components/VideoPlay.vue

<template><video ref="videoPlayer" :class="vClass"class="vjs-styles-dimensions vjs-show-big-play-button-on-pause video-js"></video></template><script>import videojs from 'video.js';// 加载中文import lang_zhcn from "video.js/dist/lang/zh-CN.json"// 加载cssimport 'video.js/dist/video-js.min.css'// 使用中文videojs.addLanguage('zh-CN', lang_zhcn);export default {name: 'VideoPlayer',props: {videoSrc: {type: Object,default() {return {};}}},data() {return {player: null,// 菜单栏配置videoOptions: {autoplay: true,controls: true,preload: 'auto',playbackRates: [0.2, 0.5, 1, 1.5, 2, 2.5, 3],//视频播放速度// aspectRatio: '16:9',//宽高比，9:16 16:9 4:3等等设置后width和height属性无效// fluid: true,//自动计算宽高 ，若设置了aspectRatio，则失效// liveui: true,//不知userActions: {doubleClick: false,// 双击全屏 boolean|function // 热键// hotkeys(event) {// // 'x'键 - 暂停// if (event.which === 88) {// this.pause();// }// // `y` 键 - 播放// if (event.which === 89) {// this.play();// }// },//热键},language: 'zh-CN',controlBar: {children: [{ name: 'playToggle' }, // 播放按钮{ name: 'currentTimeDisplay' }, // 当前已播放时间{ name: 'progressControl' }, // 播放进度条{ name: 'durationDisplay' }, // 总时间{ name: 'audioTrackButton' },{ // 倍数播放name: 'playbackRateMenuButton',},// {// name: 'volumePanel', // 音量控制// inline: false, // 不使用水平方式// },],// PictureInPictureToggle: true,//画中画// 是否显示全屏按钮fullscreenToggle: true,// 音量是否在一行上显示// volumePanel: {// // true 同一行显示音量调整// // false 竖直显示音量调整// inline: false// },// 视频播放完时触发// true 显示回放图标// false 显示暂停图标playToggle: {replay: true}},// 视频地址sources: this.videoSrc,}}},mounted() {this.player = videojs(this.$refs.videoPlayer, this.videoOptions, () => {// this表示videojs实例 // 可在这里对videosjs操作console.log(this);// 例：创建按钮 const button = p.getChild('ControlBar').addChild('button', {controlText: '按钮',className: 'vjs-visible-text',clickHandler: function (event) {videojs.log('1');}});});},beforeDestroy() {if (this.player) {this.player.dispose();}}}</script> <style scoped>/* 、、、、、、、、、、显示当前+所有时间、、、、、、、、、、、、、、、。。 */.vjs-styles-dimensions>>>.vjs-control-bar .vjs-duration,.vjs-styles-dimensions>>>.vjs-control-bar .vjs-current-time {display: block;padding: 0;}/* 、、、、、、、、、、、播放器按钮大小+自定义全屏图标大小、、、、、、、、、、、、、、、、、、、 */.vjs-styles-dimensions>>>.vjs-control-bar button .vjs-icon-placeholder::before,.vjs-styles-dimensions>>>.vjs-control-bar .my-full-btn::before {font-size: 3em;line-height: 1.1;}/* 自定义播放器颜色 *//* Change all text and icon colors in the player. */.vjs-matrix.video-js {color: red;}/* Change the border of the big play button. */.vjs-matrix .vjs-big-play-button {border-color: red;}/* Change the color of various "bars". */.vjs-matrix .vjs-volume-level,.vjs-matrix .vjs-play-progress,.vjs-matrix .vjs-slider-bar {background: red;}</style>

使用videojs组件

src/views/HomeView.vue

<template><video-player :videoSrc="videoSrc" /></template><script setup>import { reactive } from 'vue';//视频地址 const videoSrc = reactive([{src:'/public/video/1.mp4',type: 'video/mp4'}])</script>

效果图

videojs常用class

  • 屏幕比列

    1. vjs-fluid 全屏
    2. vjs-16-9
    3. vjs-4-3
    4. vjs-9-16
    5. vjs-1-1
    6. vjs-fill 填满父级宽高(必须有父级)
    7. vjs-show-big-play-button-on-pause 显示中间暂停按钮
    8. video-js 必须的class
    9. vjs-styles-dimensions 通过该类自定义videojs，例
    .vjs-styles-dimensions .my-video-btn666{background:green;}

  • vjs-hidden 该class可隐藏菜单元素

【更多API参考】
videojs API参考

备用地址 https://docs.videojs.com

videojs图标库

  • videojs图标库
  • 备用地址 https://videojs.github.io/font/

videojs创建组件

  • 参考地址 component
  • 备用地址 https://videojs.com/guides/components#adding-a-component

End
2023/3/6 17:24

2023/3/6 20:22 一改

更多推荐

  1. videojs自定义全屏按钮