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>
相关推荐
我自纵横20232 分钟前
使用 JavaScript 动态设置 CSS 样式
开发语言·前端·javascript·css·html·json·html5
leluckys22 分钟前
flutter 专题 六十八 Flutter 多图片上传
前端·javascript·flutter
Enti7c29 分钟前
数据一键导出为 Excel 文件
前端·javascript·excel·jquery
microhex1 小时前
Javascript代码压缩混淆工具terser详解
开发语言·javascript·ecmascript
工业互联网专业1 小时前
基于springboot+vue的二手车交易系统
java·vue.js·spring boot·毕业设计·源码·课程设计·二手车交易系统
逆袭的小黄鸭1 小时前
掌握 JavaScript:理解原型和原型链
前端·javascript·面试
前端小趴菜051 小时前
记录 vue-router访问 / 路径直接重定向到有权限的第一个菜单
前端·javascript·vue.js
疏狂难除1 小时前
【Tauri2】013——前端Window Event与创建Window
前端·javascript·rust·react·tauri2
yanyu-yaya2 小时前
@progress/kendo-react-dropdowns <ComboBox>组件报错,解决
前端·javascript·react.js
小破孩呦2 小时前
动态循环表单+动态判断表单类型+动态判断表单是否必填方法
前端·javascript·html