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>
相关推荐
Amy.Wang6 分钟前
前端如何实现电子签名
前端·javascript·html5
海天胜景8 分钟前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼9 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
百锦再13 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling55518 分钟前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
FogLetter25 分钟前
图片懒加载:让网页飞起来的魔法技巧 ✨
前端·javascript·css
拾光拾趣录28 分钟前
JavaScript 加载对浏览器渲染的影响
前端·javascript·浏览器
木头没有瓜2 小时前
vscode离线安装插件
ide·vue.js·vscode
浪裡遊3 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
夏梦春蝉4 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6