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>
相关推荐
江拥羡橙1 小时前
Vue和React怎么选?全面比对
前端·vue.js·react.js
千码君20161 小时前
React Native:快速熟悉react 语法和企业级开发
javascript·react native·react.js·vite·hook
暮之沧蓝3 小时前
Vue总结
前端·javascript·vue.js
木易 士心4 小时前
Promise深度解析:前端异步编程的核心
前端·javascript
excel4 小时前
深入解析 Vue 3 源码:computed 的底层实现原理
前端·javascript·vue.js
zero13_小葵司4 小时前
在Vue项目中构建后端配置的动态路由及权限控制体系
前端·javascript·vue.js
GISer_Jing4 小时前
前端框架篇——Vue&React篇
前端·javascript
子兮曰5 小时前
WebSocket 连接:实现实时双向通信的前端技术
前端·javascript·websocket
cooldream20095 小时前
深度解析中秋节HTML5动画的实现
前端·html·html5