30 Dec, 2025

客製化影片播放器 Media Chrome 使用指南 (三)

上一個章節我們介紹了CSS變數以及各種的狀態屬性，接下來我們要開始進入到如何整合到前端框架 Vue / Nuxt 裡面來使用，以及如何支援其他的媒體格式！還有多國語系的處理！

前端框架的整合使用，以 Vue 跟 Nuxt 為例！

首先我們先來整合 Vue，先起一個 Vite 的專案~

npm create vite@latest my-vue-app -- --template vue

然後 npm install media-chrome

npm install media-chrome --save

接下來在 Vite 專案中去做一些設定

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // 告訴 Vue 以 media- 開頭的標籤是自訂組件
          isCustomElement: (tag) => tag.startsWith('media-'),
        },
      },
    }),
  ],
});

就可以直接在組件內引入 media-chrome 的元件

import 'media-chrome';

改寫你的元件 App.vue

// <script setup>
import { ref, onMounted } from 'vue';
import 'media-chrome';

const videoRef = ref(null);
const isPlaying = ref(false);
const currentTime = ref(0);
const duration = ref(0);

const formatTime = (seconds) => {
  const mins = Math.floor(seconds / 60);
  const secs = Math.floor(seconds % 60);
  return `${mins}:${secs.toString().padStart(2, '0')}`;
};

onMounted(() => {
  videoRef.value.addEventListener('play', () => {
    isPlaying.value = true;
  });

  videoRef.value.addEventListener('pause', () => {
    isPlaying.value = false;
  });

  videoRef.value.addEventListener('timeupdate', () => {
    currentTime.value = videoRef.value.currentTime;
  });

  videoRef.value.addEventListener('loadedmetadata', () => {
    duration.value = videoRef.value.duration;
  });
});

<!-- <template> -->
  <div class="video-player">
    <media-controller>
      <video
        ref="videoRef"
        slot="media"
        src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/high.mp4"
        crossorigin
        playsinline
      ></video>

      <media-control-bar>
        <media-play-button></media-play-button>
        <media-time-range></media-time-range>
        <media-time-display showduration></media-time-display>
        <media-mute-button></media-mute-button>
        <media-volume-range></media-volume-range>
        <media-fullscreen-button></media-fullscreen-button>
      </media-control-bar>
    </media-controller>

    <div class="status">
      <p>狀態: {{ isPlaying ? '播放中' : '已暫停' }}</p>
      <p>時間: {{ formatTime(currentTime) }} / {{ formatTime(duration) }}</p>
    </div>
  </div>

 /* <style scoped> */
.video-player {
  max-width: 800px;
  margin: 0 auto;
}

media-controller {
  --media-primary-color: white;
  --media-range-bar-color: #3b82f6;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.status {
  margin-top: 10px;
  padding: 10px;
  background: #f5f5f5;
  border-radius: 4px;
}

接下來看 Nuxt 如何整合！

nuxt.config.js

export default defineNuxtConfig({
  vue: {
    compilerOptions: {
      isCustomElement: (tag) => tag.startsWith('media-')
    }
  }
})

plugins/media-chrome.client.js ( 只在 client 載入 )

export default defineNuxtPlugin(() => {
    import('media-chrome');
})

這麼一來我們就可以在 Vue 跟 Nuxt 中使用 Media Chrome ～

支援其他的媒體格式

Media Chrome 不只支援原生 <video>，還支援多種第三方播放器：

其他的媒體格式	用途
<hls-video>	HLS 串流
<dash-video>	DASH 串流
<youtube-video>	YouTube 影片
<vimeo-video>	Vimeo 影片
<mux-video>	Mux 影片服務
<cloudflare-video>	Cloudflare 影片
<wistia-video>	Wistia 影片
<videojs-video>	Video.js 播放器

如何使用？

先來安裝一下其他媒體組件，拿 HLS 串流為例子：

npm install hls-video-element

然後 imoprt 它

import 'hls-video-element'

這樣一來就可以直接使用 <hls-video /> 來做到直播串流的播放器

<media-controller 
  defaultstreamtype="live"
  liveedgeoffset="10"
  seektoliveoffset="7"
>
  <hls-video
    slot="media"
    src="https://live-stream-url/stream.m3u8"
  ></hls-video>
  
  <media-control-bar>
    <media-play-button></media-play-button>
    <media-live-button></media-live-button>
    <media-time-range></media-time-range>
    <media-mute-button></media-mute-button>
    <media-fullscreen-button></media-fullscreen-button>
  </media-control-bar>
</media-controller>

多國語系語言包的使用

我們現在使用的時候滑鼠滑過去的提示都是英文的，但實際上 Media Chrome 有提供幾種的語言包可以讓我們去切換語言。

目前支援的語系有：

語系	對應語言
en	English（英文）
es	Español（西班牙文）
fr	Français（法文）
pt	Português（葡萄牙文）
zh-CN	简体中文
zh-TW	繁體中文

該如何載入語系呢？

// 繁體中文
import 'media-chrome/dist/lang/zh-TW.js'

// 簡體中文
import 'media-chrome/dist/lang/zh-CN.js'

// 其他語言
import 'media-chrome/dist/lang/es.js'  // 西班牙文
import 'media-chrome/dist/lang/fr.js'  // 法文
import 'media-chrome/dist/lang/pt.js'  // 葡萄牙文

然後設定播放器的語系

<!-- 使用繁體中文 -->
<media-controller lang="zh-TW">
  <video slot="media" src="video.mp4"></video>
  <media-control-bar>
    <media-play-button></media-play-button>
    <media-mute-button></media-mute-button>
    <media-fullscreen-button></media-fullscreen-button>
  </media-control-bar>
</media-controller>

這麼一來多國語系的部分就設定完成了！是不是非常簡單～

這次的案例我有放到 stackblitz 中，大家有興趣可以玩一玩！

stackblitz 範例 : https://stackblitz.com/edit/vitejs-vite-y7zh1nog?file=src%2FApp.vue

還沒有看過上一篇的請往這邊走：https://thecodingpro.com/b/B0VqiEzIdIH1RbwJ8Q6G

目前把 Media Chrome 大部分的功能都簡單的介紹一遍了，還有如何整合到框架裡面，接下來各位可以自己再去嘗試做一些客製化的操作，讓自己網站的播放器可以更符合使用者的體驗！

好啦～那我們就下一篇教學見啦～敬請期待！