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 分钟前
JavaScript :事件循环机制的深度解析
javascript·后端
摆烂为不摆烂5 分钟前
😁深入JS(六): 一文让你完全理解浏览器进程与线程
前端·javascript
我血条子呢1 小时前
动态组件和插槽
前端·javascript·vue.js
前端付豪1 小时前
13、表格系统架构:列配置、嵌套数据、复杂交互
前端·javascript·架构
南屿im1 小时前
发布订阅模式和观察者模式傻傻分不清?一文搞懂两大设计模式
前端·javascript
JustHappy1 小时前
SPA?MPA?有啥关系?有啥区别?聊一聊页面形态 or 路由模式
前端·javascript·架构
每天开心1 小时前
🧙‍♂️闭包应用场景之--防抖和节流
前端·javascript·面试
归于尽1 小时前
Generator?从 yield 卡壳,到终于搞懂协程那点事
前端·javascript
FogLetter1 小时前
React组件开发进阶:本地存储与自定义Hooks的艺术
前端·javascript·react.js
GISer_Jing1 小时前
前端开发—全栈开发
前端·javascript