水平居中、高度固定的播放器
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"/> <title></title> <link rel="stylesheet" href="/Component_Front/bootstrap/css/bootstrap.min.css"/> <link rel="stylesheet" href="video-js-7.2.4/video-js.min.css"/> <style> .flex{ display:flex; align-items:center; justify-content:center; background-color:#000; } </style> </head> <body> <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'> </video> </div> </div> </div> </div> <script src="video-js-7.2.4/video.min.js"></script> <script> videojs('my-player', { controls: true, autoplay: false, preload: 'auto', width: 960, height: 400 }); </script> </body> </html> |
以下為完成意義圖
—
字幕
要讓影片加上字幕只須加上 <track> 即可,例如這樣
1 2 3 4 5 6 7 8 9 10 11 12 |
<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> |
不過還需要注意字幕格式
原始的字幕
1 2 3 4 5 6 7 8 |
1 00:00:34,574 --> 00:00:40,305 片名:《終極面試》 翻譯:Blue 2 00:01:52,800 --> 00:01:54,879 這是你應得的 |
這個字幕是不能直接使用,必須做以下修改
1 2 3 4 5 6 7 8 9 |
WEBVTT 1 00:00:34.574 --> 00:00:40.305 片名:《終極面試》 翻譯:Blue 2 00:01:52.800 --> 00:01:54.879 這是你應得的 |
- 開頭加上 WEBVTT
- 將時間小數點的逗號改為小數點
—
自訂字幕格式
設定靠左對齊、黃色字
1 2 3 |
00:00:00.000 --> 00:00:40.305 line-left align:left <c.yellow.bg_blue>片名:《終極面試》</c> 翻譯:Blue |
CSS
1 2 3 |
.video-js .vjs-text-track-display .yellow{ color: yellow; } |
—
3,315 total views, 1 views today