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

Posted on 2018-10-17 by hoyo

水平居中、高度固定的播放器

Flex实现水平垂直居中.md

<!DOCTYPE html>

<html>

<head>

content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"/>

<style>

.flex{

display:flex;

align-items:center;

justify-content:center;

background-color:#000;

}

</style>

</head>

<body>

</video>

</div>

videojs('my-player', {

controls: true,

autoplay: false,

preload: 'auto',

width: 960,

height: 400

});

</script>

</body>

</html>

以下為完成意義圖

—

字幕

WebVTT Example

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

</video>

</div>

不過還需要注意字幕格式

原始的字幕

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

片名：《終極面試》

翻譯：Blue

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

CSS

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

color: yellow;

}

—

1,336 total views, 2 views today

FFmpeg 將字幕檔和影片合併

Posted on 2018-10-16 by hoyo

FFmpeg 將影片合併字幕檔

HowToBurnSubtitlesIntoVideo

1	> ffmpeg -i a.mkv -vf subtitles=a.ass a.mp4

或使用 ass filter 指定 ass 字幕

1	> ffmpeg -i a.mkv -vf "ass=a.ass" a1.mp4

預設的字型因為原本是簡體字字幕對於正體字顯示效果不佳，所以需要調整設定

—

ass 字幕

SSA、ASS 參數-攻略

[V4+ Styles]

Format: Name, Fontname, Fontsize, PrimaryColour, SecondaryColour, OutlineColour, BackColour, Bold, Italic, Underline, StrikeOut, ScaleX, ScaleY, Spacing, Angle, BorderStyle, Outline, Shadow, Alignment, MarginL, MarginR, MarginV, Encoding

Style: ENG.雅黑,標楷體,20,&H00FFFFFF,&H00000000,&H00000000,&H00000000,0,0,0,0,100,100,0,0,1,1,1,2,5,5,10,1

設定關閉粗體、20 大小、標楷體字型

—

481 total views, 1 views today

Docker – 網址轉 Port

Posted on 2018-10-12 by hoyo

使用 Docker 在一台主機上執行多 HTTP Service，因為需要 Port 對外，如果看不懂網路其他的設定不妨參考 Hoyo 的思路

Hoyo 的作法是使用一台 Docker container 安裝 Nginx 來提供 Proxy Pass 功能，將網址直接轉到 container。

此方法的好處是，新增子 HTTP Service 只須 docker run 不需要設定其他網路設定，對於 Nginx 只需要新增 conf 重新啟動 nginx service 後即可啟用，也不需要變更 container

—

Nginx container

Nginx 的主機選擇的是 Debian Linux ，所以須先 pull 一個 debian 環境，在此使用的是 debian:9 ，然後是安裝 nginx

How To Install Nginx on Debian 9

1	# apt install -y nginx

—

子 HTTP Service container

實際提供 HTTP 服務的容器，使用的也是 Debian:9 ，然後安裝的是 Apache 2.4 藉以和 Proxy Pass 區隔，當然使用 Nginx 也可以

—

子 WWW 啟動

子 WWW 啟動不需要啟動 port 對應

1	# docker run --name="www1" -d hoyo/httpd:v6

查詢 contriner IP address

# docker inspect www1 | grep IPAddress

"SecondaryIPAddresses": null,

"IPAddress": "172.17.0.2",

How to get a Docker container’s IP address from the host?

# docker inspect -f '{{.Name}} - {{.NetworkSettings.IPAddress }}' $(docker ps -aq)

/www2 - 172.17.0.4

/nginx - 172.17.0.3

/www1 - 172.17.0.2

—

使用 Nginx 將多 container WWW 服務轉到網址

How do I point my custom domain to my IP:Port (41.111.20.36:8080)?

1	# docker run --name="nginx" -p 80:80 -itd debian/nginx:v1 bash

vi /etc/nginx/sites-available/www1

