Video.js - 基本播放以及字幕

參考資源

基本使用

如果有 data-setup="{}" 就會自動載入

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://vjs.zencdn.net/8.3.0/video-js.css" rel="stylesheet"/>
    <script src="https://vjs.zencdn.net/8.3.0/video.min.js"></script>
</head>
<body>

<video id="video-js" class="video-js vjs-fluid" data-setup="{}" controls="controls" preload="auto" controlsList="nodownload">
    <source src="RAIN.mkv" type="video/mp4"/>
    <p class="vjs-no-js">您的瀏覽器不支援 Javascript</p>
</video>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

<p class="vjs-no-js">您的瀏覽器不支援 Javascript</p>

</video>

</body>

</html>

Javascript 載入

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://vjs.zencdn.net/8.3.0/video-js.css" rel="stylesheet"/>
    <script src="https://vjs.zencdn.net/8.3.0/video.min.js"></script>
</head>
<body>

<video id="video-js" class="video-js vjs-fluid" controls="controls" preload="auto" controlsList="nodownload">
    <source src="RAIN.mkv" type="video/mp4"/>
    <p class="vjs-no-js">您的瀏覽器不支援 Javascript</p>
</video>

<script>
    videojs('video-js', {
        controls: true,
        autoplay: false,
        preload: 'auto',
    });
</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

<p class="vjs-no-js">您的瀏覽器不支援 Javascript</p>

</video>

videojs('video-js', {

controls: true,

autoplay: false,

preload: 'auto',

});

</script>

</body>

</html>

MP4/M3U8

m3u8-video-js (codepen.io)

從 7.x 開始很多外掛就會內建，如果不需要可以選擇 video.core.min.js 版本

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://vjs.zencdn.net/8.3.0/video-js.css" rel="stylesheet" />
    <link href="https://unpkg.com/@videojs/themes@1/dist/fantasy/index.css" rel="stylesheet"/>
    <style>
        html,body{
            height: 100%;
        }
    </style>
</head>
<body>

<div class="container" style="height: 100%;">
    <div class="row align-items-center" style="height: 100%;">
        <div class="col-xs-12">
            <div>
                <video id="my-player" class="video-js vjs-fluid vjs-theme-fantasy">
                    <source src="https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8"/>
                    <p class="vjs-no-js">您的瀏覽器不支援 Javascript</p>
                </video>
            </div>
        </div>
    </div>
</div>

<script src="https://vjs.zencdn.net/8.3.0/video.min.js"></script>
<script>
    videojs('my-player', {
        controls: true,
        autoplay: false,
        preload: 'none',
    });
</script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Title</title>

<style>

html,body{

height: 100%;

}

</style>

</head>

<body>

<div>

<p class="vjs-no-js">您的瀏覽器不支援 Javascript</p>

</video>

</div>

videojs('my-player', {

controls: true,

autoplay: false,

preload: 'none',

});

</script>

</body>

</html>

字幕

WebVTT Example

要讓影片加上字幕只須加上 <track> 即可，例如這樣

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <div class="flex" style="height: 400px;">
                <video id="my-player" class="video-js vjs-big-play-centered" >
                    <source src="EP01.mp4" type='video/mp4'>
                    <track kind='captions' src="EP01.srt" label="Chinese" default />
                </video>
            </div>
        </div>
    </div>
</div>

</video>

</div>

不過還需要注意字幕格式

原始的字幕

1
00:00:34,574 --> 00:00:40,305
片名：《終極面試》
翻譯：Blue

2
00:01:52,800 --> 00:01:54,879
這是你應得的

00:00:34,574 --> 00:00:40,305

片名：《終極面試》

翻譯：Blue

00:01:52,800 --> 00:01:54,879

這是你應得的

這個字幕是不能直接使用，必須做以下修改

WEBVTT
1
00:00:34.574 --> 00:00:40.305
片名：《終極面試》
翻譯：Blue

2
00:01:52.800 --> 00:01:54.879
這是你應得的

WEBVTT

00:00:34.574 --> 00:00:40.305

片名：《終極面試》

翻譯：Blue

00:01:52.800 --> 00:01:54.879

這是你應得的

開頭加上 WEBVTT
將時間小數點的逗號改為小數點

自訂字幕格式

WebVTT: The Web Video Text Tracks Format

設定靠左對齊、黃色字

00:00:00.000 --> 00:00:40.305 line-left align:left
<c.yellow.bg_blue>片名：《終極面試》</c>
翻譯：Blue

00:00:00.000 --> 00:00:40.305 line-left align:left

<c.yellow.bg_blue>片名：《終極面試》</c>

翻譯：Blue

CSS

.video-js .vjs-text-track-display .yellow{
    color: yellow;
}

.video-js .vjs-text-track-display .yellow{

color: yellow;

}

4,699 total views, 1 views today

Video.js - 基本播放以及字幕

參考資源

基本使用

MP4/M3U8

字幕

自訂字幕格式

Related Post

One thought on “Video.js - 基本播放以及字幕”

Video.js - 基本播放以及字幕

參考資源

基本使用

MP4/M3U8

字幕

自訂字幕格式

Related Post

LINE Messaging API - LINE 對話機器人

Let’s Encrypt - *.hoyo.idv.tw 通配網域證書

將 Windows 功能轉換成 REST API - 以 Microsoft Office Document Imaging 為例

One thought on “Video.js - 基本播放以及字幕”