【VideoJs】初识videojs && video.js 视频播放器的基本使用 && videojs基础用法 && videojs视频播放器 && vue3中使用videojs

02-27 1090阅读 0评论

videojs介绍

免费，开源
插件多
可自定义

【推】

$【VideoJs】初识videojs && video.js 视频播放器的基本使用 && videojs基础用法 && videojs视频播放器 && vue3中使用videojs,【VideoJs】初识videojs && video.js 视频播放器的基本使用 && videojs基础用法 && videojs视频播放器 && vue3中使用videojs,词库加载错误:未能找到文件“C:\Users\Administrator\Desktop\火车头9.8破解版\Configuration\Dict_Stopwords.txt”。,使用,设置,比较,第1张$

（图片来源网络，侵删）

虽然，但是Videojs算好了，但我觉得有点杂，特别是文档与插件，且自定义插件有点困难，也可能是我比较菜吧
相比之下，我还是强烈推荐【Xgplayer ——点我进入】

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

Xgplayer 优点

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

videojs下载

cnpm install --save-dev video.js

videojs官网

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

vue3中使用videojs

创建videojs组件

src/components/VideoPlay.vue

（图片来源网络，侵删）

    
    

  

import videojs from 'video.js';
// 加载中文
import lang_zhcn from "video.js/dist/lang/zh-CN.json"
// 加载css
import '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();
        }
    }
}

 

/* 、、、、、、、、、、显示当前+所有时间、、、、、、、、、、、、、、、。。 */
.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;
}

使用videojs组件

src/views/HomeView.vue

    


import { reactive } from 'vue';
//  视频地址 
const videoSrc = reactive(
    [
        {
            src:
                '/public/video/1.mp4',
            type: 'video/mp4'
        }
    ]
)

效果图

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参考
$【VideoJs】初识videojs && video.js 视频播放器的基本使用 && videojs基础用法 && videojs视频播放器 && vue3中使用videojs,【VideoJs】初识videojs && video.js 视频播放器的基本使用 && videojs基础用法 && videojs视频播放器 && vue3中使用videojs,词库加载错误:未能找到文件“C:\Users\Administrator\Desktop\火车头9.8破解版\Configuration\Dict_Stopwords.txt”。,使用,设置,比较,第4张$
（图片来源网络，侵删）

备用地址 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自定义全屏按钮