server {

listen 80;

server_name www1.hoyo.idv.tw;

location / {

proxy_set_header Host $host;

proxy_pass http://172.17.0.2;

}

將需要啟動的網站連結到 sites-enabled

1	# ln -s /etc/nginx/sites-available/www1 /etc/nginx/sites-enabled/www1

重新啟動 Nginx

1	# nginx -s reload

—

503 total views, 1 views today

使用 wkhtmltopdf 將 HTML 轉成 PDF

Posted on 2018-10-09 by hoyo

使用 wkhtmltopdf 相對 TCPDF 來說可大幅簡化 PDF 的轉換工作

—

CentOS 6 安裝

# wget https://downloads.wkhtmltopdf.org/0.12/0.12.5/wkhtmltox-0.12.5-1.centos6.x86_64.rpm

# yum install -y libXext libXrender fontconfig xorg-x11-fonts-75dpi xorg-x11-fonts-Type1

# rpm -Uvh wkhtmltox-0.12.5-1.centos6.x86_64.rpm

—

CentOS 7 安裝

# wget https://downloads.wkhtmltopdf.org/0.12/0.12.5/wkhtmltox-0.12.5-1.centos7.x86_64.rpm

# yum install -y fontconfig xorg-x11-fonts-75dpi xorg-x11-fonts-Type1

# rpm -Uvh wkhtmltox-0.12.5-1.centos7.x86_64.rpm

—

安裝中文字型及顯示

Hoyo 發生的情況是因為要產生 PDF 的 HTML，所以沒有給完整的結構，因此就少了編碼宣告才發生亂碼

1	<meta http-equiv="content-type" content="text/html;charset=utf-8">

如果是系統沒有中文字型請參考以下步驟

# mkdir /usr/share/fonts/simsun

# cp simsun.ttc /usr/share/fonts/simsun/

# fc-cache -fv

# fc-list

SimSun,宋体:style=Regular

—

開始使用

1	# wkhtmltopdf a.html a.pdf

以下是一個實際案例，此為從 Word 設計後轉貼到網頁編輯器 TinyMCE 上，然後再經過 PHP 套版最後的結果

原來使用 TCPDF 的結果，因為 TCPDF 有中文避頭尾功能，所以整體編排結果和網頁顯示不一，如果花時間調整應該也可以得到滿意的結果，不過 Hoyo 就先放棄了

—

設定其他字型 (楷體、黑體)

安裝完字型後，使用 fc-list 指令列出安裝完成字型

# fc-list :lang=zh

楷体,KaiTi:style=Normal,obyčejné,Standard,Κανονικά,Regular,Normaali,Normál,Normale,Standaard,Normalny,Обычный,Normálne,Navadno,Arrunta

微软雅黑,Microsoft YaHei:style=Normal,obyčejné,Standard,Κανονικά,Regular,Normaali,Normál,Normale,Standaard,Normalny,Обычный,Normálne,Navadno,Arrunta

文泉驛正黑,WenQuanYi Zen Hei,文泉驿正黑:style=Regular

Microsoft YaHei Mono:style=Regular

教育部標準楷書,TW\-MOE\-Std\-Kai:style=Regular

文泉驛等寬正黑,WenQuanYi Zen Hei Mono,文泉驿等宽正黑:style=Regular

文泉驛點陣正黑,WenQuanYi Zen Hei Sharp,文泉驿点阵正黑:style=Regular

將列出的首個關鍵字設定為 HTML 的字型名稱，例如楷體必須設定為「楷体」，不是網路上說的 KaiTi 也不是楷體，更不是標楷體

HTML

<html>

<head>

<style>

font-family: "楷体", 'Microsoft YaHei', serif;

}

</style>

</head>

<body>

—

頁首、頁尾及大綱

—

紙本版面排版問題

关于wkhtmltopdf，你一定想知道这些

<style>

font-family: "Microsoft YaHei Mono", serif;

font-size: 18px;

letter-spacing: 0;

white-space: pre;

word-wrap: break-word;

}

</style>

—

1,502 total views, 2 views today

hoyo 學習紀錄

PHP 網頁應用 IOT 物聯網自動化

Monthly Archives: 10 月 2018

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

水平居中、高度固定的播放器

字幕

自訂字幕格式

FFmpeg 將字幕檔和影片合併

FFmpeg 將影片合併字幕檔

ass 字幕

Docker – 網址轉 Port

Nginx container

子 HTTP Service container

子 WWW 啟動

使用 Nginx 將多 container WWW 服務轉到網址

使用 wkhtmltopdf 將 HTML 轉成 PDF

CentOS 6 安裝

CentOS 7 安裝

安裝中文字型及顯示

開始使用

設定其他字型 (楷體、黑體)

頁首、頁尾及大綱

紙本版面排版問題