Video.js国际化配置

video.js和Vue集成

  1. 首先在 main.js 中导入、注册 video.js
javascript 复制代码
import videojs from 'video.js'
import 'video.js/dist/video-js.min.css'
import video_zh_CN from 'video.js/dist/lang/zh-CN.json'
import video_en from 'video.js/dist/lang/en.json'
videojs.addLanguage('zh_cn', video_zh_CN)  // 键名必须是zh_cn,不是将影响国际化
videojs.addLanguage('en', video_en)
Vue.prototype.$video = videojs
  1. 在 mounted 上实例化 video.js 播放器,并在 beforeDestroy 上销毁它
html 复制代码
<template>
    <video ref="videoPlayer"
           class="video-js vjs-default-skin"
           width="412"
           controls>
        <source :src="src" />
    </video>
</template>

<script>
import videojs from 'video.js';

export default {
    name: "VideoPlayer",
    props: {
        options: {
            type: Object,
            default() {
                return {};
            }
        },
        src: {
           type: String
        }  
    },
    data() {
        return {
            player: null
        }
    },
    mounted() {
        this.player = this.$video(this.$refs.videoPlayer, this.options, function onPlayerReady() 
        {
            console.log('onPlayerReady', this)
            console.log(this.language())  // this.language()方法可以打印当前Video.js实例的语种键值
        })
    },
    beforeDestroy() {
        if (this.player) {
            this.player.dispose()
        }
    }
}
</script>
  1. 然后你可以这样使用它:
html 复制代码
<template>
    <div>
        <!-- 国际化时区分传参即可,例如 zh_cn | en 等 -->
        <!-- 如果需要简体中文,必须传 zh_cn -->
        <video-player :options="{ language: 'zh_cn' }" src="某某mp4的url"/>
    </div>
</template>

<script>
import VideoPlayer from "@/components/VideoPlayer.vue";

export default {
	name: "VideoExample",
	components: {
		VideoPlayer
	}
}
</script>
相关推荐
艾小逗2 小时前
vue3中的effectScope有什么作用,如何使用?如何自动清理
前端·javascript·vue.js
Hamm5 小时前
用装饰器和ElementPlus,我们在NPM发布了这个好用的表格组件包
前端·vue.js·typescript
明似水6 小时前
Flutter 弹窗队列管理:支持优先级的线程安全通用弹窗队列系统
javascript·安全·flutter
HhhDreamof_7 小时前
云贝餐饮 最新 V3 独立连锁版 全开源 多端源码 VUE 可二开
前端·vue.js·开源
Simaoya7 小时前
【vue】【element-plus】 el-date-picker使用cell-class-name进行标记,type=year不生效解决方法
前端·javascript·vue.js
Dnn017 小时前
vue3+element-push 实现input框粘贴图片或文本,图片上传。
前端·javascript·vue.js
Nuyoah.7 小时前
《Vue3学习手记5》
前端·javascript·学习
曹牧7 小时前
Java 调用webservice接口输出xml自动转义
java·开发语言·javascript
天天扭码8 小时前
2025年了,npm 与 pnpm我们该如何选择
前端·javascript·npm
烛阴8 小时前
10个JavaScript编程技巧,助你成为高效开发高手!
前端·javascript