VedioJS 10

哎哟喂呢哈2026-10-11 8:05

手机端横屏
中文菜单

依赖

复制代码

yarn add @videojs/html@10.0.1 @videojs/hlsjs-video@10.0.1

创建组件 Player.vue

复制代码

#Player.vue

<template>
  <media-i18n>
    <orientation-video-player ref="player" orientation-lock-type="landscape" >
      <video-skin ref="skin">
        <slot />
      </video-skin>
    </orientation-video-player>
  </media-i18n>
</template>

<script setup>
import { createPlayer, orientationLockFeature } from '@videojs/html'
import { videoFeatures } from '@videojs/html/video'

import '@videojs/html/video/skin.css'
import '@videojs/html/video/player'
import '@videojs/html/video/skin'
import '@videojs/html/media/hlsjs-video'
import '@videojs/html/i18n/locales/zh-CN/register'//中文


import {onMounted} from "vue";



/**
 * 注册支持横屏锁定的自定义播放器
 * <video-player> 是预设播放器，默认包含 videoFeatures，但不包含 orientationLockFeature
 * 想使用 Video.js 10 自带的横屏锁定功能，就需要通过 createPlayer() 注册一个包含该功能的播放器
 * https://videojs.org/docs/framework/html/guides/fullscreen
 * 
 */
function registerPlayer() {
  if (!customElements.get('orientation-video-player')) {

    const { PlayerElement } = createPlayer({
      features: [
        ...videoFeatures,
        orientationLockFeature
      ]
    })
    customElements.define(
        'orientation-video-player',
        PlayerElement
    )
  }
}
registerPlayer()

onMounted(()=>{

})


defineProps({
  lang: {
    type: String,
    default: 'zh-CN'
  }
})
</script>

<style scoped>
video-skin {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
}
</style>

在其他组件中使用

复制代码

<template>
  <player lang="zh-cn">
          <hlsjs-video src="http://xxx.com/xxxx.mp4"></hlsjs-video>
        </player>

</template>

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

</script>